checking all signup details are filled or not

Real-Dev-Squad · Sep 20, 2023 · 0c1004b · 0c1004b
1 parent 58004fb
commit 0c1004b
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 31 deletions.
diff --git a/app/components/signup-steps/step-one.hbs b/app/components/signup-steps/step-one.hbs
@@ -46,7 +46,7 @@
   @type='text'
   @required={{true}}
   @value={{this.username}}
-  @isValid={{this.isValid}}
+  @isValid={{this.isUsernameButtonDisabled}}
   @hasButtonInsideInput={{true}}
   @classDisableInput='input-disable'
   @onClickGetUsername={{this.getUsername}}
@@ -62,14 +62,4 @@
   @value={{this.data.role}}
   @options={{this.role}}
   @onChange={{this.inputHandler}}
-/>
-
-<div class='signup'>
-  <Reusables::Button
-    @text='Sign Up'
-    @variant='dark'
-    @onClick={{this.signup}}
-    @test='signup'
-    @type='button'
-  />
-</div>
+/>
diff --git a/app/components/signup-steps/step-one.js b/app/components/signup-steps/step-one.js
@@ -9,20 +9,36 @@ import { APPS } from '../../constants/urls';
 import { toastNotificationTimeoutOptions } from '../../constants/toast-notification';
 export default class SignupStepsStepOneComponent extends Component {
   @service toast;
-  @tracked data = { firstname: '', lastname: '', role: '' };
+  @tracked data = { firstname: '', lastname: '', username: '', role: '' };
   @tracked username = '';
-  @tracked isValid = true;
+  @tracked isUsernameButtonDisabled = true;
   role = ROLE;
+  isValid;
   @tracked errorMessage = {
     firstname: '',
     lastname: '',
   };
 
+  constructor(...args) {
+    super(...args);
+    this.isValid = this.args.isValid;
+    const validated = this.isDataValid(this.data);
+    this.isValid(validated);
+  }
+  isDataValid(data) {
+    for (const key in data) {
+      if (data[key] === '') {
+        return false;
+      }
+    }
+    return true;
+  }
+
   nameValidator(name) {
     const pattern = /^[a-zA-Z]{1,20}$/;
 
     if (pattern.test(name)) {
-      return { isValid: false };
+      return { isUsernameButtonDisabled: false };
     } else {
       return { isValid: true };
     }
@@ -52,9 +68,9 @@ export default class SignupStepsStepOneComponent extends Component {
         this.errorMessage.firstname === '' &&
         this.errorMessage.lastname === ''
       ) {
-        this.isValid = false;
+        this.isUsernameButtonDisabled = false;
       } else {
-        this.isValid = true;
+        this.isUsernameButtonDisabled = true;
       }
     };
 
@@ -65,13 +81,6 @@ export default class SignupStepsStepOneComponent extends Component {
     console.log('');
   }
 
-  @action avoidNumbersAndSpaces(event) {
-    var keyCode = event.keyCode || event.which;
-    if (keyCode === 32 || (keyCode >= 48 && keyCode <= 57)) {
-      event.preventDefault();
-    }
-  }
-
   @action async getUsername() {
     try {
       const firstname = this.data.firstname.toLowerCase();
@@ -89,6 +98,7 @@ export default class SignupStepsStepOneComponent extends Component {
       const data = await response.json();
       if (response.status === 200) {
         this.username = data.username;
+        this.data.username = this.username;
         this.args.setUsername(this.username);
       } else if (response.status === 401) {
         this.toast.error(

diff --git a/app/components/stepper-signup.hbs b/app/components/stepper-signup.hbs
@@ -1,9 +1,26 @@
 <OnboardingCard>
   <form>
-  {{#if (eq this.currentStep 0)}}
-    <SignupSteps::StepZero @currentStep={{this.currentStep}} @letsGoHandler={{this.letsGoHandler}}/>
-  {{else if (eq this.currentStep 1)}}
-    <SignupSteps::StepOne @onChange={{this.handleInputChange}} @setUsername={{this.setUsername}} @currentStep={{this.currentStep}}/>
-  {{/if}}
-</form>
-</OnboardingCard>
+    {{#if (eq this.currentStep 0)}}
+      <SignupSteps::StepZero
+        @currentStep={{this.currentStep}}
+        @letsGoHandler={{this.letsGoHandler}}
+      />
+    {{else if (eq this.currentStep 1)}}
+      <SignupSteps::StepOne
+        @onChange={{this.handleInputChange}}
+        @setUsername={{this.setUsername}}
+        @currentStep={{this.currentStep}}
+        @isValid={{this.isValid}}
+      />
+      {{!-- <Reusables::Button
+        data-test-next-btn
+        @text={{if (eq this.currentStep 3) 'Preview' 'Next'}}
+        @variant='dark'
+        @disabled={{if (or this.preValid this.isValid) false true}}
+        @onClick={{this.nextStep}}
+        @test='next'
+        @type='submit'
+      /> --}}
+    {{/if}}
+  </form>
+</OnboardingCard>
diff --git a/app/components/stepper-signup.js b/app/components/stepper-signup.js
@@ -6,6 +6,7 @@ import { inject as service } from '@ember/service';
 export default class StepperSignupComponent extends Component {
   @service login;
   @service router;
+  @tracked isValid = false;
   @tracked currentStep =
     Number(localStorage.getItem('currentStep')) ?? Number(this.args.step) ?? 0;
   constructor() {
@@ -23,6 +24,8 @@ export default class StepperSignupComponent extends Component {
     role: {},
   };
 
+  isValid = (newVal) => (this.isValid = newVal);
+
   @action handleInputChange(key, value) {
     if (key === 'role') {
       this.signupDetails.role = {};