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 (12593B)

    

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