[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
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
@@ -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>
@@ -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"
@@ -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>