Migration: use new password widget.

src/MigrateV2.tsx

@@ -24,6 +24,7 @@ import { Checkbox, FormGroup, FormControlLabel, CircularProgress } from "@materi
 import Alert from "@material-ui/lab/Alert";
 import { arrayToChunkIterator } from "./helpers";
 import { ContactType, EventType, TaskType, PimType } from "./pim-types";
+import PasswordField from "./widgets/PasswordField";
 
 interface PropsType {
   etesync: CredentialsData;
@@ -107,7 +108,11 @@ export default function MigrateV2(props: PropsType) {
     forgotPassword: {
       paddingTop: 20,
     },
+    alertInfo: {
+      marginTop: 20,
+    },
     textField: {
+      width: "20em",
       marginTop: 20,
     },
     submit: {
@@ -333,8 +338,7 @@ export default function MigrateV2(props: PropsType) {
         onChange={handleInputChange(setUsername)}
       />
       <br />
-      <TextField
-        type="password"
+      <PasswordField
         style={styles.textField}
         error={!!errors.errorPassword}
         helperText={errors.errorPassword}
@@ -357,10 +361,10 @@ export default function MigrateV2(props: PropsType) {
       </FormGroup>
       {advancedSettings}
       {errors.errorGeneral && (
-        <Alert severity="error" style={styles.textField}>{errors.errorGeneral}</Alert>
+        <Alert severity="error" style={styles.alertInfo}>{errors.errorGeneral}</Alert>
       )}
       {progress && (
-        <Alert severity="info" style={styles.textField}>{progress}</Alert>
+        <Alert severity="info" style={styles.alertInfo}>{progress}</Alert>
       )}
       <div style={styles.submit}>
         <Button

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<InputProps, "type"> & { 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 (
+    <FormControl style={style}>
+      <InputLabel htmlFor={formId}>{label}</InputLabel>
+      <Input
+        {...props}
+        id={formId}
+        type={showPassword ? "text" : "password"}
+        endAdornment={(
+          <InputAdornment position="end">
+            <IconButton
+              aria-label="Toggle password visibility"
+              title="Toggle password visibility"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {showPassword ? <Visibility /> : <VisibilityOff />}
+            </IconButton>
+          </InputAdornment>
+        )}
+      />
+      <FormHelperText id={formId}>{helperText}</FormHelperText>
+    </FormControl>
+  );
+}