Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Email Settings: add "valid email" and "verified email" status #7083

Merged
merged 8 commits into from
May 31, 2024
Merged

Email Settings: add "valid email" and "verified email" status #7083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3bd8a3b
Add isEmailValid and isEmailVerified variables
shaunanoordin Apr 23, 2024
2493aa7
Email Settings: add messages for valid/invalid/verified/unverified email
shaunanoordin Apr 23, 2024
b6d9d5e
Webpack Dev Server: disable error overlays
shaunanoordin Apr 24, 2024
360aa9a
Email Settings: add requestConfirmationEmail link. Refactor for reada…
shaunanoordin Apr 24, 2024
bc7baae
Email Settings: remove test code, fix 'send email' link
shaunanoordin Apr 24, 2024
62e9206
Email Settings: remove link to resend confirmation email
shaunanoordin Apr 24, 2024
583c957
Webpack Dev Server: reinstate overlay
shaunanoordin Apr 24, 2024
6125950
Accessibility update
shaunanoordin May 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion app/locales/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,13 @@ export default {
manual: 'Manage projects individually',
beta: 'Get beta project email updates and become a beta tester',
partnerPreferences: 'Zooniverse partner email preferences',
nasa: 'Get periodic email updates from NASA regarding broader NASA citizen science projects and efforts'
nasa: 'Get periodic email updates from NASA regarding broader NASA citizen science projects and efforts',
emailValid: 'Valid email',
emailInvalid: 'Verified email',
emailInvalidPrompt: 'Please re-enter your email above',
emailVerified: 'Verified email',
emailUnverified: 'Unverified email',
emailUnverifiedPrompt: 'Resend confirmation email'
},
talk: {
section: 'Talk email preferences',
Expand Down
58 changes: 54 additions & 4 deletions app/pages/settings/email.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,8 @@ Pagination.defaultProps = {
page: 1
};

const FAUX_PARAGRAPH_STYLE = { margin: '1em 0' };

class EmailSettingsPage extends React.Component {
constructor(props) {
super(props);
Expand All @@ -151,6 +153,7 @@ class EmailSettingsPage extends React.Component {
};
this.handleProjectPreferenceChange = this.handleProjectPreferenceChange.bind(this);
this.handleTalkPreferenceChange = this.handleTalkPreferenceChange.bind(this);
this.requestConfirmationEmail = this.requestConfirmationEmail.bind(this);
this.getProjectForPreferences(props.user);
this.getTalkPreferences();
}
Expand Down Expand Up @@ -197,6 +200,10 @@ class EmailSettingsPage extends React.Component {
});
}

requestConfirmationEmail() {
console.log('+++ Send confirmation email!')
}

handleProjectPreferenceChange(index, event) {
const { projectPreferences } = this.state;
projectPreferences[index].update({
Expand Down Expand Up @@ -235,23 +242,66 @@ class EmailSettingsPage extends React.Component {
}

render() {
const isEmailValid = !!this.props.user?.valid_email;
const isEmailVerfied = !!this.props.user?.confirmed_at;

return (
<div className="content-container">
<p>
<div style={FAUX_PARAGRAPH_STYLE}>
<AutoSave resource={this.props.user}>
<span className="form-label">
<label
className="form-label"
htmlFor="user-email"
>
<Translate content="emailSettings.email" />
</span>
</label>
<br />
<input
type="text"
aria-describedby="user-email-valid,user-email-verified"
autoComplete="email"
className="standard-input full"
id="user-email"
name="email"
value={this.props.user.email}
onChange={handleInputChange.bind(this.props.user)}
/>
shaunanoordin marked this conversation as resolved.
Show resolved Hide resolved
</AutoSave>
</p>
<div>
shaunanoordin marked this conversation as resolved.
Show resolved Hide resolved
{(isEmailValid)
? <div id="user-email-valid">
<i className='fa fa-check-circle' style={{ color: '#51db72' }} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This icon will be missed by a screen reader. As an aside, icon fonts aren’t really used in web development any more, because they can cause accessibility problems.

{' '}
<Translate content="emailSettings.general.emailValid" />
shaunanoordin marked this conversation as resolved.
Show resolved Hide resolved
</div>
: <div id="user-email-valid">
<i className='fa fa-times-circle' style={{ color: '#e35950' }} />
{' '}
<Translate content="emailSettings.general.emailInvalid" />
{' | '}
<Translate content="emailSettings.general.emailInvalidPrompt" />
</div>
}
{(isEmailVerfied)
? <div id="user-email-verified">
<i className='fa fa-check-circle' style={{ color: '#51db72' }} />
{' '}
<Translate content="emailSettings.general.emailVerified" />
</div>
: <div id="user-email-verified">
<i className='fa fa-times-circle' style={{ color: '#e35950' }} />
{' '}
<Translate content="emailSettings.general.emailUnverified" />
{/*
{' | '}
<a href="#" onClick={this.requestConfirmationEmail}>
<Translate content="emailSettings.general.emailUnverifiedPrompt" />
</a>
*/}
</div>
}
</div>
</div>
<p>
<strong>
<Translate content="emailSettings.general.section" />
Expand Down
Loading