diff --git a/src/SignupPage.tsx b/src/SignupPage.tsx index e92b214..bab26b7 100644 --- a/src/SignupPage.tsx +++ b/src/SignupPage.tsx @@ -12,6 +12,7 @@ import Switch from "@material-ui/core/Switch"; import { routeResolver } from "./App"; import Container from "./widgets/Container"; +import PasswordField from "./widgets/PasswordField"; import LoadingIndicator from "./widgets/LoadingIndicator"; import Alert from "@material-ui/lab/Alert"; @@ -122,8 +123,12 @@ export default function SignupPage() { const styles = { form: { }, + infoAlert: { + marginTop: 20, + }, textField: { marginTop: 20, + width: "18em", }, submit: { marginTop: 40, @@ -189,14 +194,15 @@ export default function SignupPage() { onChange={handleInputChange(setEmail)} />
- @@ -215,10 +221,10 @@ export default function SignupPage() { {advancedSettings} {errors.errorGeneral && ( - {errors.errorGeneral} + {errors.errorGeneral} )} - + Please make sure you remember your password, as it can't be recovered if lost! diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx index 6970e7e..cbae6e4 100644 --- a/src/components/LoginForm.tsx +++ b/src/components/LoginForm.tsx @@ -9,6 +9,7 @@ import FormControlLabel from "@material-ui/core/FormControlLabel"; import Switch from "@material-ui/core/Switch"; import ExternalLink from "../widgets/ExternalLink"; +import PasswordField from "../widgets/PasswordField"; import * as C from "../constants"; import LoadingIndicator from "../widgets/LoadingIndicator"; @@ -67,8 +68,12 @@ export default function LoginForm(props: PropsType) { forgotPassword: { paddingTop: 20, }, + infoAlert: { + marginTop: 20, + }, textField: { marginTop: 20, + width: "18em", }, submit: { marginTop: 40, @@ -122,8 +127,7 @@ export default function LoginForm(props: PropsType) { onChange={handleInputChange(setUsername)} />
- {props.error.message}
+ {props.error.message} )}
diff --git a/src/widgets/PasswordField.tsx b/src/widgets/PasswordField.tsx new file mode 100644 index 0000000..557b9d6 --- /dev/null +++ b/src/widgets/PasswordField.tsx @@ -0,0 +1,44 @@ +// SPDX-FileCopyrightText: © 2017 EteSync Authors +// SPDX-License-Identifier: AGPL-3.0-only + +import * as React from "react"; +import Input, { InputProps } from "@material-ui/core/Input"; +import InputLabel from "@material-ui/core/InputLabel"; +import InputAdornment from "@material-ui/core/InputAdornment"; +import FormHelperText from "@material-ui/core/FormHelperText"; +import IconButton from "@material-ui/core/IconButton"; +import FormControl from "@material-ui/core/FormControl"; +import Visibility from "@material-ui/icons/Visibility"; +import VisibilityOff from "@material-ui/icons/VisibilityOff"; + +let formIdCounter = 0; + +export default function PasswordField(props_: Omit & { helperText?: string, label?: string }) { + const [showPassword, setShowPassword] = React.useState(false); + const formId_ = React.useMemo(() => formIdCounter++, []); + const { helperText, label, style, id, ...props } = props_; + const formId = `password-field-${id ?? formId_}`; + + return ( + + {label} + + setShowPassword(!showPassword)} + > + {showPassword ? : } + + + )} + /> + {helperText} + + ); +}