logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

registration.vue (11790B)

    

  1. <template>
  2.   <div class="settings panel panel-default">
  3.     <div class="panel-heading">
  4.       <h1 class="title">
  5.         {{ $t('registration.registration') }}
  6.       </h1>
  7.     </div>
  8.     <div
  9.       v-if="!hasSignUpNotice"
  10.       class="panel-body"
  11.     >
  12.       <form
  13.         class="registration-form"
  14.         @submit.prevent="submit(user)"
  15.       >
  16.         <div class="container">
  17.           <div class="text-fields">
  18.             <div
  19.               class="form-group"
  20.               :class="{ 'form-group--error': v$.user.username.$error }"
  21.             >
  22.               <label
  23.                 class="form--label"
  24.                 for="sign-up-username"
  25.               >{{ $t('login.username') }}</label>
  26.               <input
  27.                 id="sign-up-username"
  28.                 v-model.trim="v$.user.username.$model"
  29.                 :disabled="isPending"
  30.                 class="input form-control"
  31.                 :aria-required="true"
  32.                 :placeholder="$t('registration.username_placeholder')"
  33.               >
  34.             </div>
  35.             <div
  36.               v-if="v$.user.username.$dirty"
  37.               class="form-error"
  38.             >
  39.               <ul>
  40.                 <li v-if="!v$.user.username.required">
  41.                   <span>{{ $t('registration.validations.username_required') }}</span>
  42.                 </li>
  43.               </ul>
  44.             </div>
  46.             <div
  47.               class="form-group"
  48.               :class="{ 'form-group--error': v$.user.fullname.$error }"
  49.             >
  50.               <label
  51.                 class="form--label"
  52.                 for="sign-up-fullname"
  53.               >{{ $t('registration.fullname') }}</label>
  54.               <input
  55.                 id="sign-up-fullname"
  56.                 v-model.trim="v$.user.fullname.$model"
  57.                 :disabled="isPending"
  58.                 class="input form-control"
  59.                 :aria-required="true"
  60.                 :placeholder="$t('registration.fullname_placeholder')"
  61.               >
  62.             </div>
  63.             <div
  64.               v-if="v$.user.fullname.$dirty"
  65.               class="form-error"
  66.             >
  67.               <ul>
  68.                 <li v-if="!v$.user.fullname.required">
  69.                   <span>{{ $t('registration.validations.fullname_required') }}</span>
  70.                 </li>
  71.               </ul>
  72.             </div>
  74.             <div
  75.               class="form-group"
  76.               :class="{ 'form-group--error': v$.user.email.$error }"
  77.             >
  78.               <label
  79.                 class="form--label"
  80.                 for="email"
  81.               >{{ accountActivationRequired ? $t('registration.email') : $t('registration.email_optional') }}</label>
  82.               <input
  83.                 id="email"
  84.                 v-model="v$.user.email.$model"
  85.                 :disabled="isPending"
  86.                 class="input form-control"
  87.                 type="email"
  88.                 :aria-required="accountActivationRequired"
  89.               >
  90.             </div>
  91.             <div
  92.               v-if="v$.user.email.$dirty"
  93.               class="form-error"
  94.             >
  95.               <ul>
  96.                 <li v-if="!v$.user.email.required">
  97.                   <span>{{ $t('registration.validations.email_required') }}</span>
  98.                 </li>
  99.               </ul>
  100.             </div>
  102.             <div class="form-group">
  103.               <label
  104.                 class="form--label"
  105.                 for="bio"
  106.               >{{ $t('registration.bio_optional') }}</label>
  107.               <textarea
  108.                 id="bio"
  109.                 v-model="user.bio"
  110.                 :disabled="isPending"
  111.                 class="input form-control"
  112.                 :placeholder="bioPlaceholder"
  113.               />
  114.             </div>
  116.             <div
  117.               class="form-group"
  118.               :class="{ 'form-group--error': v$.user.password.$error }"
  119.             >
  120.               <label
  121.                 class="form--label"
  122.                 for="sign-up-password"
  123.               >{{ $t('login.password') }}</label>
  124.               <input
  125.                 id="sign-up-password"
  126.                 v-model="user.password"
  127.                 :disabled="isPending"
  128.                 class="input form-control"
  129.                 type="password"
  130.                 :aria-required="true"
  131.               >
  132.             </div>
  133.             <div
  134.               v-if="v$.user.password.$dirty"
  135.               class="form-error"
  136.             >
  137.               <ul>
  138.                 <li v-if="!v$.user.password.required">
  139.                   <span>{{ $t('registration.validations.password_required') }}</span>
  140.                 </li>
  141.               </ul>
  142.             </div>
  144.             <div
  145.               class="form-group"
  146.               :class="{ 'form-group--error': v$.user.confirm.$error }"
  147.             >
  148.               <label
  149.                 class="form--label"
  150.                 for="sign-up-password-confirmation"
  151.               >{{ $t('registration.password_confirm') }}</label>
  152.               <input
  153.                 id="sign-up-password-confirmation"
  154.                 v-model="user.confirm"
  155.                 :disabled="isPending"
  156.                 class="input form-control"
  157.                 type="password"
  158.                 :aria-required="true"
  159.               >
  160.             </div>
  161.             <div
  162.               v-if="v$.user.confirm.$dirty"
  163.               class="form-error"
  164.             >
  165.               <ul>
  166.                 <li v-if="v$.user.confirm.required.$invalid">
  167.                   <span>{{ $t('registration.validations.password_confirmation_required') }}</span>
  168.                 </li>
  169.                 <li v-if="v$.user.confirm.sameAs.$invalid">
  170.                   <span>{{ $t('registration.validations.password_confirmation_match') }}</span>
  171.                 </li>
  172.               </ul>
  173.             </div>
  175.             <div
  176.               class="form-group"
  177.               :class="{ 'form-group--error': v$.user.birthday.$error }"
  178.             >
  179.               <label
  180.                 class="form--label"
  181.                 for="sign-up-birthday"
  182.               >
  183.                 {{ birthdayRequired ? $t('registration.birthday') : $t('registration.birthday_optional') }}
  184.               </label>
  185.               <input
  186.                 id="sign-up-birthday"
  187.                 v-model="user.birthday"
  188.                 :disabled="isPending"
  189.                 class="input form-control"
  190.                 type="date"
  191.                 :max="birthdayRequired ? birthdayMinAttr : undefined"
  192.                 :aria-required="birthdayRequired"
  193.               >
  194.             </div>
  195.             <div
  196.               v-if="v$.user.birthday.$dirty"
  197.               class="form-error"
  198.             >
  199.               <ul>
  200.                 <li v-if="v$.user.birthday.required.$invalid">
  201.                   <span>{{ $t('registration.validations.birthday_required') }}</span>
  202.                 </li>
  203.                 <li v-if="v$.user.birthday.maxValue.$invalid">
  204.                   <span>{{ $t('registration.validations.birthday_min_age', { date: birthdayMinFormatted }) }}</span>
  205.                 </li>
  206.               </ul>
  207.             </div>
  209.             <div
  210.               class="form-group"
  211.               :class="{ 'form-group--error': v$.user.language.$error }"
  212.             >
  213.               <interface-language-switcher
  214.                 for="email-language"
  215.                 :prompt-text="$t('registration.email_language')"
  216.                 :language="v$.user.language.$model"
  217.                 :set-language="val => v$.user.language.$model = val"
  218.                 @click.stop.prevent
  219.               />
  220.             </div>
  222.             <div
  223.               v-if="accountApprovalRequired"
  224.               class="form-group"
  225.             >
  226.               <label
  227.                 class="form--label"
  228.                 for="reason"
  229.               >{{ $t('registration.reason') }}</label>
  230.               <textarea
  231.                 id="reason"
  232.                 v-model="user.reason"
  233.                 :disabled="isPending"
  234.                 class="input form-control"
  235.                 :placeholder="reasonPlaceholder"
  236.               />
  237.             </div>
  239.             <div
  240.               v-if="captcha.type != 'none'"
  241.               id="captcha-group"
  242.               class="form-group"
  243.             >
  244.               <label
  245.                 class="form--label"
  246.                 for="captcha-label"
  247.               >{{ $t('registration.captcha') }}</label>
  249.               <template v-if="['kocaptcha', 'native'].includes(captcha.type)">
  250.                 <img
  251.                   :src="captcha.url"
  252.                   @click="setCaptcha"
  253.                 >
  255.                 <sub>{{ $t('registration.new_captcha') }}</sub>
  257.                 <input
  258.                   id="captcha-answer"
  259.                   v-model="captcha.solution"
  260.                   :disabled="isPending"
  261.                   class="input form-control"
  262.                   type="text"
  263.                   autocomplete="off"
  264.                   autocorrect="off"
  265.                   autocapitalize="off"
  266.                   spellcheck="false"
  267.                 >
  268.               </template>
  269.             </div>
  271.             <div
  272.               v-if="token"
  273.               class="form-group"
  274.             >
  275.               <label for="token">{{ $t('registration.token') }}</label>
  276.               <input
  277.                 id="token"
  278.                 v-model="token"
  279.                 disabled="true"
  280.                 class="input form-control"
  281.                 type="text"
  282.               >
  283.             </div>
  284.             <div class="form-group">
  285.               <button
  286.                 :disabled="isPending"
  287.                 type="submit"
  288.                 class="btn button-default"
  289.               >
  290.                 {{ $t('registration.register') }}
  291.               </button>
  292.             </div>
  293.           </div>
  295.           <!-- eslint-disable vue/no-v-html -->
  296.           <div
  297.             class="terms-of-service"
  298.             v-html="termsOfService"
  299.           />
  300.           <!-- eslint-enable vue/no-v-html -->
  301.         </div>
  302.         <div
  303.           v-if="serverValidationErrors.length"
  304.           class="form-group"
  305.         >
  306.           <div class="alert error">
  307.             <span
  308.               v-for="error in serverValidationErrors"
  309.               :key="error"
  310.             >{{ error }}</span>
  311.           </div>
  312.         </div>
  313.       </form>
  314.     </div>
  315.     <div v-else>
  316.       <p class="registration-notice">
  317.         {{ signUpNotice.message }}
  318.       </p>
  319.     </div>
  320.   </div>
  321. </template>
  323. <script src="./registration.js"></script>
  324. <style lang="scss">
  325. .registration-form {
  326.   display: flex;
  327.   flex-direction: column;
  328.   margin: 0.6em;
  330.   .container {
  331.     display: flex;
  332.     flex-direction: row;
  334.     > * {
  335.       min-width: 0;
  336.     }
  337.   }
  339.   .terms-of-service {
  340.     flex: 0 1 50%;
  341.     margin: 0.8em;
  342.   }
  344.   .text-fields {
  345.     margin-top: 0.6em;
  346.     flex: 1 0;
  347.     display: flex;
  348.     flex-direction: column;
  349.   }
  351.   textarea {
  352.     min-height: 100px;
  353.     resize: vertical;
  354.   }
  356.   .form-group {
  357.     display: flex;
  358.     flex-direction: column;
  359.     padding: 0.3em 0;
  360.     line-height: 2;
  361.     margin-bottom: 1em;
  362.   }
  364.   .form-group--error {
  365.     animation-name: shakeError;
  366.     animation-duration: 0.6s;
  367.     animation-timing-function: ease-in-out;
  368.   }
  370.   .form-group--error .form--label {
  371.     color: var(--cRed);
  372.   }
  374.   .form-error {
  375.     margin-top: -0.7em;
  376.     text-align: left;
  378.     span {
  379.       font-size: 0.85em;
  380.     }
  381.   }
  383.   .form-error ul {
  384.     list-style: none;
  385.     padding: 0 0 0 5px;
  386.     margin-top: 0;
  388.     li::before {
  389.       content: "• ";
  390.     }
  391.   }
  393.   form textarea {
  394.     line-height: 16px;
  395.     resize: vertical;
  396.   }
  398.   .captcha {
  399.     max-width: 350px;
  400.     margin-bottom: 0.4em;
  401.   }
  403.   .btn {
  404.     margin-top: 0.6em;
  405.     height: 2em;
  406.   }
  408.   .error {
  409.     text-align: center;
  410.   }
  411. }
  413. .registration-notice {
  414.   margin: 0.6em;
  415. }
  417. @media all and (max-width: 800px) {
  418.   .registration-form .container {
  419.     flex-direction: column-reverse;
  420.   }
  421. }
  422. </style>