Add protection against insecure passwords

lib/auth/index.tsx

@@ -11,6 +11,7 @@ import { viewExternalUrl } from '../utils/url-utils';
 
 type OwnProps = {
   authPending: boolean;
+  hasInsecurePassword: boolean;
   hasInvalidCredentials: boolean;
   hasLoginError: boolean;
   login: (username: string, password: string) => any;
@@ -76,6 +77,28 @@ export class Auth extends Component<Props> {
           {!this.state.onLine && (
             <p className="login__auth-message is-error">Offline</p>
           )}
+          {this.props.hasInsecurePassword && (
+            <p
+              className="login__auth-message is-error"
+              data-error-name="invalid-login"
+            >
+              Your password is insecure and must be{' '}
+              <a
+                className="login__reset"
+                href={
+                  'https://app.simplenote.com/reset/?email=' +
+                  encodeURIComponent(get(this.usernameInput, 'value'))
+                }
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={this.onForgot}
+              >
+                reset
+              </a>
+              . Passwords must be between 8 and 64 characters long and may not
+              include your email address, new lines, or tabs.
+            </p>
+          )}
           {this.props.hasInvalidCredentials && (
             <p
               className="login__auth-message is-error"

lib/boot-without-auth.tsx

@@ -3,6 +3,7 @@ import { render } from 'react-dom';
 import { Auth as AuthApp } from './auth';
 import { Auth as SimperiumAuth } from 'simperium';
 import analytics from './analytics';
+import { validatePassword } from './utils/validate-password';
 
 import getConfig from '../get-config';
 
@@ -16,6 +17,7 @@ type State = {
   authStatus:
     | 'unsubmitted'
     | 'submitting'
+    | 'insecure-password'
     | 'invalid-credentials'
     | 'unknown-error';
 };
@@ -42,6 +44,10 @@ class AppWithoutAuth extends Component<Props, State> {
       auth
         .authorize(username, password)
         .then((user: User) => {
+          if (!validatePassword(password, username)) {
+            this.setState({ authStatus: 'insecure-password' });
+            return;
+          }
           if (!user.access_token) {
             throw new Error('missing access token');
           }
@@ -96,6 +102,7 @@ class AppWithoutAuth extends Component<Props, State> {
       <div className={`app theme-${systemTheme}`}>
         <AuthApp
           authPending={this.state.authStatus === 'submitting'}
+          hasInsecurePassword={this.state.authStatus === 'insecure-password'}
           hasInvalidCredentials={
             this.state.authStatus === 'invalid-credentials'
           }