registration-form: add validation for agreed, add values in template …

…for agreed and gender components
Brain-up · Dec 11, 2024 · 60635e2 · 60635e2
1 parent a1d8520
commit 60635e2
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 4 deletions.
diff --git a/frontend/app/components/registration-form/component.ts b/frontend/app/components/registration-form/component.ts
@@ -32,6 +32,9 @@ export default class RegistrationFormComponent extends LoginFormComponent {
   @tracked gender!: 'MALE' | 'FEMALE';
   @tracked agreed = false;
 
+  @tracked agreedStatusErrorMessage = '';
+  @tracked serverErrorMessage = '';
+
   get warningPasswordsEquality() {
     if (this.repeatPassword === undefined) {
       return false;
@@ -82,6 +85,7 @@ export default class RegistrationFormComponent extends LoginFormComponent {
   }
 
   get registrationInProgress() {
+    console.log('here')
     return (
       this.loginInProgress ||
       this.registrationTask.lastSuccessful ||
@@ -110,7 +114,7 @@ export default class RegistrationFormComponent extends LoginFormComponent {
       ) as FirebaseAuthenticator;
       yield auth.registerUser(user.email, user.password);
     } catch (e) {
-      this.errorMessage = e.message;
+      this.serverErrorMessage = e.message;
       yield this.registrationTask.cancelAll();
       return;
     }
@@ -139,6 +143,19 @@ export default class RegistrationFormComponent extends LoginFormComponent {
   @action
   onSubmit(e: SubmitEvent & any) {
     e.preventDefault();
+    console.log('onSubmit')
+    console.log(this.agreed, 'this.agreed')
+    if (!this.agreed) {
+      this.agreedStatusErrorMessage = this.intl.t('registration_form.agree_terms');
+      return;
+    }
+
+    if (this.errorMessage) {
+      return;
+    }
+
+    this.serverErrorMessage = ''
+
     this.registrationTask.perform();
   }
 
@@ -150,6 +167,10 @@ export default class RegistrationFormComponent extends LoginFormComponent {
   @action
   setAgreedStatus(e: Document & any) {
     this.agreed = e.target.checked;
+
+    if (this.agreed) {
+      this.agreedStatusErrorMessage = '';
+    }
   }
 
   @action
@@ -166,7 +187,7 @@ export default class RegistrationFormComponent extends LoginFormComponent {
     const isValid = allowedKeys.includes(key) || !isNaN(key as any);
     if (!isValid) {
       e.preventDefault();
-    }  
-    
+    }
+
   }
 }
diff --git a/frontend/app/components/registration-form/template.hbs b/frontend/app/components/registration-form/template.hbs
@@ -56,6 +56,7 @@
           type="radio"
           class="w-3 h-3 border-gray-300"
           id="female"
+          checked={{eq this.gender "FEMALE"}}
           {{on "change" this.setGender}}
         />
         <label class="ml-1 text-sm text-gray-500" for="female">
@@ -68,6 +69,7 @@
           value="MALE"
           class="w-3 h-3 ml-4"
           id="male"
+          checked={{eq this.gender "MALE"}}
           {{on "change" this.setGender}}
         />
         <label class="ml-1 text-sm text-gray-500" for="male">
@@ -120,12 +122,18 @@
             {{this.errorMessage}}
           </p>
         {{/if}}
+        {{#if this.serverErrorMessage}}
+          <p data-test-form-error class="mt-2 text-xs text-red-500">
+            {{this.serverErrorMessage}}
+          </p>
+        {{/if}}
       </div>
       <div class="flex mb-4">
         <input
           id="agreement"
           name="agreement"
           type="checkbox"
+          checked={{this.agreed}}
           {{on "change" this.setAgreedStatus}}
         />
         <label class="block ml-2 text-sm" for="agreement">
@@ -138,11 +146,16 @@
           </LinkTo>
         </label>
       </div>
+      {{#if this.agreedStatusErrorMessage}}
+        <p data-test-form-error class="mt-2 text-xs text-red-500">
+          {{this.agreedStatusErrorMessage}}
+        </p>
+      {{/if}}
       <div class="flex mb-4">
         <Ui::Button
           @type="submit"
           class="w-full"
-          disabled={{not this.agreed}}
+          disabled={{false}}
           data-test-submit-form
           @title={{t "registration_form.registration"}}
         />

diff --git a/frontend/translations/en-us.yaml b/frontend/translations/en-us.yaml
@@ -45,6 +45,7 @@ registration_form:
   invalid_date: Invalid date
   empty_gender: Empty gender
   empty_lastname: Empty LastName
+  agree_terms: You must agree to the terms before registering
   gender: Gender
   gender_female: Female
   gender_male: Male

diff --git a/frontend/translations/ru-ru.yaml b/frontend/translations/ru-ru.yaml
@@ -47,6 +47,7 @@ registration_form:
   empty_gender: Пол не указан
   empty_lastname: Фамилия не Указана
   warning_enter_credentials: Пожалуйста, введите логин и пароль.
+  agree_terms: Вы должны согласиться с условиями перед регистрацией
   gender: Пол
   gender_female: Женский
   gender_male: Мужской