Skip to content

Commit

Permalink
Updates log in and sign up styling in Electron app (#1459)
Browse files Browse the repository at this point in the history
  • Loading branch information
@belcherj
belcherj authored Jul 31, 2019
1 parent 8580765 commit 2850e40
Show file tree
Hide file tree
Showing 3 changed files with 216 additions and 234 deletions.
34 changes: 21 additions & 13 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
# Changelog

## Future Release

- Updated Log in and Sign up form to match current styling

## [v1.6.0](https://github.com/Automattic/simplenote-electron/releases/tag/v1.6.0) (2019-07-01)

### Features

- Add custom tooltips to toolbar buttons [#1214](https://github.com/Automattic/simplenote-electron/pull/1214)
- Improve search performance on long notes [#1218](https://github.com/Automattic/simplenote-electron/pull/1218)

Expand Down Expand Up @@ -83,7 +88,7 @@
- When copying a note, ensure that the raw text is copied to the clipboard instead of rich text [#1155](https://github.com/Automattic/simplenote-electron/pull/1155)
- Fix line break behavior in the Markdown preview to match common Markdown implementations, as well as the other Simplenote apps [#1169](https://github.com/Automattic/simplenote-electron/pull/1169)
- Fix CJK-related crashes after a tab character [#1171](https://github.com/Automattic/simplenote-electron/pull/1171)
- Various security and under-the-hood improvements
- Various security and under-the-hood improvements

## [v1.3.4](https://github.com/Automattic/simplenote-electron/releases/tag/v1.3.4) (2018-12-18)

Expand All @@ -105,9 +110,11 @@
## [v1.3.2](https://github.com/Automattic/simplenote-electron/releases/tag/v1.3.2) (2018-12-05)

### Enhancements

- Add support for sorting the tags list [#1042](https://github.com/Automattic/simplenote-electron/pull/1042)

### Fixes

- Add `:focus` outline to dropzone [#989](https://github.com/Automattic/simplenote-electron/pull/989)
- Fix tag entry in Chinese, Japanese, and Korean [#999](https://github.com/Automattic/simplenote-electron/pull/999)
- Make tag entry and removal smoother [#1000](https://github.com/Automattic/simplenote-electron/pull/1000)
Expand Down Expand Up @@ -164,20 +171,23 @@ This is a rebuild of the faulty packages released as [v1.2.0](https://github.com
_Update: There was a problem somewhere in the automated build system, and these packages will not work on Windows or Ubuntu. Please use the rebuilt packages from [v1.2.1](https://github.com/Automattic/simplenote-electron/releases/tag/v1.2.1)_

### New features
* [Focus Mode](https://github.com/Automattic/simplenote-electron/pull/881) to hide the note list pane. This can be toggled from the sidebar button, View menu, or shortcut ⌘⇧F.
* [Line Length](https://github.com/Automattic/simplenote-electron/pull/815) setting to wrap the note content to Full or Narrow widths.
* [Spell checker](https://github.com/Automattic/simplenote-electron/pull/821) (can be [toggled](https://github.com/Automattic/simplenote-electron/pull/872) on/off).

- [Focus Mode](https://github.com/Automattic/simplenote-electron/pull/881) to hide the note list pane. This can be toggled from the sidebar button, View menu, or shortcut ⌘⇧F.
- [Line Length](https://github.com/Automattic/simplenote-electron/pull/815) setting to wrap the note content to Full or Narrow widths.
- [Spell checker](https://github.com/Automattic/simplenote-electron/pull/821) (can be [toggled](https://github.com/Automattic/simplenote-electron/pull/872) on/off).

### Enhancements
* New user setting to [opt out](https://github.com/Automattic/simplenote-electron/pull/867) of analytics sharing.
* When exporting notes (File menu ▸ Export Notes), the Date Modified of each note file in the zip will reflect the [last modified date](https://github.com/Automattic/simplenote-electron/pull/826) of the note (props to @ianmorti).
* “Font Size” is renamed “Zoom” to match standard convention, and is now more discoverable at the [root level of the View menu](https://github.com/Automattic/simplenote-electron/pull/863) (props to @gie3d).
* The modification date will now [be updated](https://github.com/Automattic/simplenote-electron/pull/889) when adding or removing note tags (props to @hanhmchau).
* [Web] The [tag drawer will close](https://github.com/Automattic/simplenote-electron/issues/146) after opening the Settings dialog.

- New user setting to [opt out](https://github.com/Automattic/simplenote-electron/pull/867) of analytics sharing.
- When exporting notes (File menu ▸ Export Notes), the Date Modified of each note file in the zip will reflect the [last modified date](https://github.com/Automattic/simplenote-electron/pull/826) of the note (props to @ianmorti).
- “Font Size” is renamed “Zoom” to match standard convention, and is now more discoverable at the [root level of the View menu](https://github.com/Automattic/simplenote-electron/pull/863) (props to @gie3d).
- The modification date will now [be updated](https://github.com/Automattic/simplenote-electron/pull/889) when adding or removing note tags (props to @hanhmchau).
- [Web] The [tag drawer will close](https://github.com/Automattic/simplenote-electron/issues/146) after opening the Settings dialog.

### Fixes
* [Mac] “Bring All to Front” is now in the [correct menu](https://github.com/Automattic/simplenote-electron/pull/813).
* Various security fixes.

- [Mac] “Bring All to Front” is now in the [correct menu](https://github.com/Automattic/simplenote-electron/pull/813).
- Various security fixes.

## [v1.1.7](https://github.com/Automattic/simplenote-electron/releases/tag/v1.1.7) (2018-08-17)

Expand Down Expand Up @@ -246,7 +256,6 @@ Bug fixes, including:
- Replace value link in tag list for controlled state changes [@dmsnell](https://github.com/dmsnell).
- Fix access to wrong variable name [@nfcampos](https://github.com/nfcampos).


## [v1.0.4](https://github.com/Automattic/simplenote-electron/releases/tag/v1.0.4) (2016-10-12)

- Replaced textarea-based note editor with Draft.js [@nfcampos](https://github.com/nfcampos)
Expand Down Expand Up @@ -277,7 +286,6 @@ Bug fixes.
- Better exception management.
- Design updates.


## [v1.0.0](https://github.com/Automattic/simplenote-electron/releases/tag/v1.0.0) (2016-03-30)

Simplenote Desktop
Expand Down
210 changes: 103 additions & 107 deletions lib/auth/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { get } from 'lodash';
import getConfig from '../../get-config';
import SimplenoteLogo from '../icons/simplenote';
import Spinner from '../components/spinner';
import WordPressLogo from '../icons/wordpress';

import { hasInvalidCredentials, hasLoginError } from '../state/auth/selectors';
import { reset } from '../state/auth/actions';
import { setWPToken } from '../state/settings/actions';

export class Auth extends Component {
Expand All @@ -23,6 +23,7 @@ export class Auth extends Component {
isMacApp: PropTypes.bool,
onAuthenticate: PropTypes.func.isRequired,
onCreateUser: PropTypes.func.isRequired,
resetErrors: PropTypes.func.isRequired,
saveWPToken: PropTypes.func.isRequired,
};

Expand Down Expand Up @@ -59,67 +60,18 @@ export class Auth extends Component {
: "Don't have an account?";
const errorMessage = isCreatingAccount
? 'Could not create account. Please try again.'
: 'Login failed. Please try again.';
: 'Could not sign in with the provided email address and password.';

return (
<div className="login">
{isMacApp && <div className="login__draggable-area" />}
<SimplenoteLogo />
<form className="login__form" onSubmit={this.onLogin}>
<div className="login__logo">
<SimplenoteLogo />
</div>
<div className="login__fields theme-color-border theme-color-fg">
<label
className="login__field theme-color-border"
htmlFor="login__field-username"
>
<span className="login__field-label">Email</span>
<span className="login__field-control">
<input
ref={ref => (this.usernameInput = ref)}
id="login__field-username"
type="email"
onKeyDown={this.onLogin}
spellCheck={false}
/>
</span>
</label>
<label
className="login__field theme-color-border"
htmlFor="login__field-password"
>
<span className="login__field-label">Password</span>
<span className="login__field-control">
<input
ref={ref => (this.passwordInput = ref)}
id="login__field-password"
type="password"
onKeyDown={this.onLogin}
spellCheck={false}
/>
</span>
</label>
{isCreatingAccount && (
<label
className="login__field theme-color-border"
htmlFor="login__field-password-confirm"
>
<span className="login__field-label">Confirm Password</span>
<span className="login__field-control">
<input
ref={ref => (this.passwordConfirmInput = ref)}
id="login__field-password-confirm"
type="password"
onKeyDown={this.onSignUp}
spellCheck={false}
/>
</span>
</label>
)}
</div>
<h1>{buttonLabel}</h1>

{this.props.hasInvalidCredentials && (
<p className="login__auth-message is-error">
The credentials you entered don&apos;t match
Could not sign in with the provided email address and password.
</p>
)}
{this.props.hasLoginError && (
Expand All @@ -130,66 +82,111 @@ export class Auth extends Component {
{passwordErrorMessage}
</p>
)}
<div className="login__actions">
<button
className={submitClasses}
onClick={isCreatingAccount ? this.onSignUp : this.onLogin}
type="submit"
<label
className="login__field theme-color-border"
htmlFor="login__field-username"
>
Email
</label>
<input
id="login__field-username"
onKeyDown={this.onInput}
placeholder="Email"
ref={ref => (this.usernameInput = ref)}
spellCheck={false}
type="email"
/>
<label
className="login__field theme-color-border"
htmlFor="login__field-password"
>
Password
</label>
<input
id="login__field-password"
onKeyDown={this.onInput}
placeholder="Password"
ref={ref => (this.passwordInput = ref)}
spellCheck={false}
type="password"
/>

<button
className={submitClasses}
onClick={isCreatingAccount ? this.onSignUp : this.onLogin}
type="submit"
>
{this.props.authPending ? (
<Spinner isWhite={true} size={20} thickness={5} />
) : (
buttonLabel
)}
</button>

{!isCreatingAccount && (
<a
className="login__forgot"
href="https://app.simplenote.com/forgot/"
target="_blank"
rel="noopener noreferrer"
onClick={this.onForgot}
>
{this.props.authPending ? (
<Spinner isWhite={true} size={20} thickness={5} />
) : (
buttonLabel
)}
</button>
<p className="login__forgot">
<a
href="https://app.simplenote.com/forgot/"
target="_blank"
rel="noopener noreferrer"
onClick={this.onForgot}
>
Forgot your password?
</a>
</p>
<p className="login__signup">
{helpMessage}{' '}
<a href="#" onClick={this.toggleSignUp}>
{helpLinkLabel}
</a>
</p>
</div>
{isElectron && (
Forgot your password?
</a>
)}
{isElectron && !isCreatingAccount && (
<Fragment>
<div className="login__or">or:</div>
<div className="login__btn-wpcom">
<button
className="button button-borderless"
onClick={this.onWPLogin}
>
<span className="login__btn-wpcom-icon">
<WordPressLogo />
</span>
Log in with WordPress.com
</button>
</div>
<span className="or">Or</span>
<span className="or-line"></span>
<button className="wpcc-button" onClick={this.onWPLogin}>
{buttonLabel} with WordPress.com
</button>
</Fragment>
)}
{isCreatingAccount && (
<div className="terms">
By creating an account you agree to our
<a href="http://simplenote.com/terms/">Terms of Service</a>.
</div>
)}
<p className="login__signup">
{helpMessage}{' '}
<a href="#" onClick={this.toggleSignUp}>
{helpLinkLabel}
</a>
</p>
</form>
</div>
);
}

onLogin = event => {
onInput = event => {
if (event.type === 'keydown' && event.keyCode !== 13) {
this.props.resetErrors();
this.setState({
passwordErrorMessage: '',
});
return;
}
};

onLogin = event => {
event.preventDefault();

const username = get(this.usernameInput, 'value');
const password = get(this.passwordInput, 'value');

if (!(username && password)) {
this.setState({
passwordErrorMessage: 'Please fill out email and password.',
});
return;
}

if (password.length < 4) {
this.setState({
passwordErrorMessage: 'Passwords must contain at least 4 characters.',
});
return;
}

Expand Down Expand Up @@ -309,21 +306,15 @@ export class Auth extends Component {
};

onSignUp = event => {
if (event.type === 'keydown' && event.keyCode !== 13) {
return;
}
event.preventDefault();

const username = get(this.usernameInput, 'value');
const password = get(this.passwordInput, 'value');
const passwordConfirm = get(this.passwordConfirmInput, 'value');

if (!(username && password && passwordConfirm)) {
return;
}

if (password !== passwordConfirm) {
this.setState({ passwordErrorMessage: "The passwords don't match." });
if (!(username && password)) {
this.setState({
passwordErrorMessage: 'Please fill out email and password.',
});
return;
}

Expand All @@ -340,11 +331,16 @@ export class Auth extends Component {

toggleSignUp = event => {
event.preventDefault();
this.props.resetErrors();
this.setState({
passwordErrorMessage: '',
});
this.setState({ isCreatingAccount: !this.state.isCreatingAccount });
};
}

const mapDispatchToProps = dispatch => ({
resetErrors: () => dispatch(reset()),
saveWPToken: token => dispatch(setWPToken(token)),
});

Expand Down
Loading

0 comments on commit 2850e40

Please sign in to comment.