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}
+
+ );
+}