From 2850e404498373098d946d474d5867666b7ee806 Mon Sep 17 00:00:00 2001 From: Jonathan Belcher Date: Wed, 31 Jul 2019 11:30:25 -0400 Subject: [PATCH] Updates log in and sign up styling in Electron app (#1459) --- CHANGELOG.md | 34 ++++--- lib/auth/index.jsx | 210 ++++++++++++++++++++++---------------------- lib/auth/style.scss | 206 +++++++++++++++++++------------------------ 3 files changed, 216 insertions(+), 234 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2265a7ba5..70c093a49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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) @@ -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) @@ -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) @@ -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) @@ -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) @@ -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 diff --git a/lib/auth/index.jsx b/lib/auth/index.jsx index 041ec2d13..8bcd716c7 100644 --- a/lib/auth/index.jsx +++ b/lib/auth/index.jsx @@ -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 { @@ -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, }; @@ -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 (
{isMacApp &&
} +
-
- -
-
- - - {isCreatingAccount && ( - - )} -
+

{buttonLabel}

+ {this.props.hasInvalidCredentials && (

- The credentials you entered don't match + Could not sign in with the provided email address and password.

)} {this.props.hasLoginError && ( @@ -130,66 +82,111 @@ export class Auth extends Component { {passwordErrorMessage}

)} -
- + + {!isCreatingAccount && ( + - {this.props.authPending ? ( - - ) : ( - buttonLabel - )} - -

- - Forgot your password? - -

-

- {helpMessage}{' '} - - {helpLinkLabel} - -

-
- {isElectron && ( + Forgot your password? + + )} + {isElectron && !isCreatingAccount && ( -
or:
-
- -
+ Or + + )} + {isCreatingAccount && ( +
+ By creating an account you agree to our + Terms of Service. +
+ )} +

+ {helpMessage}{' '} + + {helpLinkLabel} + +

); } - 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; } @@ -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; } @@ -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)), }); diff --git a/lib/auth/style.scss b/lib/auth/style.scss index 3352c3f46..fdd41b9f2 100644 --- a/lib/auth/style.scss +++ b/lib/auth/style.scss @@ -1,3 +1,7 @@ +.ReactModal__Overlay { + z-index: 1000; +} + .login { display: flex; flex: 1 1 auto; @@ -7,145 +11,119 @@ overflow: auto; -webkit-overflow-scrolling: touch; - .login__draggable-area { - -webkit-app-region: drag; - width: 100%; - height: 40px; - top: 0; - left: 0; - position: absolute; + form { + width: 95%; } - .login__form { - max-width: 320px; - margin: 0 auto; - padding: 10px; + h1 { + font-size: 36px; + font-weight: 600; + margin: 0 0 16px; + text-align: center; } - .login__logo { - margin-bottom: 50px; + .login__auth-message.is-error { + color: #be2a31; + font-size: 16px; + margin: 0 auto 16px; + max-width: 347px; text-align: center; - - svg { - border-radius: 50%; - border: 1px solid lighten($gray, 30%); - } + width: 90%; } - .login__fields { - border: 1px solid lighten($gray, 25%); - border-radius: $border-radius; + label { + display: none; } - .login__field { - display: flex; - align-items: center; - padding: 1px; - border-bottom: 1px solid lighten($gray, 30%); - - &:last-child { - border-bottom: none; - } - - .login__field-label { - flex: none; - width: 7.5em; - padding: 8px 12px; - font-size: 13px; - font-weight: $bold; - text-transform: uppercase; - color: $gray; - } - - .login__field-control { - flex: 1 1 auto; - } - - input { - width: 100%; - height: 2em; - line-height: 1.5em; - padding: 0.25em 0.15em; - border: none; - font-size: 143%; - font-weight: $light; - } - - input:focus { - position: relative; - z-index: 1; - outline: none; - } + input, + button[type='submit'] { + background-color: #ffffff; + border: solid 1px #e3e0e2; + border-radius: 4px; + box-sizing: border-box; + display: block; + height: 40px; + padding: 11px 15px; + margin: 8px auto 0; + max-width: 320px; + width: 95%; + font-size: 16px; + font-weight: 400; } - .login__auth-message { - opacity: 0; - margin-top: 8px; - margin-bottom: 0; + button[type='submit'] { + background-color: #3584c8; + border: none; + color: #ffffff; + font-weight: 500; + margin: 16px auto 8px; + padding: 0px 15px 2px; + } - &.is-error { - color: $red; - text-align: center; - opacity: 1; - transition: opacity 0.5s ease-in-out; - } + a.login__forgot { + color: #135d95; + text-decoration: none; } - .login__actions { - margin-top: 22px; + .login__forgot, .login__signup, .terms { + color: #51565f; + display: block; + font-size: 14px; + margin: 16px auto; + max-width: 320px; text-align: center; - color: $gray; } - .button-primary { - width: 100%; - min-height: 47px; // so that the button doesn't get smaller with the spinner - display: flex; - justify-content: center; // centers spinner - align-items: center; + .login__signup a, .terms a { + color: #135d95; + margin-left: 5px; + text-decoration: none; } - .login__forgot { - a { - color: inherit; - text-decoration: none; - } + .or { + background: #ffffff; + color: #6f7780; + display: block; + font-size: 15px; + font-style: italic; + height: 20px; + position: relative; + margin: 10px auto; + text-align: center; + width: 50px; + z-index: 1; } - .login__signup { - margin-top: 1em; - - a { - font-weight: $bold; - } + .or-line { + border-bottom: 1px solid #dbdee0; + margin: -20px auto; + max-width: 320px; + text-align: center; + width: 95%; + position: relative; + display: block; } -} - -.login__or { - text-align: center; - margin: 20px 0 12px; -} -.login__btn-wpcom { - button { - color: $gray; - width: 100%; + .wpcc-button { + background-color: #006088; + border-radius: 4px; + box-sizing: border-box; + color: #ffffff; + display: block; + font-size: 16px; + font-weight: 500; + height: 40px; + padding: 0px 15px 2px; + margin: 50px auto 10px; + max-width: 320px; + text-align: center; + text-decoration: none; + width: 95%; } } -.login__btn-wpcom-icon { - svg { - margin-right: 6px; - width: 32px; - height: 32px; - - path { - fill: $blue; - } +.theme-dark .login { + .or { + background: #1e1e1e; } } - -.theme-dark .login__logo svg { - border-radius: 0; - border: none; -}