diff --git a/app/components/new-signup/checkbox.hbs b/app/components/new-signup/checkbox.hbs
new file mode 100644
index 00000000..811e0a58
--- /dev/null
+++ b/app/components/new-signup/checkbox.hbs
@@ -0,0 +1,58 @@
+
\ No newline at end of file
diff --git a/app/components/new-signup/select.js b/app/components/new-signup/checkbox.js
similarity index 62%
rename from app/components/new-signup/select.js
rename to app/components/new-signup/checkbox.js
index 5acd0382..880d6bc0 100644
--- a/app/components/new-signup/select.js
+++ b/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
index c77e929f..6fdd5fa0 100644
--- a/app/components/new-signup/input.hbs
+++ b/app/components/new-signup/input.hbs
@@ -16,24 +16,17 @@
- {{#if @dev}}
-
\ No newline at end of file
diff --git a/app/components/new-signup/select.hbs b/app/components/new-signup/select.hbs
deleted file mode 100644
index b76cffb9..00000000
--- a/app/components/new-signup/select.hbs
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
- {{this.label}}
-
-
-
-
-
-
-
- Submit
-
-
-
\ No newline at end of file
diff --git a/app/controllers/new-signup.js b/app/controllers/new-signup.js
index d3928de3..63ad3908 100644
--- 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
index 42ca253c..6d0399f4 100644
--- 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,12 +78,8 @@
}
@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;
}
@@ -88,11 +87,10 @@
@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
index 9adbb123..55a71f53 100644
--- 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)}}
-