logo

pleroma-fe

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

registration.vue (11752B)

    

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