Skip to content

Commit 4d2ed21

Browse files
Suvidh-kaushikMayankBansal12
Suvidh-kaushik
and
MayankBansal12
authored
feat: add role field for new-signup flow (#1103)
* updated newSignup flow for new users * fixed linting * fixed reivew comments * refactor: naming for role and constants * refactor: use double quotes for image cropper template --------- Co-authored-by: Mayank Bansal <mayankbansal125@gmail.com>
1 parent 7113cbe commit 4d2ed21

12 files changed

Lines changed: 109 additions & 107 deletions

File tree

‎app/components/new-signup/checkbox.hbs‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@
1010
data-test-checkbox-label={{data.name}}
1111
>
1212
<input
13-
type="checkbox"
14-
name={{data.name}}
15-
checked={{false}}
16-
{{on "change" this.checkboxFieldChanged}}
13+
type="radio"
14+
name="role"
15+
value={{data.name}}
16+
checked={{eq @signupDetails.role data.name}}
17+
{{on "change" (fn this.checkboxFieldChanged data.name)}}
1718
class="user-details__checkbox-input"
1819
data-test-checkbox-input={{data.name}}
1920
/>

‎app/components/new-signup/checkbox.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,8 @@ export default class SignupComponent extends Component {
1313
return LABEL_TEXT[currentStep];
1414
}
1515

16-
@action checkboxFieldChanged(event) {
16+
@action checkboxFieldChanged(selectedRole, event) {
1717
const { onChange } = this.args;
18-
const roleKey = event.target.name;
19-
const value = event.target.checked;
20-
onChange(roleKey, value);
18+
onChange(selectedRole, event.target.checked);
2119
}
2220
}

‎app/components/profile/image-cropper.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ export default class ImageCropperComponent extends Component {
1212

1313
@action loadCropper() {
1414
const image = document.getElementById('image-cropper');
15+
if (!image) {
16+
return;
17+
}
1518
this.cropper = new Cropper(image, {
1619
autoCrop: true,
1720
viewMode: 1,

‎app/constants/apis.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ export const APPLICATION_ID_LINK = (id) => {
1818
return `${APPS.DASHBOARD}/applications/?id=${id}`;
1919
};
2020

21+
export const SELF_PROFILE_UPDATE_URL = (userId, devFlag) => {
22+
return `${APPS.API_BACKEND}/users/${userId}?profile=true&dev=${devFlag}`;
23+
};
24+
2125
export const GENERATE_USERNAME_URL = (
2226
sanitizedFirstname,
2327
sanitizedLastname,
@@ -29,8 +33,6 @@ export const CHECK_USERNAME_AVAILABILITY = (userName) => {
2933
return `${APPS.API_BACKEND}/users/isUsernameAvailable/${userName}`;
3034
};
3135

32-
export const SELF_USERS_URL = `${APPS.API_BACKEND}/users/self`;
33-
3436
export const SELF_USER_STATUS_URL = `${APPS.API_BACKEND}/users/status/self`;
3537

3638
export const UPDATE_USER_STATUS = `${APPS.API_BACKEND}/users/status/self?userStatusFlag=true`;

‎app/constants/new-signup.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
const GET_STARTED = 'get-started';
22
const FIRST_NAME = 'firstName';
33
const LAST_NAME = 'lastName';
4-
const USERNAME = 'username';
54
const ROLE = 'role';
65
const THANK_YOU = 'thank-you';
76

87
export const NEW_SIGNUP_STEPS = [
98
GET_STARTED,
109
FIRST_NAME,
1110
LAST_NAME,
12-
USERNAME,
1311
ROLE,
1412
THANK_YOU,
1513
];
@@ -44,9 +42,21 @@ export const CHECK_BOX_DATA = [
4442
label: 'Maven',
4543
name: 'maven',
4644
},
45+
{
46+
label: 'Social Media',
47+
name: 'social_media',
48+
},
4749
{
4850
label: 'Product Manager',
49-
name: 'productmanager',
51+
name: 'product_manager',
52+
},
53+
{
54+
label: 'QA',
55+
name: 'qa',
56+
},
57+
{
58+
label: 'Project Manager',
59+
name: 'project_manager',
5060
},
5161
];
5262

‎app/controllers/new-signup.js‎

Lines changed: 31 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
CHECK_USERNAME_AVAILABILITY,
99
GENERATE_USERNAME_URL,
1010
SELF_USER_PROFILE_URL,
11-
SELF_USERS_URL,
11+
SELF_PROFILE_UPDATE_URL,
1212
} from '../constants/apis';
1313
import {
1414
SIGNUP_ERROR_MESSAGES,
@@ -30,14 +30,12 @@ export default class NewSignupController extends Controller {
3030
SECOND_STEP = NEW_SIGNUP_STEPS[1];
3131
THIRD_STEP = NEW_SIGNUP_STEPS[2];
3232
FOURTH_STEP = NEW_SIGNUP_STEPS[3];
33-
FIFTH_STEP = NEW_SIGNUP_STEPS[4];
34-
LAST_STEP = NEW_SIGNUP_STEPS[5];
33+
LAST_STEP = NEW_SIGNUP_STEPS[4];
3534

3635
@tracked signupDetails = {
3736
firstName: '',
3837
lastName: '',
39-
username: '',
40-
roles: {},
38+
role: '',
4139
};
4240

4341
get isDevMode() {
@@ -80,22 +78,11 @@ export default class NewSignupController extends Controller {
8078
}
8179
}
8280

83-
async registerUser(user) {
84-
return await apiRequest(SELF_USERS_URL, 'PATCH', user);
85-
}
86-
87-
async newRegisterUser(signupDetails, roles) {
81+
async registerUser(signupDetails, devFlag) {
8882
const getResponse = await apiRequest(SELF_USER_PROFILE_URL);
8983
const userData = await getResponse.json();
90-
91-
const res = await this.registerUser({
92-
...signupDetails,
93-
roles: {
94-
...userData.roles,
95-
...roles,
96-
},
97-
});
98-
84+
const url = SELF_PROFILE_UPDATE_URL(userData?.id, devFlag);
85+
const res = await apiRequest(url, 'PATCH', signupDetails);
9986
if (!res) {
10087
throw new Error(SIGNUP_ERROR_MESSAGES.others);
10188
}
@@ -132,48 +119,40 @@ export default class NewSignupController extends Controller {
132119
else this.isButtonDisabled = true;
133120
}
134121

135-
@action handleCheckboxInputChange(key, value) {
136-
set(this.signupDetails.roles, key, value);
137-
if (Object.values(this.signupDetails.roles).includes(true)) {
138-
this.isButtonDisabled = false;
139-
} else {
140-
this.isButtonDisabled = true;
141-
}
122+
@action handleRoleSelection(selectedRole) {
123+
this.signupDetails.role = selectedRole;
124+
this.isButtonDisabled = !selectedRole;
142125
}
143126

144127
@action async signup() {
145128
try {
146129
let username;
130+
const { firstName, lastName, role } = this.signupDetails;
147131
this.isLoading = true;
148-
if (!this.isDevMode)
149-
username = await this.generateUsername(
150-
this.signupDetails.firstName,
151-
this.signupDetails.lastName,
152-
);
153-
const signupDetails = {
154-
first_name: this.signupDetails.firstName,
155-
last_name: this.signupDetails.lastName,
156-
username: this.isDevMode ? this.signupDetails.username : username,
157-
};
158-
const roles = {};
159-
Object.entries(this.signupDetails.roles).forEach(([key, value]) => {
160-
if (value === true) {
161-
roles[key] = value;
162-
}
163-
});
164132

165-
const isUsernameAvailable = await this.checkUserName(
166-
signupDetails.username,
167-
);
168-
if (!isUsernameAvailable) {
169-
this.isLoading = false;
170-
this.isButtonDisabled = false;
171-
return (this.error = SIGNUP_ERROR_MESSAGES.userName);
133+
if (!this.isDevMode) {
134+
username = await this.generateUsername(firstName, lastName);
135+
136+
const isUsernameAvailable = await this.checkUserName(username);
137+
138+
if (!isUsernameAvailable) {
139+
this.isLoading = false;
140+
this.isButtonDisabled = false;
141+
return (this.error = SIGNUP_ERROR_MESSAGES.userName);
142+
}
172143
}
173144

174-
const res = this.isDevMode
175-
? await this.newRegisterUser(signupDetails, roles)
176-
: await this.registerUser(signupDetails);
145+
const basePayload = {
146+
first_name: firstName,
147+
last_name: lastName,
148+
};
149+
150+
const signupDetails = this.isDevMode
151+
? { ...basePayload, role }
152+
: { ...basePayload, username };
153+
154+
const res = await this.registerUser(signupDetails, this.isDevMode);
155+
177156
if (res?.status === 204) {
178157
this.currentStep = this.LAST_STEP;
179158
} else {

‎app/styles/new-signup.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.user-details__container {
22
margin: 0;
33
padding: 0;
4+
padding-block: 1rem;
45
display: flex;
56
flex-direction: column;
67
width: 100%;

‎app/templates/new-signup.hbs‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,11 @@
3030
@error={{this.error}}
3131
/>
3232
{{else if (and this.isDevMode (eq step this.FOURTH_STEP))}}
33-
<NewSignup::Input
34-
@onClick={{fn this.changeStep this.FIFTH_STEP}}
35-
@dev={{this.isDevMode}}
36-
@currentStep={{step}}
37-
@onChange={{this.handleInputChange}}
38-
@isButtonDisabled={{this.isButtonDisabled}}
39-
@isLoading={{this.isLoading}}
40-
@error={{this.error}}
41-
/>
42-
{{else if (and this.isDevMode (eq step this.FIFTH_STEP))}}
4333
<NewSignup::Checkbox
4434
@onClick={{this.register}}
4535
@dev={{this.isDevMode}}
4636
@currentStep={{step}}
47-
@onChange={{this.handleCheckboxInputChange}}
37+
@onChange={{this.handleRoleSelection}}
4838
@isButtonDisabled={{this.isButtonDisabled}}
4939
@isLoading={{this.isLoading}}
5040
@error={{this.error}}

‎tests/integration/components/new-signup/checkbox-test.js‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ module('Integration | Component | new-signup/checkbox', function (hooks) {
1212

1313
this.setProperties({
1414
onClick: function () {
15-
this.currentStep = NEW_SIGNUP_STEPS[5];
15+
this.currentStep = NEW_SIGNUP_STEPS[3];
1616
},
1717
currentStep: 'role',
1818
isDevMode: true,
@@ -32,7 +32,7 @@ module('Integration | Component | new-signup/checkbox', function (hooks) {
3232
assert.expect(2);
3333
this.setProperties({
3434
onClick: function () {
35-
this.currentStep = NEW_SIGNUP_STEPS[5];
35+
this.currentStep = NEW_SIGNUP_STEPS[3];
3636
},
3737
currentStep: 'role',
3838
isDevMode: true,
@@ -50,7 +50,7 @@ module('Integration | Component | new-signup/checkbox', function (hooks) {
5050
});
5151

5252
test('render label and checkbox (under dev flag)', async function (assert) {
53-
assert.expect(10);
53+
assert.expect(16);
5454

5555
this.setProperties({
5656
onClick: function () {
@@ -67,36 +67,46 @@ module('Integration | Component | new-signup/checkbox', function (hooks) {
6767
@dev={{this.isDevMode}}
6868
/>`);
6969

70-
assert.dom('[data-test-checkbox-label]').exists({ count: 4 });
71-
assert.dom('[data-test-checkbox-input]').exists({ count: 4 });
70+
assert.dom('[data-test-checkbox-label]').exists({ count: 7 });
71+
assert.dom('[data-test-checkbox-input]').exists({ count: 7 });
7272

7373
assert.dom('[data-test-checkbox-input="developer"]').isNotChecked();
7474
assert.dom('[data-test-checkbox-input="designer"]').isNotChecked();
75+
assert.dom('[data-test-checkbox-input="project_manager"]').isNotChecked();
7576
assert.dom('[data-test-checkbox-input="maven"]').isNotChecked();
76-
assert.dom('[data-test-checkbox-input="productmanager"]').isNotChecked();
77+
assert.dom('[data-test-checkbox-input="product_manager"]').isNotChecked();
78+
assert.dom('[data-test-checkbox-input="qa"]').isNotChecked();
79+
assert.dom('[data-test-checkbox-input="social_media"]').isNotChecked();
7780

7881
assert.dom('[data-test-checkbox-label="developer"]').hasText('Developer');
7982
assert.dom('[data-test-checkbox-label="designer"]').hasText('Designer');
8083
assert.dom('[data-test-checkbox-label="maven"]').hasText('Maven');
8184
assert
82-
.dom('[data-test-checkbox-label="productmanager"]')
85+
.dom('[data-test-checkbox-label="product_manager"]')
8386
.hasText('Product Manager');
87+
assert
88+
.dom('[data-test-checkbox-label="project_manager"]')
89+
.hasText('Project Manager');
90+
assert.dom('[data-test-checkbox-label="qa"]').hasText('QA');
91+
assert
92+
.dom('[data-test-checkbox-label="social_media"]')
93+
.hasText('Social Media');
8494
});
8595

8696
test('checkbox is checked after the click (under dev flag)', async function (assert) {
8797
assert.expect(4);
8898

8999
this.setProperties({
90100
onClick: function () {
91-
this.currentStep = NEW_SIGNUP_STEPS[5];
101+
this.currentStep = NEW_SIGNUP_STEPS[3];
92102
},
93103
currentStep: 'role',
94104
isDevMode: true,
95105
});
96106

97-
this.set('onChange', function (roleKey, value) {
107+
this.set('onChange', function (selectedRole, value) {
98108
assert.strictEqual(
99-
roleKey,
109+
selectedRole,
100110
'developer',
101111
'onChange action called with correct roleKey',
102112
);

‎tests/integration/components/profile/upload-image-test.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,12 +77,9 @@ module('Integration | Component | image uploader', function (hooks) {
7777
dataTransfer,
7878
});
7979
await waitFor('p.message-text__failure');
80-
8180
assert
8281
.dom('p.message-text__failure')
83-
.hasText(
84-
'Error occured, please try again and if the issue still exists contact administrator and create a issue on the repo with logs',
85-
);
82+
.exists('Error message is shown for invalid file type');
8683
});
8784

8885
test('it renders crop UI when an image is selected', async function (assert) {

0 commit comments

Comments
 (0)