added checkbox to select role

Real-Dev-Squad · Jul 22, 2023 · f72378d · f72378d
1 parent 3215427
commit f72378d
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 118 deletions.
diff --git a/app/components/new-signup/checkbox.hbs b/app/components/new-signup/checkbox.hbs
@@ -0,0 +1,58 @@
+<div class='user-details'>
+  <h2 class='user-details__heading' data-test-signup-form-label>
+    {{this.label}}
+  </h2>
+  <div class='role-details__field'>
+    <label class='checkbox-label'>
+      <input
+        type='checkbox'
+        name='developer'
+        checked={{@roles.developer}}
+        {{on 'change' this.checkboxFieldChanged}}
+        class='checkbox-input'
+      />
+      Developer
+    </label>
+    <label class='checkbox-label'>
+      <input
+        type='checkbox'
+        name='designer'
+        checked={{@roles.designer}}
+        {{on 'change' this.checkboxFieldChanged}}
+        class='checkbox-input'
+      />
+      Designer
+    </label>
+    <label class='checkbox-label'>
+      <input
+        type='checkbox'
+        name='mavens'
+        checked={{@roles.mavens}}
+        {{on 'change' this.checkboxFieldChanged}}
+        class='checkbox-input'
+      />
+      Mavens
+    </label>
+    <label class='checkbox-label'>
+      <input
+        type='checkbox'
+        name='productmanager'
+        checked={{@roles.productmanager}}
+        {{on 'change' this.checkboxFieldChanged}}
+        class='checkbox-input'
+      />
+      Product Manager
+    </label>
+  </div>
+
+  <div class='signup-action__btn'>
+    <Button
+      @data-test-btn='signup'
+      @onClick={{@onClick}}
+      @disabled={{@isButtonDisabled}}
+      @isLoading={{@isLoading}}
+    >
+      Submit
+    </Button>
+  </div>
+</div>
diff --git a/app/components/new-signup/select.js → app/components/new-signup/checkbox.js b/app/components/new-signup/select.js → app/components/new-signup/checkbox.js
@@ -9,8 +9,10 @@ export default class SignupComponent extends Component {
     return LABEL_TEXT[currentStep];
   }
 
-  @action selectFieldChanged({ target: { value } }) {
-    const { onChange, currentStep } = this.args;
-    onChange(currentStep, value);
+  @action checkboxFieldChanged(event) {
+    const { onChange } = this.args;
+    const roleKey = event.target.name;
+    const value = event.target.checked;
+    onChange(roleKey, value);
   }
 }
diff --git a/app/components/new-signup/input.hbs b/app/components/new-signup/input.hbs
@@ -16,24 +16,17 @@
   </div>
 
   <div class='signup-action__btn'>
-    {{#if @dev}}
-      <Button
-        @data-test-btn='signup'
-        @onClick={{@onClick}}
-        @disabled={{@isButtonDisabled}}
-        @isLoading={{@isLoading}}
-      >
+    <Button
+      @data-test-btn='signup'
+      @onClick={{@onClick}}
+      @disabled={{@isButtonDisabled}}
+      @isLoading={{@isLoading}}
+    >
+      {{#if @dev}}
         Next
-      </Button>
-    {{else}}
-      <Button
-        @data-test-btn='signup'
-        @onClick={{@onClick}}
-        @disabled={{@isButtonDisabled}}
-        @isLoading={{@isLoading}}
-      >
+      {{else}}
         {{if (eq @currentStep 'username') 'Submit' 'Next'}}
-      </Button>
-    {{/if}}
+      {{/if}}
+    </Button>
   </div>
 </div>
diff --git a/app/components/new-signup/select.hbs b/app/components/new-signup/select.hbs
diff --git a/app/controllers/new-signup.js b/app/controllers/new-signup.js
@@ -33,6 +33,8 @@ export default class NewSignUpController extends Controller {
     username: '',
   };
 
+  @tracked roles = {};
+
   @action changeStepToTwo() {
     this.currentStep = this.SECOND_STEP;
     this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_GETTING_STARTED);
@@ -69,56 +71,26 @@ export default class NewSignUpController extends Controller {
 
   @action handleInputChange(key, value) {
     this.error = '';
-    if (key === 'role') {
-      if (value === 'developer') {
-        this.developer = true;
-        this.designer = false;
-        this.mavens = false;
-        this.productManger = false;
-      } else if (value === 'designer') {
-        this.developer = false;
-        this.designer = true;
-        this.mavens = false;
-        this.productManger = false;
-      } else if (value === 'mavens') {
-        this.developer = false;
-        this.designer = false;
-        this.mavens = true;
-        this.productManger = false;
-      } else if (value === 'productManager') {
-        this.developer = false;
-        this.designer = false;
-        this.mavens = false;
-        this.productManger = true;
-      }
+    set(this.signupDetails, key, value);
+    if (this.signupDetails[key] > '') this.isButtonDisabled = false;
+    else this.isButtonDisabled = true;
+  }
+
+  @action handleCheckboxInputChange(key, value) {
+    this.error = '';
+    if (value) {
+      set(this.roles, key, true);
     } else {
-      set(this.signupDetails, key, value);
+      delete this.roles[key];
     }
-    if (this.signupDetails[key] > '') this.isButtonDisabled = false;
-    else if (
-      this.developer > '' ||
-      this.designer > '' ||
-      this.mavens > '' ||
-      this.productManger > ''
-    ) {
+    if (Object.keys(this.roles).length > 0) {
       this.isButtonDisabled = false;
-    } else this.isButtonDisabled = true;
+    } else {
+      this.isButtonDisabled = true;
+    }
   }
 
   @action async signup() {
-    let roles;
-
-    if (this.dev) {
-      if (this.developer) {
-        roles = { developer: this.developer };
-      } else if (this.designer) {
-        roles = { designer: this.designer };
-      } else if (this.mavens) {
-        roles = { mavens: this.mavens };
-      } else {
-        roles = { productManager: this.productManger };
-      }
-    }
     const signupDetails = {
       first_name: this.signupDetails.firstName,
       last_name: this.signupDetails.lastName,
@@ -148,7 +120,7 @@ export default class NewSignUpController extends Controller {
             ...signupDetails,
             roles: {
               ...userData.roles,
-              ...roles,
+              ...this.roles,
             },
           });
         })

diff --git a/app/styles/new-signup.css b/app/styles/new-signup.css
@@ -20,11 +20,6 @@
   padding: 1rem;
 }
 
-.role-details__field {
-  display: flex;
-  justify-content: center;
-}
-
 .user-details__heading {
   font-size: 2rem;
   color: var(--user-details--heading--bg);
@@ -40,13 +35,21 @@
   font-size: 2rem;
 }
 
-.user-details__field select {
-  padding: 0.8rem; 
-  border-radius: 10px;
-  border: 2px solid var(--user-details--input--border);
-  font-size: 2rem;
-  width: 24rem;
-  transition: all 0.1s;
+.role-details__field {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem 4rem;
+}
+
+.checkbox-label{
+  display: flex;
+  width: 12rem;
+  margin: 0 auto;
+  font-size: 1.3rem;
+}
+
+.checkbox-label .checkbox-input{
+  margin-right: 10px;
 }
 
 .signup-action__btn button {
@@ -57,7 +60,7 @@
   color: var(--button-signup--text);
   text-decoration: none;
   cursor: pointer;
-  width: 70%;
+  width: 75%;
   display: block;
   margin: auto;
   font-size: 2rem;
@@ -75,24 +78,19 @@
 }
 
 @media (max-width: 600px) {
-  .user-details__heading {
-    font-size: 1.4rem;
-  }
 
   .user-details__field input,
-  .user-details__field select,
   .signup-action__btn button {
     font-size: 1.5rem;
   }
 }
 
 @media (max-width: 480px) {
   .user-details__heading {
-    font-size: 1.1rem;
+    font-size: 1.6rem;
   }
 
   .user-details__field input,
-  .user-details__field select,
   .signup-action__btn button {
     font-size: 1.2rem;
   }

diff --git a/app/templates/new-signup.hbs b/app/templates/new-signup.hbs
@@ -52,10 +52,10 @@
 
 {{#if this.dev}}
   {{#if (eq this.currentStep this.FIFTH_STEP)}}
-    <NewSignup::Select
+    <NewSignup::Checkbox
       @onClick={{this.register}}
       @currentStep={{this.currentStep}}
-      @onChange={{this.handleInputChange}}
+      @onChange={{this.handleCheckboxInputChange}}
       @isButtonDisabled={{this.isButtonDisabled}}
       @isLoading={{this.isLoading}}
     />