User Signup Form Validation and Toast Message

app/components/reusables/onboarding-input.hbs

@@ -7,7 +7,6 @@
   {{#if @required}}
     <span data-test-required={{@name}} class='required'>*</span>
   {{/if}}
-  {{! template-lint-disable no-down-event-binding  }}
   <input
     data-test-input-field={{@name}}
     name={{@name}}
@@ -19,7 +18,6 @@
     value={{@value}}
     disabled={{@disabled}}
     {{on 'input' @onInput}}
-    {{on 'keydown' @onKeydown}}
   />
   {{#if @hasButtonInsideInput}}
     <Reusables::Button

app/components/signup-steps/step-one.hbs

@@ -16,10 +16,14 @@
   @required={{true}}
   @value={{this.data.firstname}}
   @onInput={{this.inputHandler}}
-  @onKeydown={{this.avoidNumbersAndSpaces}}
   @hasButtonInsideInput={{false}}
   @disabled={{false}}
 />
+
+{{#if this.errorMessage.firstname}}
+  <div class='error__message'>{{this.errorMessage.firstname}}</div>
+{{/if}}
+
 <Reusables::OnboardingInput
   @field='Last Name'
   @name='lastname'
@@ -28,11 +32,14 @@
   @required={{true}}
   @value={{this.data.lastname}}
   @onInput={{this.inputHandler}}
-  @onKeydown={{this.avoidNumbersAndSpaces}}
   @hasButtonInsideInput={{false}}
   @disabled={{false}}
 />
 
+{{#if this.errorMessage.lastname}}
+  <div class='error__message'>{{this.errorMessage.lastname}}</div>
+{{/if}}
+
 <Reusables::OnboardingInput
   @field='Username'
   @name='username'
@@ -44,7 +51,6 @@
   @classDisableInput='input-disable'
   @onClickGetUsername={{this.getUsername}}
   @onInput={{this.inputHandler}}
-  @onKeydown={{this.avoidNumbersAndSpaces}}
   @disabled={{true}}
 />
 

app/components/signup-steps/step-one.js

@@ -2,14 +2,32 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
+import { inject as service } from '@ember/service';
 import { ROLE } from '../../constants/stepper-signup-data';
 import { JOIN_DEBOUNCE_TIME } from '../../constants/join';
 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 isValid = true;
   @tracked username = '';
+  @tracked isValid = true;
   role = ROLE;
+  @tracked errorMessage = {
+    firstname: '',
+    lastname: '',
+  };
+
+  nameValidator(name) {
+    const pattern = /^[a-zA-Z]{1,20}$/;
+
+    if (pattern.test(name)) {
+      return { isValid: false };
+    } else {
+      return { isValid: true };
+    }
+  }
+
   @action inputHandler(e) {
     const { onChange } = this.args;
     const passVal = () => {
@@ -18,7 +36,22 @@ export default class SignupStepsStepOneComponent extends Component {
         [e.target.name]: e.target.value,
       };
       onChange(e.target.name, e.target.value.toLowerCase());
-      if (this.data.firstname.trim() > '' && this.data.lastname.trim() > '') {
+      const field = e.target.name;
+      if (field === 'firstname' || field === 'lastname') {
+        const { isValid } = this.nameValidator(e.target.value);
+        this.errorMessage = {
+          ...this.errorMessage,
+          [field]: isValid
+            ? `No spaces, numbers, or special characters allowed.`
+            : '',
+        };
+      }
+      if (
+        this.data.firstname.trim() > '' &&
+        this.data.lastname.trim() > '' &&
+        this.errorMessage.firstname === '' &&
+        this.errorMessage.lastname === ''
+      ) {
         this.isValid = false;
       } else {
         this.isValid = true;
@@ -54,10 +87,18 @@ export default class SignupStepsStepOneComponent extends Component {
         }
       );
       const data = await response.json();
-      this.username = data.username;
-      this.args.setUsername(this.username);
+      if (response.status === 200) {
+        this.username = data.username;
+        this.args.setUsername(this.username);
+      } else if (response.status === 401) {
+        this.toast.error(
+          'Please login to continue.',
+          '',
+          toastNotificationTimeoutOptions
+        );
+      }
     } catch (err) {
-      console.log('Error: ', err);
+      console.log('Error: ', 'Something went wrong');
     }
   }
 }

app/constants/toast-notification.js

@@ -0,0 +1,5 @@
+export const toastNotificationTimeoutOptions = {
+  timeOut: '0',
+  extendedTimeOut: '0',
+  preventDuplicates: false,
+};

app/styles/onboarding-card.module.css

@@ -31,7 +31,8 @@
     position: absolute;
     transform: translateX(-50%);
     left: 50%;
-    top: -15%;
+    top: 0;
+    transform: translateX(-50%) translateY(-50%);
 }
 
 .logos-container__rds {

tests/integration/components/signup-steps/step-one-test.js

@@ -138,7 +138,7 @@ module('Integration | Component | signup-steps/step-one', function (hooks) {
       .hasProperty('disabled', true);
   });
 
-  test('generateUsername button is enabled when firstname and lastname input fields are not empty', async function (assert) {
+  test('generateUsername button is enabled when firstname and lastname input fields are not empty and valid input', async function (assert) {
     assert.expect(1);
     this.set('onInput', (e) => {
       this.value = e.target.value;
@@ -202,4 +202,21 @@ module('Integration | Component | signup-steps/step-one', function (hooks) {
       'signupDetails.role is updated'
     );
   });
+
+  test('It display error message and disable the button for invalid input', async function (assert) {
+    assert.expect(2);
+    this.set('handleInputChange', (inputName, inputValue) => {
+      this.name = inputName;
+      this.value = inputValue;
+    });
+    await render(
+      hbs`<SignupSteps::StepOne  @onChange={{this.handleInputChange}}/ />`
+    );
+    await typeIn('[data-test-input-field=firstname]', 'shubham_1');
+    await typeIn('[data-test-input-field=lastname]', 'sigdar@');
+    assert.dom('.error__message').exists();
+    assert
+      .dom('[data-test-button=generateUsername]')
+      .hasProperty('disabled', true);
+  });
 });