wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-06-27 21:54:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

[next] Email/Password Improvements (#2400)

Browse Source 
* 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
This commit is contained in:
Wyatt Johnson
2019-07-12 21:07:14 +00:00
committed by GitHub
parent f95b705585
commit bc0b0d0339
18 changed files with 584 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
+4
View File
@@ -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=""
/>
src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx
+5 -6
View File
@@ -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>
src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
+9 -2
View File
@@ -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"
src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx
+5 -6
View File
@@ -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>
src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap
+20
View File
@@ -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=""
/>
src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
+24
View File
@@ -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"
/>
src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
+285 -115
View File
@@ -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
src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
+66 -30
View File
@@ -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
src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap
+4
View File
@@ -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=""
/>
src/core/client/auth/components/EmailField.tsx
+1
View File
@@ -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"
src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
+6 -6
View File
@@ -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>
src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
+20
View File
@@ -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=""
/>
src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+45 -9
View File
@@ -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=""
/>
src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+65 -13
View File
@@ -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=""
/>
src/core/client/ui/components/PasswordField/PasswordField.css
-1
View File
@@ -1,7 +1,6 @@
.root {
width: calc(29 * var(--mini-unit));
height: 36px;
width: 100%;
line-height: 36px;
box-sizing: border-box;
}
src/core/client/ui/components/PasswordField/PasswordField.tsx
+4
View File
@@ -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 = {
src/core/client/ui/components/PasswordField/__snapshots__/PasswordField.spec.tsx.snap
+8
View File
@@ -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
src/core/server/app/middleware/passport/strategies/local.ts
+13 -2
View File
@@ -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);