From 60635e26a75e1de8b6be6f22fb399377ef7472c8 Mon Sep 17 00:00:00 2001
From: Stanislau Matsiyeuski <stanislau_matsiyeuski@epam.com>
Date: Wed, 11 Dec 2024 21:10:25 +0300
Subject: [PATCH] registration-form: add validation for agreed, add values in
 template for agreed and gender components

---
 .../components/registration-form/component.ts | 27 ++++++++++++++++---
 .../components/registration-form/template.hbs | 15 ++++++++++-
 frontend/translations/en-us.yaml              |  1 +
 frontend/translations/ru-ru.yaml              |  1 +
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/registration-form/component.ts b/frontend/app/components/registration-form/component.ts
index 86878eb57..2f5e09885 100644
--- 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
index ae93973d8..7148182b6 100644
--- 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
index 7bcc32a89..868b9c2c4 100644
--- 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
index f0667ad4d..d6f2b2646 100644
--- 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: Мужской