Andal.LND/frontend-app-authn
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: VAN-528 - Fixed email field's suggestion container design issues (#334)

Browse Source 
* VAN-528 - Fixed email field's suggestion container design issues

* VAN-528 - Fixed email field's suggestion container design issues

* VAN-528 - Fixed test

* VAN-528 - removed unused file
This commit is contained in:
Shafqat Farhan
2021-06-11 20:12:21 +05:00
committed by Waheed Ahmed
parent a9da4c6348
commit 6a12e9a56c
4 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/_style.scss
View File

@@ -556,6 +556,7 @@ select.form-control {
.one-rem-font {
font-size: 0.99rem;
color: #707070;
}
@media (max-width: 767px) {
@@ -632,3 +633,15 @@ select.form-control {
.-mt-4 {
margin-top: -1.5rem;
}
.alert .alert-icon {
margin-top: 3px;
}
.alert-dismissible .close {
top: 4px;
font-weight: 500;
:hover {
font-weight: 700;
}
}

23
src/register/RegistrationPage.jsx
View File

@@ -262,30 +262,34 @@ class RegistrationPage extends React.Component {
let suggestedTld = closest(topLevelDomain, DEFAULT_TOP_LEVEL_DOMAINS);
suggestedTld = `${emailLexemes[0]}@${domainLexemes[0]}.${suggestedTld}`;
errors.email = intl.formatMessage(messages['email.invalid.format.error']);
suggestedTld = intl.formatMessage(messages['did.you.mean.alert.text'], { email: suggestedTld });
this.setState({
suggestedTopLevelDomain: suggestedTld,
suggestedTldMessage: intl.formatMessage(messages['did.you.mean.alert.text']),
suggestedServiceLevelDomain: '',
suggestedSldMessage: '',
borderClass: '',
skipEmailValidation: false,
});
break;
} else {
this.setState({ suggestedTopLevelDomain: '' });
this.setState({ suggestedTopLevelDomain: '', suggestedTldMessage: '' });
}
if (DEFAULT_SERVICE_PROVIDER_DOMAINS.indexOf(serviceProvider) < 0) {
let suggestedSld = closest(serviceProvider, DEFAULT_SERVICE_PROVIDER_DOMAINS);
suggestedSld = `${emailLexemes[0]}@${suggestedSld}.${domainLexemes[1]}`;
suggestedSld = intl.formatMessage(messages['did.you.mean.alert.text'], { email: suggestedSld });
errors.email = '';
this.setState({
suggestedServiceLevelDomain: suggestedSld,
suggestedSldMessage: intl.formatMessage(messages['did.you.mean.alert.text']),
borderClass: 'yellow-border',
});
} else {
this.setState({
suggestedServiceLevelDomain: '',
suggestedSldMessage: '',
borderClass: '',
});
}
@@ -342,19 +346,24 @@ class RegistrationPage extends React.Component {
handleOnClose() {
const { errors } = this.state;
errors.email = '';
this.setState({ errors, suggestedTopLevelDomain: '', skipEmailValidation: true });
this.setState({
errors,
suggestedTopLevelDomain: '',
skipEmailValidation: true,
suggestedTldMessage: '',
});
}
renderEmailFeedback() {
if (this.state.suggestedTopLevelDomain) {
return (
<Alert variant="danger" onClose={this.handleOnClose} dismissible className="pb-1 pt-1" icon={Error}>
{this.state.suggestedTopLevelDomain}
<Alert variant="danger" onClose={this.handleOnClose} dismissible className="pb-2 pt-2 mt-2" icon={Error}>
<p className="mb-0">{this.state.suggestedTldMessage}<Alert.Link href="#">{this.state.suggestedTopLevelDomain}</Alert.Link>?</p>
</Alert>
);
}
if (this.state.suggestedServiceLevelDomain) {
return <span className="one-rem-font">{this.state.suggestedServiceLevelDomain}</span>;
return <span className="one-rem-font">{this.state.suggestedSldMessage}<Alert.Link href="#">{this.state.suggestedServiceLevelDomain}</Alert.Link>?</span>;
}
return null;

4
src/register/messages.jsx
View File

@@ -257,8 +257,8 @@ const messages = defineMessages({
},
'did.you.mean.alert.text': {
id: 'did.you.mean.alert.text',
defaultMessage: 'Did you mean: {email}?',
description: 'Did you mean email alert suggestion',
defaultMessage: 'Did you mean: ',
description: 'Did you mean alert suggestion',
},
});

4
src/register/tests/RegistrationPage.test.jsx
View File

@@ -248,10 +248,10 @@ describe('RegistrationPage', () => {
const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
registrationPage.find('input#email').simulate('blur', { target: { value: 'test@gmail.con', name: 'email' } });
expect(registrationPage.find('RegistrationPage').state('suggestedTopLevelDomain')).toEqual('Did you mean: test@gmail.com?');
expect(registrationPage.find('RegistrationPage').state('suggestedTopLevelDomain')).toEqual('test@gmail.com');
registrationPage.find('input#email').simulate('blur', { target: { value: 'test@fmail.com', name: 'email' } });
expect(registrationPage.find('RegistrationPage').state('suggestedServiceLevelDomain')).toEqual('Did you mean: test@gmail.com?');
expect(registrationPage.find('RegistrationPage').state('suggestedServiceLevelDomain')).toEqual('test@gmail.com');
registrationPage.find('input#email').simulate('blur', { target: { value: 'test@hotmail.com', name: 'email' } });
expect(registrationPage.find('RegistrationPage').state('suggestedServiceLevelDomain')).toEqual('');