Automattic · belcherj · Jul 31, 2019 · Jul 29, 2019 · Jul 29, 2019 · Jul 29, 2019
diff --git 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
@@ -5,11 +5,10 @@ import classNames from 'classnames';
 import cryptoRandomString from '../utils/crypto-random-string';
 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 +22,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,
   };
 
@@ -54,72 +54,19 @@ export class Auth extends Component {
     const logInText = 'Log in';
     const buttonLabel = isCreatingAccount ? signUpText : logInText;
     const helpLinkLabel = isCreatingAccount ? logInText : signUpText;
-    const helpMessage = isCreatingAccount
-      ? 'Already have an account?'
-      : "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" />}
         <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 && (
@@ -130,66 +77,103 @@ export class Auth extends Component {
               {passwordErrorMessage}
             </p>
           )}
-          <div className="login__actions">
-            <button
-              className={submitClasses}
-              onClick={isCreatingAccount ? this.onSignUp : this.onLogin}
-              type="submit"
-            >
-              {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>
+          <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>
+
+          <a
+            className="login__forgot"
+            href="https://app.simplenote.com/forgot/"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={this.onForgot}
+          >
+            Forgot your password?
+          </a>
+
+          <p className="login__signup">
+            <a href="#" onClick={this.toggleSignUp}>
+              {helpLinkLabel}
+            </a>
+          </p>
           {isElectron && (
             <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}>
+                Log in with WordPress.com
+              </button>
             </Fragment>
           )}
         </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;
     }
 
@@ -309,21 +293,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;
     }
 
@@ -345,6 +323,7 @@ export class Auth extends Component {
 }
 
 const mapDispatchToProps = dispatch => ({
+  resetErrors: () => dispatch(reset()),
   saveWPToken: token => dispatch(setWPToken(token)),
 });