Skip to content

Commit b1c2fcb

Browse files
pix-service-auto-mergepix-service-auto-merge
authored
[CLEANUP] Glimmerizer SignupForm (PIX-2452).
2 parents 37462fd + 128f2c2 commit b1c2fcb

File tree

4 files changed

+166
-172
lines changed

4 files changed

+166
-172
lines changed

‎mon-pix/app/components/signup-form.js

+105-123
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
/* eslint ember/no-actions-hash: 0 */
2-
/* eslint ember/no-classic-classes: 0 */
3-
/* eslint ember/no-classic-components: 0 */
4-
/* eslint ember/require-tagless-components: 0 */
5-
1+
import Component from '@glimmer/component';
2+
import { action } from '@ember/object';
63
import { inject as service } from '@ember/service';
7-
import Component from '@ember/component';
4+
import { tracked } from '@glimmer/tracking';
85
import get from 'lodash/get';
9-
import isEmailValid from 'mon-pix/utils/email-validator';
6+
import isEmailValid from '../utils/email-validator';
107
import isPasswordValid from '../utils/password-validator';
118
import ENV from 'mon-pix/config/environment';
129

@@ -17,156 +14,141 @@ const ERROR_INPUT_MESSAGE_MAP = {
1714
password: 'pages.sign-up.fields.password.error',
1815
};
1916

20-
export default Component.extend({
21-
22-
session: service(),
23-
intl: service(),
24-
url: service(),
25-
26-
_notificationMessage: null,
27-
validation: null,
28-
_tokenHasBeenUsed: null,
29-
isLoading: false,
30-
errorMessage: null,
31-
32-
init() {
33-
this._super(...arguments);
34-
this._resetValidationFields();
35-
},
17+
class SignupFormValidation {
18+
lastName = {
19+
@tracked status: 'default',
20+
@tracked message: null,
21+
}
22+
firstName = {
23+
@tracked status: 'default',
24+
@tracked message: null,
25+
}
26+
email = {
27+
@tracked status: 'default',
28+
@tracked message: null,
29+
}
30+
password = {
31+
@tracked status: 'default',
32+
@tracked message: null,
33+
}
34+
cgu = {
35+
@tracked status: 'default',
36+
@tracked message: null,
37+
}
38+
}
39+
40+
export default class SignupForm extends Component {
41+
@service session;
42+
@service intl;
43+
@service url;
44+
45+
@tracked errorMessage = null;
46+
@tracked isLoading = false;
47+
@tracked notificationMessage = null;
48+
@tracked validation = new SignupFormValidation();
49+
_tokenHasBeenUsed = null;
3650

3751
get homeUrl() {
3852
return this.url.homeUrl;
39-
},
53+
}
4054

4155
get cguUrl() {
4256
return this.url.cguUrl;
43-
},
57+
}
4458

4559
_getErrorMessage(status, key) {
4660
return (status === 'error') ? this.intl.t(ERROR_INPUT_MESSAGE_MAP[key]) : null;
47-
},
61+
}
4862

4963
_getValidationStatus(isValidField) {
5064
return (isValidField) ? 'error' : 'success';
51-
},
65+
}
5266

5367
_isValuePresent(value) {
5468
return value.trim() ? true : false;
55-
},
69+
}
5670

5771
_updateValidationStatus(key, status, message) {
58-
const statusObject = 'validation.' + key + '.status';
59-
const messageObject = 'validation.' + key + '.message';
60-
this.set(statusObject, status);
61-
this.set(messageObject, message);
62-
},
63-
64-
_getModelAttributeValueFromKey(key) {
65-
const userModel = this.user;
66-
return userModel.get(key);
67-
},
68-
69-
_resetValidationFields() {
70-
const defaultValidationObject = {
71-
lastName: {
72-
status: 'default',
73-
message: null,
74-
},
75-
firstName: {
76-
status: 'default',
77-
message: null,
78-
},
79-
email: {
80-
status: 'default',
81-
message: null,
82-
},
83-
password: {
84-
status: 'default',
85-
message: null,
86-
},
87-
cgu: {
88-
status: 'default',
89-
message: null,
90-
},
91-
};
92-
93-
this.set('validation', defaultValidationObject);
94-
},
72+
this.validation[key].status = status;
73+
this.validation[key].message = message;
74+
}
9575

9676
_updateInputsStatus() {
97-
const errors = this.user.errors;
77+
const errors = this.args.user.errors;
9878
errors.forEach(({ attribute, message }) => {
9979
this._updateValidationStatus(attribute, 'error', message);
10080
});
101-
},
81+
}
10282

10383
_executeFieldValidation(key, isValid) {
104-
const modelAttrValue = this._getModelAttributeValueFromKey(key);
84+
const modelAttrValue = this.args.user[key];
10585
const isValidInput = !isValid(modelAttrValue);
10686
const status = this._getValidationStatus(isValidInput);
10787
const message = this._getErrorMessage(status, key);
10888
this._updateValidationStatus(key, status, message);
109-
},
89+
}
11090

11191
_trimNamesAndEmailOfUser() {
112-
const { firstName, lastName, email } = this.user;
113-
this.set('user.firstName', firstName.trim());
114-
this.set('user.lastName', lastName.trim());
115-
this.set('user.email', email.trim());
116-
},
117-
118-
actions: {
119-
120-
resetTokenHasBeenUsed() {
121-
this.set('_tokenHasBeenUsed', false);
122-
},
123-
124-
validateInput(key) {
125-
this._executeFieldValidation(key, this._isValuePresent);
126-
},
127-
128-
validateInputEmail(key) {
129-
this._executeFieldValidation(key, isEmailValid);
130-
},
131-
132-
validateInputPassword(key) {
133-
this._executeFieldValidation(key, isPasswordValid);
134-
},
135-
136-
signup() {
137-
this.set('_notificationMessage', null);
138-
this.set('isLoading', true);
139-
140-
this._trimNamesAndEmailOfUser();
141-
this.set('user.lang', this.intl.t('current-lang'));
142-
143-
const campaignCode = get(this.session, 'attemptedTransition.from.parent.params.code');
144-
this.user.save({ adapterOptions: { campaignCode } }).then(() => {
145-
const credentials = { login: this.user.email, password: this.user.password };
146-
this.authenticateUser(credentials);
147-
this.set('_tokenHasBeenUsed', true);
148-
this.set('user.password', null);
149-
}).catch((response) => {
150-
const error = get(response, 'errors[0]');
151-
if (error) {
152-
this._manageErrorsApi(error);
153-
}
154-
else {
155-
this.set('errorMessage', this.intl.t(ENV.APP.API_ERROR_MESSAGES.INTERNAL_SERVER_ERROR.MESSAGE));
156-
}
157-
this.set('_tokenHasBeenUsed', true);
158-
this.set('isLoading', false);
159-
});
160-
},
161-
},
92+
const { firstName, lastName, email } = this.args.user;
93+
this.args.user.firstName = firstName.trim();
94+
this.args.user.lastName = lastName.trim();
95+
this.args.user.email = email.trim();
96+
}
97+
98+
@action
99+
resetTokenHasBeenUsed() {
100+
this._tokenHasBeenUsed = false;
101+
}
102+
103+
@action
104+
validateInput(key) {
105+
this._executeFieldValidation(key, this._isValuePresent);
106+
}
107+
108+
@action
109+
validateInputEmail(key) {
110+
this._executeFieldValidation(key, isEmailValid);
111+
}
112+
113+
@action
114+
validateInputPassword(key) {
115+
this._executeFieldValidation(key, isPasswordValid);
116+
}
117+
118+
@action
119+
signup(event) {
120+
event && event.preventDefault();
121+
this.notificationMessage = null;
122+
this.isLoading = true;
123+
124+
this._trimNamesAndEmailOfUser();
125+
this.args.user.lang = this.intl.t('current-lang');
126+
127+
const campaignCode = get(this.session, 'attemptedTransition.from.parent.params.code');
128+
this.args.user.save({ adapterOptions: { campaignCode } }).then(() => {
129+
const credentials = { login: this.args.user.email, password: this.args.user.password };
130+
this.args.authenticateUser(credentials);
131+
this._tokenHasBeenUsed = true;
132+
this.args.user.password = null;
133+
}).catch((response) => {
134+
const error = get(response, 'errors[0]');
135+
if (error) {
136+
this._manageErrorsApi(error);
137+
} else {
138+
this.errorMessage = this.intl.t(ENV.APP.API_ERROR_MESSAGES.INTERNAL_SERVER_ERROR.MESSAGE);
139+
}
140+
this._tokenHasBeenUsed = true;
141+
this.isLoading = false;
142+
});
143+
}
162144

163145
_manageErrorsApi(firstError) {
164146
const statusCode = get(firstError, 'status');
165147
if (statusCode === '422') {
166148
return this._updateInputsStatus();
167149
}
168-
this.set('errorMessage', this._showErrorMessages(statusCode));
169-
},
150+
this.errorMessage = this._showErrorMessages(statusCode);
151+
}
170152

171153
_showErrorMessages(statusCode) {
172154
const httpStatusCodeMessages = {
@@ -177,5 +159,5 @@ export default Component.extend({
177159
'default': ENV.APP.API_ERROR_MESSAGES.INTERNAL_SERVER_ERROR.MESSAGE,
178160
};
179161
return this.intl.t(httpStatusCodeMessages[statusCode] || httpStatusCodeMessages['default']);
180-
},
181-
});
162+
}
163+
}

‎mon-pix/app/templates/components/signup-form.hbs

+30-30
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
{{!-- template-lint-disable no-implicit-this no-action no-curly-component-invocation --}}
21
<main class="sign-form__container">
3-
4-
<a href={{homeUrl}} class="pix-logo__link">
5-
<img class="pix-logo__image" src="{{rootURL}}/images/pix-logo.svg" alt="{{t 'navigation.homepage'}}">
2+
<a href={{this.homeUrl}} class="pix-logo__link">
3+
<img class="pix-logo__image" src="{{@rootURL}}/images/pix-logo.svg" alt="{{t 'navigation.homepage'}}">
64
</a>
75

86
<div class="sign-form__header">
@@ -19,68 +17,70 @@
1917
</div>
2018
{{/if}}
2119

22-
{{#if _notificationMessage}}
20+
{{#if this.notificationMessage}}
2321
<div class="sign-form__notification-message sign-form__notification-message--success" aria-live="polite">
24-
{{_notificationMessage}}
22+
{{this.notificationMessage}}
2523
</div>
2624
{{/if}}
2725

28-
<form {{action "signup" on="submit"}} class="sign-form__body">
26+
<form {{on "submit" this.signup}} class="sign-form__body">
2927
<span class="sign-form-body__instruction">{{t 'common.form.mandatory-fields' htmlSafe=true}}</span>
3028

3129
<div class="sign-form-body__input">
3230
<FormTextfield @label="{{t 'pages.sign-up.fields.firstname.label'}}"
3331
@textfieldName="firstName"
34-
@inputBindingValue={{user.firstName}}
35-
@onValidate={{action "validateInput"}}
36-
@validationStatus={{validation.firstName.status}}
37-
@validationMessage={{validation.firstName.message}}
32+
@inputBindingValue={{@user.firstName}}
33+
@onValidate={{this.validateInput}}
34+
@validationStatus={{this.validation.firstName.status}}
35+
@validationMessage={{this.validation.firstName.message}}
3836
@autocomplete="given-name"
3937
@require={{true}} />
4038
</div>
4139

4240
<div class="sign-form-body__input">
4341
<FormTextfield @label="{{t 'pages.sign-up.fields.lastname.label'}}"
4442
@textfieldName="lastName"
45-
@inputBindingValue={{user.lastName}}
46-
@onValidate={{action "validateInput"}}
47-
@validationStatus={{validation.lastName.status}}
48-
@validationMessage={{validation.lastName.message}}
49-
@autocomplete="family-name" @require={{true}} />
43+
@inputBindingValue={{@user.lastName}}
44+
@onValidate={{this.validateInput}}
45+
@validationStatus={{this.validation.lastName.status}}
46+
@validationMessage={{this.validation.lastName.message}}
47+
@autocomplete="family-name"
48+
@require={{true}} />
5049
</div>
5150

5251
<div class="sign-form-body__input">
5352
<FormTextfield @label="{{t 'pages.sign-up.fields.email.label'}}"
5453
@help="{{t 'pages.sign-up.fields.email.help'}}"
5554
@textfieldName="email"
56-
@validationStatus={{validation.email.status}}
57-
@onValidate={{action "validateInputEmail"}}
58-
@inputBindingValue={{user.email}}
59-
@validationMessage={{validation.email.message}}
60-
@autocomplete="email" @require={{true}} />
55+
@validationStatus={{this.validation.email.status}}
56+
@onValidate={{this.validateInputEmail}}
57+
@inputBindingValue={{@user.email}}
58+
@validationMessage={{this.validation.email.message}}
59+
@autocomplete="email"
60+
@require={{true}} />
6161
</div>
6262

6363
<div class="sign-form-body__input">
6464
<FormTextfield @label="{{t 'pages.sign-up.fields.password.label'}}"
6565
@help="{{t 'pages.sign-up.fields.password.help'}}"
6666
@textfieldName="password"
67-
@validationStatus={{validation.password.status}}
68-
@onValidate={{action "validateInputPassword"}}
69-
@inputBindingValue={{user.password}}
70-
@validationMessage={{validation.password.message}}
67+
@validationStatus={{this.validation.password.status}}
68+
@onValidate={{this.validateInputPassword}}
69+
@inputBindingValue={{@user.password}}
70+
@validationMessage={{this.validation.password.message}}
7171
@autocomplete="new-password"
7272
@require={{true}} />
7373
</div>
7474

7575
<div class="signup-form__cgu-container">
7676
<label for="pix-cgu" class="signup-form__cgu-label">
7777
<div class="signup-form__cgu">
78-
<Input @type="checkbox" @id="pix-cgu" @checked={{user.cgu}} />
79-
{{t 'pages.sign-up.fields.cgu.label' cguUrl=cguUrl htmlSafe=true}}
80-
<a href={{cguUrl}} class="link" target="_blank" rel="noopener noreferrer"> {{t 'pages.sign-up.fields.cgu.cgu' cguUrl=cguUrl htmlSafe=true}} </a>
78+
<Input @type="checkbox" @id="pix-cgu" @checked={{@user.cgu}} />
79+
{{t 'pages.sign-up.fields.cgu.label' cguUrl=this.cguUrl htmlSafe=true}}
80+
<a href={{this.cguUrl}} class="link" target="_blank" rel="noopener noreferrer"> {{t 'pages.sign-up.fields.cgu.cgu' cguUrl=this.cguUrl htmlSafe=true}} </a>
8181
</div>
8282

83-
{{#if user.errors.cgu}}
83+
{{#if @user.errors.cgu}}
8484
<div class="sign-form__validation-error">
8585
{{t 'pages.sign-up.fields.cgu.error'}}
8686
</div>
@@ -89,7 +89,7 @@
8989
</div>
9090

9191
<div class="sign-form-body__bottom-button">
92-
{{#if isLoading}}
92+
{{#if this.isLoading}}
9393
<button type="button" disabled class="button button--uppercase button--thin button--round button--big">
9494
<span class="loader-in-button">&nbsp;</span>
9595
</button>

0 commit comments

Comments
 (0)