From bc0b0d03391b026daf45708add4ca563cc5ce795 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 12 Jul 2019 21:07:14 +0000
Subject: [PATCH] [next] Email/Password Improvements (#2400)

* feat: improved some password/email fields

- All secret fields are now "hidden" by default
- All email fields now have autocomplete/spellcheck disabled with
  correct typings

* feat: add additional email validation
---
 .../__snapshots__/resetPassword.spec.tsx.snap |   4 +
 .../sections/Auth/ClientSecretField.tsx       |  11 +-
 .../Configure/sections/Auth/SSOKeyField.tsx   |  11 +-
 .../sections/Moderation/APIKeyField.tsx       |  11 +-
 .../createPassword.spec.tsx.snap              |  20 +
 .../signInWithEmail.spec.tsx.snap             |  24 ++
 .../__snapshots__/auth.spec.tsx.snap          | 400 +++++++++++++-----
 .../__snapshots__/moderation.spec.tsx.snap    |  96 +++--
 .../invite/__snapshots__/invite.spec.tsx.snap |   4 +
 .../client/auth/components/EmailField.tsx     |   1 +
 .../addEmailAddress.spec.tsx.snap             |  12 +-
 .../createPassword.spec.tsx.snap              |  20 +
 .../test/__snapshots__/signIn.spec.tsx.snap   |  54 ++-
 .../test/__snapshots__/signUp.spec.tsx.snap   |  78 +++-
 .../PasswordField/PasswordField.css           |   1 -
 .../PasswordField/PasswordField.tsx           |   4 +
 .../__snapshots__/PasswordField.spec.tsx.snap |   8 +
 .../middleware/passport/strategies/local.ts   |  15 +-
 18 files changed, 584 insertions(+), 190 deletions(-)

diff --git a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
index 8d229091f..8ae501e8e 100644
--- a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
+++ b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
@@ -57,11 +57,15 @@ Make sure it is unique and be sure to keep it secure.
                   className="PasswordField-wrapper"
                 >
                   <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
                     className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                     id="password"
                     name="password"
                     onChange={[Function]}
                     placeholder="Password"
+                    spellCheck={false}
                     type="password"
                     value=""
                   />
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx
index 982459287..8008e7c1a 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx
@@ -4,7 +4,7 @@ import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { Validator } from "coral-framework/lib/validation";
-import { FormField, InputLabel, TextField } from "coral-ui/components";
+import { FormField, InputLabel, PasswordField } from "coral-ui/components";
 
 import ValidationMessage from "../../ValidationMessage";
 
@@ -31,15 +31,14 @@ const ClientSecretField: FunctionComponent<Props> = ({
     >
       {({ input, meta }) => (
         <>
-          <TextField
+          <PasswordField
             name={input.name}
             onChange={input.onChange}
             value={input.value}
             disabled={disabled}
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck={false}
+            // TODO: (wyattjoh) figure out how to add translations to these props
+            hidePasswordTitle="Show Client Secret"
+            showPasswordTitle="Hide Client Secret"
           />
           {meta.touched && (meta.error || meta.submitError) && (
             <ValidationMessage>
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
index 34e506eda..86272d0b6 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
@@ -7,7 +7,7 @@ import {
   FormField,
   Icon,
   InputLabel,
-  TextField,
+  PasswordField,
   Typography,
 } from "coral-ui/components";
 
@@ -31,7 +31,14 @@ const SSOKeyField: FunctionComponent<Props> = ({
       <InputLabel>Key</InputLabel>
     </Localized>
     <Flex direction="row" itemGutter="half" alignItems="center">
-      <TextField name="key" value={generatedKey} readOnly />
+      <PasswordField
+        name="key"
+        value={generatedKey}
+        readOnly
+        // TODO: (wyattjoh) figure out how to add translations to these props
+        hidePasswordTitle="Show SSO Key"
+        showPasswordTitle="Hide SSO Key"
+      />
       <Localized id="configure-auth-sso-regenerate">
         <Button
           id="configure-auth-sso-regenerate"
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx
index 789bbb840..d3d986d75 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx
@@ -4,7 +4,7 @@ import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { Validator } from "coral-framework/lib/validation";
-import { FormField, InputLabel, TextField } from "coral-ui/components";
+import { FormField, InputLabel, PasswordField } from "coral-ui/components";
 
 import ValidationMessage from "../../ValidationMessage";
 
@@ -28,16 +28,15 @@ const APIKeyField: FunctionComponent<Props> = ({
               API Key
             </InputLabel>
           </Localized>
-          <TextField
+          <PasswordField
             id={`configure-moderation-${input.name}`}
             name={input.name}
             onChange={input.onChange}
             value={input.value}
             disabled={disabled}
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck={false}
+            // TODO: (wyattjoh) figure out how to add translations to these props
+            hidePasswordTitle="Show API Key"
+            showPasswordTitle="Hide API Key"
           />
           {meta.touched && (meta.error || meta.submitError) && (
             <ValidationMessage>
diff --git a/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap
index 2ab0a4d93..c23f172d2 100644
--- a/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap
+++ b/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap
@@ -35,12 +35,16 @@ we require users to create a password.
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value="x"
           />
@@ -154,12 +158,16 @@ we require users to create a password.
                     className="PasswordField-wrapper"
                   >
                     <input
+                      autoCapitalize="off"
+                      autoComplete="off"
+                      autoCorrect="off"
                       className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                       disabled={false}
                       id="password"
                       name="password"
                       onChange={[Function]}
                       placeholder="Password"
+                      spellCheck={false}
                       type="password"
                       value=""
                     />
@@ -236,12 +244,16 @@ we require users to create a password.
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
@@ -340,12 +352,16 @@ GraphQL request (4:3)
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value="secretpassword"
           />
@@ -417,12 +433,16 @@ we require users to create a password.
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
diff --git a/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
index 936de9c28..f27c2c4a4 100644
--- a/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
+++ b/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
@@ -61,12 +61,16 @@ exports[`accepts correct password 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value="testtest"
           />
@@ -159,12 +163,16 @@ exports[`accepts valid email 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
@@ -283,12 +291,16 @@ exports[`checks for invalid email 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
@@ -471,12 +483,16 @@ exports[`renders sign in form 1`] = `
                     className="PasswordField-wrapper"
                   >
                     <input
+                      autoCapitalize="off"
+                      autoComplete="off"
+                      autoCorrect="off"
                       className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                       disabled={false}
                       id="password"
                       name="password"
                       onChange={[Function]}
                       placeholder="Password"
+                      spellCheck={false}
                       type="password"
                       value=""
                     />
@@ -596,12 +612,16 @@ exports[`shows error when submitting empty form 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
@@ -714,12 +734,16 @@ exports[`shows server error 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value="testtest"
           />
diff --git a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
index 6ffb6b33c..ea6e71c08 100644
--- a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
@@ -181,21 +181,39 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
           Client Secret
         </label>
         <div
-          className="TextField-root"
+          className="PasswordField-root"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={true}
-            name="auth.integrations.oidc.clientSecret"
-            onChange={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value="clientSecret"
-          />
+          <div
+            className="PasswordField-wrapper"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="PasswordField-colorRegular PasswordField-input"
+              disabled={true}
+              name="auth.integrations.oidc.clientSecret"
+              onChange={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="password"
+              value="clientSecret"
+            />
+            <div
+              className="PasswordField-icon"
+              onClick={[Function]}
+              role="button"
+              tabIndex={0}
+              title="Hide Client Secret"
+            >
+              <span
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                visibility
+              </span>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -592,21 +610,39 @@ For more information visit:
           Client Secret
         </label>
         <div
-          className="TextField-root"
+          className="PasswordField-root"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={false}
-            name="auth.integrations.facebook.clientSecret"
-            onChange={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value="myClientSecret"
-          />
+          <div
+            className="PasswordField-wrapper"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="PasswordField-colorRegular PasswordField-input"
+              disabled={false}
+              name="auth.integrations.facebook.clientSecret"
+              onChange={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="password"
+              value="myClientSecret"
+            />
+            <div
+              className="PasswordField-icon"
+              onClick={[Function]}
+              role="button"
+              tabIndex={0}
+              title="Hide Client Secret"
+            >
+              <span
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                visibility
+              </span>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -904,21 +940,39 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
           Client Secret
         </label>
         <div
-          className="TextField-root"
+          className="PasswordField-root"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={false}
-            name="auth.integrations.oidc.clientSecret"
-            onChange={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
+          <div
+            className="PasswordField-wrapper"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="PasswordField-colorRegular PasswordField-input"
+              disabled={false}
+              name="auth.integrations.oidc.clientSecret"
+              onChange={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="password"
+              value=""
+            />
+            <div
+              className="PasswordField-icon"
+              onClick={[Function]}
+              role="button"
+              tabIndex={0}
+              title="Hide Client Secret"
+            >
+              <span
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                visibility
+              </span>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -1370,21 +1424,39 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
           Client Secret
         </label>
         <div
-          className="TextField-root"
+          className="PasswordField-root"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={false}
-            name="auth.integrations.oidc.clientSecret"
-            onChange={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
+          <div
+            className="PasswordField-wrapper"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="PasswordField-colorRegular PasswordField-input"
+              disabled={false}
+              name="auth.integrations.oidc.clientSecret"
+              onChange={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="password"
+              value=""
+            />
+            <div
+              className="PasswordField-icon"
+              onClick={[Function]}
+              role="button"
+              tabIndex={0}
+              title="Hide Client Secret"
+            >
+              <span
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                visibility
+              </span>
+            </div>
+          </div>
         </div>
         <div
           className="Message-root Message-colorError ValidationMessage-root"
@@ -1721,16 +1793,38 @@ exports[`regenerate sso key 1`] = `
     className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
   >
     <div
-      className="TextField-root"
+      className="PasswordField-root"
     >
-      <input
-        className="TextField-input TextField-colorRegular"
-        name="key"
-        placeholder=""
-        readOnly={true}
-        type="text"
-        value="==GENERATED_KEY=="
-      />
+      <div
+        className="PasswordField-wrapper"
+      >
+        <input
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          className="PasswordField-colorRegular PasswordField-input"
+          name="key"
+          placeholder=""
+          readOnly={true}
+          spellCheck={false}
+          type="password"
+          value="==GENERATED_KEY=="
+        />
+        <div
+          className="PasswordField-icon"
+          onClick={[Function]}
+          role="button"
+          tabIndex={0}
+          title="Hide SSO Key"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root Icon-sm"
+          >
+            visibility
+          </span>
+        </div>
+      </div>
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
@@ -2228,21 +2322,39 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
                       Client Secret
                     </label>
                     <div
-                      className="TextField-root"
+                      className="PasswordField-root"
                     >
-                      <input
-                        autoCapitalize="off"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        className="TextField-input TextField-colorRegular"
-                        disabled={true}
-                        name="auth.integrations.oidc.clientSecret"
-                        onChange={[Function]}
-                        placeholder=""
-                        spellCheck={false}
-                        type="text"
-                        value=""
-                      />
+                      <div
+                        className="PasswordField-wrapper"
+                      >
+                        <input
+                          autoCapitalize="off"
+                          autoComplete="off"
+                          autoCorrect="off"
+                          className="PasswordField-colorRegular PasswordField-input"
+                          disabled={true}
+                          name="auth.integrations.oidc.clientSecret"
+                          onChange={[Function]}
+                          placeholder=""
+                          spellCheck={false}
+                          type="password"
+                          value=""
+                        />
+                        <div
+                          className="PasswordField-icon"
+                          onClick={[Function]}
+                          role="button"
+                          tabIndex={0}
+                          title="Hide Client Secret"
+                        >
+                          <span
+                            aria-hidden="true"
+                            className="Icon-root Icon-sm"
+                          >
+                            visibility
+                          </span>
+                        </div>
+                      </div>
                     </div>
                   </div>
                   <div
@@ -2547,15 +2659,37 @@ integration to register for a new account.
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <div
-                        className="TextField-root"
+                        className="PasswordField-root"
                       >
-                        <input
-                          className="TextField-input TextField-colorRegular"
-                          name="key"
-                          placeholder=""
-                          readOnly={true}
-                          type="text"
-                        />
+                        <div
+                          className="PasswordField-wrapper"
+                        >
+                          <input
+                            autoCapitalize="off"
+                            autoComplete="off"
+                            autoCorrect="off"
+                            className="PasswordField-colorRegular PasswordField-input"
+                            name="key"
+                            placeholder=""
+                            readOnly={true}
+                            spellCheck={false}
+                            type="password"
+                          />
+                          <div
+                            className="PasswordField-icon"
+                            onClick={[Function]}
+                            role="button"
+                            tabIndex={0}
+                            title="Hide SSO Key"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="Icon-root Icon-sm"
+                            >
+                              visibility
+                            </span>
+                          </div>
+                        </div>
                       </div>
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled Button-disabled"
@@ -2857,21 +2991,39 @@ to create and set up a web application. For more information visit:
                       Client Secret
                     </label>
                     <div
-                      className="TextField-root"
+                      className="PasswordField-root"
                     >
-                      <input
-                        autoCapitalize="off"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        className="TextField-input TextField-colorRegular"
-                        disabled={true}
-                        name="auth.integrations.google.clientSecret"
-                        onChange={[Function]}
-                        placeholder=""
-                        spellCheck={false}
-                        type="text"
-                        value=""
-                      />
+                      <div
+                        className="PasswordField-wrapper"
+                      >
+                        <input
+                          autoCapitalize="off"
+                          autoComplete="off"
+                          autoCorrect="off"
+                          className="PasswordField-colorRegular PasswordField-input"
+                          disabled={true}
+                          name="auth.integrations.google.clientSecret"
+                          onChange={[Function]}
+                          placeholder=""
+                          spellCheck={false}
+                          type="password"
+                          value=""
+                        />
+                        <div
+                          className="PasswordField-icon"
+                          onClick={[Function]}
+                          role="button"
+                          tabIndex={0}
+                          title="Hide Client Secret"
+                        >
+                          <span
+                            aria-hidden="true"
+                            className="Icon-root Icon-sm"
+                          >
+                            visibility
+                          </span>
+                        </div>
+                      </div>
                     </div>
                   </div>
                   <div
@@ -3137,21 +3289,39 @@ For more information visit:
                       Client Secret
                     </label>
                     <div
-                      className="TextField-root"
+                      className="PasswordField-root"
                     >
-                      <input
-                        autoCapitalize="off"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        className="TextField-input TextField-colorRegular"
-                        disabled={true}
-                        name="auth.integrations.facebook.clientSecret"
-                        onChange={[Function]}
-                        placeholder=""
-                        spellCheck={false}
-                        type="text"
-                        value=""
-                      />
+                      <div
+                        className="PasswordField-wrapper"
+                      >
+                        <input
+                          autoCapitalize="off"
+                          autoComplete="off"
+                          autoCorrect="off"
+                          className="PasswordField-colorRegular PasswordField-input"
+                          disabled={true}
+                          name="auth.integrations.facebook.clientSecret"
+                          onChange={[Function]}
+                          placeholder=""
+                          spellCheck={false}
+                          type="password"
+                          value=""
+                        />
+                        <div
+                          className="PasswordField-icon"
+                          onClick={[Function]}
+                          role="button"
+                          tabIndex={0}
+                          title="Hide Client Secret"
+                        >
+                          <span
+                            aria-hidden="true"
+                            className="Icon-root Icon-sm"
+                          >
+                            visibility
+                          </span>
+                        </div>
+                      </div>
                     </div>
                   </div>
                   <div
diff --git a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
index ab9642a4a..df19d3308 100644
--- a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
@@ -501,22 +501,40 @@ improve the API over time.
                 API Key
               </label>
               <div
-                className="TextField-root"
+                className="PasswordField-root"
               >
-                <input
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className="TextField-input TextField-colorRegular"
-                  disabled={false}
-                  id="configure-moderation-integrations.perspective.key"
-                  name="integrations.perspective.key"
-                  onChange={[Function]}
-                  placeholder=""
-                  spellCheck={false}
-                  type="text"
-                  value=""
-                />
+                <div
+                  className="PasswordField-wrapper"
+                >
+                  <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="PasswordField-colorRegular PasswordField-input"
+                    disabled={false}
+                    id="configure-moderation-integrations.perspective.key"
+                    name="integrations.perspective.key"
+                    onChange={[Function]}
+                    placeholder=""
+                    spellCheck={false}
+                    type="password"
+                    value=""
+                  />
+                  <div
+                    className="PasswordField-icon"
+                    onClick={[Function]}
+                    role="button"
+                    tabIndex={0}
+                    title="Hide API Key"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-sm"
+                    >
+                      visibility
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
             <div
@@ -670,22 +688,40 @@ in your Akismet account:
                 API Key
               </label>
               <div
-                className="TextField-root"
+                className="PasswordField-root"
               >
-                <input
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className="TextField-input TextField-colorRegular"
-                  disabled={false}
-                  id="configure-moderation-integrations.akismet.key"
-                  name="integrations.akismet.key"
-                  onChange={[Function]}
-                  placeholder=""
-                  spellCheck={false}
-                  type="text"
-                  value=""
-                />
+                <div
+                  className="PasswordField-wrapper"
+                >
+                  <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="PasswordField-colorRegular PasswordField-input"
+                    disabled={false}
+                    id="configure-moderation-integrations.akismet.key"
+                    name="integrations.akismet.key"
+                    onChange={[Function]}
+                    placeholder=""
+                    spellCheck={false}
+                    type="password"
+                    value=""
+                  />
+                  <div
+                    className="PasswordField-icon"
+                    onClick={[Function]}
+                    role="button"
+                    tabIndex={0}
+                    title="Hide API Key"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-sm"
+                    >
+                      visibility
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
             <div
diff --git a/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap b/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap
index 03b61707f..60767ef82 100644
--- a/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap
+++ b/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap
@@ -159,12 +159,16 @@ exports[`renders form 1`] = `
                 className="PasswordField-wrapper"
               >
                 <input
+                  autoCapitalize="off"
+                  autoComplete="off"
+                  autoCorrect="off"
                   className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                   disabled={false}
                   id="password"
                   name="password"
                   onChange={[Function]}
                   placeholder="Password"
+                  spellCheck={false}
                   type="password"
                   value=""
                 />
diff --git a/src/core/client/auth/components/EmailField.tsx b/src/core/client/auth/components/EmailField.tsx
index 086c4b65a..51d296af0 100644
--- a/src/core/client/auth/components/EmailField.tsx
+++ b/src/core/client/auth/components/EmailField.tsx
@@ -35,6 +35,7 @@ const EmailField: FunctionComponent<Props> = props => (
             onChange={input.onChange}
             value={input.value}
             placeholder="Email Address"
+            type="email"
             color={
               meta.touched && (meta.error || meta.submitError)
                 ? "error"
diff --git a/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
index 27a0274d5..5e5273dad 100644
--- a/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
@@ -101,7 +101,7 @@ Your email address will be used to:
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value="hans@test.com"
         />
       </div>
@@ -260,7 +260,7 @@ Your email address will be used to:
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value="invalid-email"
         />
       </div>
@@ -451,7 +451,7 @@ Your email address will be used to:
                 name="email"
                 onChange={[Function]}
                 placeholder="Email Address"
-                type="text"
+                type="email"
                 value=""
               />
             </div>
@@ -600,7 +600,7 @@ Your email address will be used to:
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value=""
         />
       </div>
@@ -786,7 +786,7 @@ GraphQL request (4:3)
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value="hans@test.com"
         />
       </div>
@@ -932,7 +932,7 @@ Your email address will be used to:
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value=""
         />
       </div>
diff --git a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
index 83af2b489..6c3a173d3 100644
--- a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
@@ -35,12 +35,16 @@ we require users to create a password.
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value="x"
           />
@@ -144,12 +148,16 @@ we require users to create a password.
                 className="PasswordField-wrapper"
               >
                 <input
+                  autoCapitalize="off"
+                  autoComplete="off"
+                  autoCorrect="off"
                   className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                   disabled={false}
                   id="password"
                   name="password"
                   onChange={[Function]}
                   placeholder="Password"
+                  spellCheck={false}
                   type="password"
                   value=""
                 />
@@ -224,12 +232,16 @@ we require users to create a password.
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
@@ -328,12 +340,16 @@ GraphQL request (4:3)
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value="secretpassword"
           />
@@ -405,12 +421,16 @@ we require users to create a password.
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
index 01d22ae39..b6570721f 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`accepts correct password 1`] = `
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value=""
         />
       </div>
@@ -61,12 +61,16 @@ exports[`accepts correct password 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value="testtest"
           />
@@ -153,7 +157,7 @@ exports[`accepts valid email 1`] = `
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value="hans@test.com"
         />
       </div>
@@ -174,12 +178,16 @@ exports[`accepts valid email 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
@@ -286,7 +294,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value=""
             />
           </div>
@@ -307,12 +315,16 @@ exports[`auth configuration renders all auth enabled 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value=""
               />
@@ -551,7 +563,7 @@ exports[`checks for invalid email 1`] = `
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value="invalid-email"
         />
       </div>
@@ -585,12 +597,16 @@ exports[`checks for invalid email 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
@@ -737,7 +753,7 @@ exports[`renders sign in view 1`] = `
                   name="email"
                   onChange={[Function]}
                   placeholder="Email Address"
-                  type="text"
+                  type="email"
                   value=""
                 />
               </div>
@@ -758,12 +774,16 @@ exports[`renders sign in view 1`] = `
                   className="PasswordField-wrapper"
                 >
                   <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
                     className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                     disabled={false}
                     id="password"
                     name="password"
                     onChange={[Function]}
                     placeholder="Password"
+                    spellCheck={false}
                     type="password"
                     value=""
                   />
@@ -910,7 +930,7 @@ exports[`renders sign in view with error 1`] = `
                 name="email"
                 onChange={[Function]}
                 placeholder="Email Address"
-                type="text"
+                type="email"
                 value=""
               />
             </div>
@@ -931,12 +951,16 @@ exports[`renders sign in view with error 1`] = `
                 className="PasswordField-wrapper"
               >
                 <input
+                  autoCapitalize="off"
+                  autoComplete="off"
+                  autoCorrect="off"
                   className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                   disabled={false}
                   id="password"
                   name="password"
                   onChange={[Function]}
                   placeholder="Password"
+                  spellCheck={false}
                   type="password"
                   value=""
                 />
@@ -1029,7 +1053,7 @@ exports[`shows error when submitting empty form 1`] = `
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value=""
         />
       </div>
@@ -1063,12 +1087,16 @@ exports[`shows error when submitting empty form 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
@@ -1175,7 +1203,7 @@ exports[`shows server error 1`] = `
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value="hans@test.com"
         />
       </div>
@@ -1196,12 +1224,16 @@ exports[`shows server error 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value="testtest"
           />
@@ -1288,7 +1320,7 @@ exports[`submits form successfully 1`] = `
           name="email"
           onChange={[Function]}
           placeholder="Email Address"
-          type="text"
+          type="email"
           value=""
         />
       </div>
@@ -1309,12 +1341,16 @@ exports[`submits form successfully 1`] = `
           className="PasswordField-wrapper"
         >
           <input
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
             disabled={false}
             id="password"
             name="password"
             onChange={[Function]}
             placeholder="Password"
+            spellCheck={false}
             type="password"
             value=""
           />
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index 06f2ebcb7..445d1de08 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`accepts correct password 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value=""
             />
           </div>
@@ -115,12 +115,16 @@ exports[`accepts correct password 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value="testtest"
               />
@@ -204,7 +208,7 @@ exports[`accepts valid email 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value="hans@test.com"
             />
           </div>
@@ -272,12 +276,16 @@ exports[`accepts valid email 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value=""
               />
@@ -374,7 +382,7 @@ exports[`accepts valid username 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value=""
             />
           </div>
@@ -442,12 +450,16 @@ exports[`accepts valid username 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value=""
               />
@@ -544,7 +556,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value=""
             />
           </div>
@@ -599,12 +611,16 @@ exports[`auth configuration renders all auth enabled 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value=""
               />
@@ -835,7 +851,7 @@ exports[`checks for invalid characters in username 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value=""
             />
           </div>
@@ -916,12 +932,16 @@ exports[`checks for invalid characters in username 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value=""
               />
@@ -1018,7 +1038,7 @@ exports[`checks for invalid email 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value="invalid-email"
             />
           </div>
@@ -1099,12 +1119,16 @@ exports[`checks for invalid email 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value=""
               />
@@ -1201,7 +1225,7 @@ exports[`checks for too long username 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value=""
             />
           </div>
@@ -1282,12 +1306,16 @@ exports[`checks for too long username 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value=""
               />
@@ -1384,7 +1412,7 @@ exports[`checks for too short password 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value=""
             />
           </div>
@@ -1465,12 +1493,16 @@ exports[`checks for too short password 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value="pass"
               />
@@ -1567,7 +1599,7 @@ exports[`checks for too short username 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value=""
             />
           </div>
@@ -1648,12 +1680,16 @@ exports[`checks for too short username 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value=""
               />
@@ -1790,7 +1826,7 @@ exports[`renders sign up form 1`] = `
                   name="email"
                   onChange={[Function]}
                   placeholder="Email Address"
-                  type="text"
+                  type="email"
                   value=""
                 />
               </div>
@@ -1845,12 +1881,16 @@ exports[`renders sign up form 1`] = `
                   className="PasswordField-wrapper"
                 >
                   <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
                     className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                     disabled={false}
                     id="password"
                     name="password"
                     onChange={[Function]}
                     placeholder="Password"
+                    spellCheck={false}
                     type="password"
                     value=""
                   />
@@ -1936,7 +1976,7 @@ exports[`shows error when submitting empty form 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value=""
             />
           </div>
@@ -2017,12 +2057,16 @@ exports[`shows error when submitting empty form 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value=""
               />
@@ -2126,7 +2170,7 @@ exports[`shows server error 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value="hans@test.com"
             />
           </div>
@@ -2181,12 +2225,16 @@ exports[`shows server error 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value="testtest"
               />
@@ -2270,7 +2318,7 @@ exports[`submits form successfully 1`] = `
               name="email"
               onChange={[Function]}
               placeholder="Email Address"
-              type="text"
+              type="email"
               value=""
             />
           </div>
@@ -2325,12 +2373,16 @@ exports[`submits form successfully 1`] = `
               className="PasswordField-wrapper"
             >
               <input
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                 disabled={false}
                 id="password"
                 name="password"
                 onChange={[Function]}
                 placeholder="Password"
+                spellCheck={false}
                 type="password"
                 value=""
               />
diff --git a/src/core/client/ui/components/PasswordField/PasswordField.css b/src/core/client/ui/components/PasswordField/PasswordField.css
index 80bd7dc9f..6a558b14c 100644
--- a/src/core/client/ui/components/PasswordField/PasswordField.css
+++ b/src/core/client/ui/components/PasswordField/PasswordField.css
@@ -1,7 +1,6 @@
 .root {
   width: calc(29 * var(--mini-unit));
   height: 36px;
-  width: 100%;
   line-height: 36px;
   box-sizing: border-box;
 }
diff --git a/src/core/client/ui/components/PasswordField/PasswordField.tsx b/src/core/client/ui/components/PasswordField/PasswordField.tsx
index 63ccfea16..87b421744 100644
--- a/src/core/client/ui/components/PasswordField/PasswordField.tsx
+++ b/src/core/client/ui/components/PasswordField/PasswordField.tsx
@@ -75,6 +75,10 @@ class PasswordField extends Component<PasswordFieldProps, State> {
     placeholder: "",
     showPasswordTitle: "Hide password",
     hidePasswordTitle: "Show password",
+    autoCapitalize: "off",
+    autoCorrect: "off",
+    autoComplete: "off",
+    spellCheck: false,
   };
 
   public state = {
diff --git a/src/core/client/ui/components/PasswordField/__snapshots__/PasswordField.spec.tsx.snap b/src/core/client/ui/components/PasswordField/__snapshots__/PasswordField.spec.tsx.snap
index 7120c761e..671f8bb40 100644
--- a/src/core/client/ui/components/PasswordField/__snapshots__/PasswordField.spec.tsx.snap
+++ b/src/core/client/ui/components/PasswordField/__snapshots__/PasswordField.spec.tsx.snap
@@ -8,9 +8,13 @@ exports[`renders correctly 1`] = `
     className="PasswordField-wrapper"
   >
     <input
+      autoCapitalize="off"
+      autoComplete="off"
+      autoCorrect="off"
       className="PasswordField-colorRegular PasswordField-input"
       defaultValue="Hello World"
       placeholder=""
+      spellCheck={false}
       type="password"
     />
     <div
@@ -39,9 +43,13 @@ exports[`renders correctly 2`] = `
     className="PasswordField-wrapper"
   >
     <input
+      autoCapitalize="off"
+      autoComplete="off"
+      autoCorrect="off"
       className="PasswordField-colorRegular PasswordField-input"
       defaultValue="Hello World"
       placeholder=""
+      spellCheck={false}
       type="text"
     />
     <div
diff --git a/src/core/server/app/middleware/passport/strategies/local.ts b/src/core/server/app/middleware/passport/strategies/local.ts
index 3960d75c8..2e4cf9737 100644
--- a/src/core/server/app/middleware/passport/strategies/local.ts
+++ b/src/core/server/app/middleware/passport/strategies/local.ts
@@ -1,3 +1,4 @@
+import Joi from "joi";
 import { Db } from "mongodb";
 import { Strategy as LocalStrategy } from "passport-local";
 
@@ -18,11 +19,21 @@ const verifyFactory = (
   emailLimiter: RequestLimiter
 ) => async (
   req: Request,
-  email: string,
-  password: string,
+  emailInput: string,
+  passwordInput: string,
   done: VerifyCallback
 ) => {
   try {
+    // Validate that the email address and password are reasonable.
+    const email = Joi.attempt(
+      emailInput,
+      Joi.string()
+        .trim()
+        .lowercase()
+        .email()
+    );
+    const password = Joi.attempt(passwordInput, Joi.string());
+
     await ipLimiter.test(req, req.ip);
     await emailLimiter.test(req, email);