Add "PasswordTextField"

src/components/atoms/PasswordTextField.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { InputAdornment, TextFieldProps } from '@mui/material';
+import TextField from '@mui/material/TextField';
+import { useState } from 'react';
+import IconButton from '@mui/material/IconButton';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+
+export const PasswordTextField = (props: TextFieldProps) => {
+    const { t } = useTranslation();
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+    return (
+        <TextField
+            id="password"
+            name="password"
+            label={t('global.label.password')}
+            type={showPassword ? 'text' : 'password'}
+            InputProps={{
+                endAdornment: (
+                    <InputAdornment position="start">
+                        <IconButton
+                            aria-label="toggle password visibility"
+                            onClick={handleClickShowPassword}
+                            edge="end"
+                        >
+                            {showPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                    </InputAdornment>
+                ),
+            }}
+            {...props}
+        />
+    );
+};