From ae3467daf62cfc0bc80ce8ca603b53a5f9728034 Mon Sep 17 00:00:00 2001
From: leo <leopold@lchappuis.fr>
Date: Wed, 12 Feb 2025 09:03:49 -0500
Subject: [PATCH] admin-panel: improve admin password reset
add passwordInput components
Change-Id: I586bfeed19b6b9a48f1e0b0c7feb1fb102bd615b
---
.../AdminAccountConfiguration.tsx | 63 ++++++++++++-------
client/src/components/Input.tsx | 4 +-
2 files changed, 44 insertions(+), 23 deletions(-)
diff --git a/client/src/components/AdminSettings/AdminAccountConfiguration.tsx b/client/src/components/AdminSettings/AdminAccountConfiguration.tsx
index 03bb1e75..4ce65014 100644
--- a/client/src/components/AdminSettings/AdminAccountConfiguration.tsx
+++ b/client/src/components/AdminSettings/AdminAccountConfiguration.tsx
@@ -15,12 +15,13 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
-import { Box, Button, Input } from '@mui/material'
+import { Box, Button } from '@mui/material'
import { AnimatePresence, motion } from 'framer-motion'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useUpdateAdminPasswordMutation } from '../../services/adminQueries'
+import { PasswordInput } from '../Input'
import LayoutSettings from '../LayoutSettings'
export default function AuthMethods() {
@@ -84,27 +85,45 @@ export default function AuthMethods() {
transition={{ duration: 0.5 }}
>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
- <Input
- type="password"
- value={oldPassword}
- onChange={onOldPasswordChange}
- placeholder={t('admin_page_password_old_placeholder')}
- ></Input>
- <Input
- type="password"
- value={newPassword}
- onChange={onNewPasswordChange}
- placeholder={t('admin_page_password_placeholder')}
- ></Input>
- {newPassword !== repeatPassword && newPassword !== '' && repeatPassword !== '' && (
- <Box sx={{ fontSize: '11px', color: '#CC0022' }}>{t('password_input_helper_text_not_match')}</Box>
- )}
- <Input
- type="password"
- value={repeatPassword}
- onChange={onRepeatPasswordChange}
- placeholder={t('admin_page_password_repeat_placeholder')}
- ></Input>
+ <Box sx={{ marginTop: '-20px' }}>
+ <PasswordInput
+ value={oldPassword}
+ onChange={onOldPasswordChange}
+ placeholder={t('admin_page_password_old_placeholder')}
+ tooltipTitle={t('admin_page_password_old_placeholder')}
+ newPlaceHolder={t('admin_page_password_old_placeholder')}
+ />
+ </Box>
+ <Box sx={{ marginTop: '-25px' }}>
+ <PasswordInput
+ value={newPassword}
+ onChange={onNewPasswordChange}
+ placeholder={t('admin_page_password_placeholder')}
+ tooltipTitle={t('admin_page_password_placeholder')}
+ newPlaceHolder={t('admin_page_password_placeholder')}
+ />
+ </Box>
+ <Box sx={{ marginTop: '-25px' }}>
+ <PasswordInput
+ value={repeatPassword}
+ onChange={onRepeatPasswordChange}
+ placeholder={t('admin_page_password_repeat_placeholder')}
+ tooltipTitle={t('admin_page_password_repeat_placeholder')}
+ newPlaceHolder={t('admin_page_password_repeat_placeholder')}
+ />
+ </Box>
+ <Box
+ sx={{
+ fontSize: '11px',
+ color: '#CC0022',
+ visibility:
+ newPassword !== repeatPassword && newPassword !== '' && repeatPassword !== ''
+ ? 'visible'
+ : 'hidden',
+ }}
+ >
+ {t('password_input_helper_text_not_match')}
+ </Box>
<Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', marginTop: '10%' }}>
<Button
variant="contained"
diff --git a/client/src/components/Input.tsx b/client/src/components/Input.tsx
index 680766c0..4034d94b 100644
--- a/client/src/components/Input.tsx
+++ b/client/src/components/Input.tsx
@@ -48,6 +48,7 @@ export type InputProps<StatusType extends NameStatus | PasswordStatus> = TextFie
status?: StatusType
infoButtonProps?: IconButtonProps
tooltipTitle: string
+ newPlaceHolder?: string
}
export const UsernameInput = ({
@@ -127,6 +128,7 @@ export const PasswordInput = ({
infoButtonProps,
status = 'default',
tooltipTitle,
+ newPlaceHolder,
...props
}: InputProps<PasswordStatus>) => {
const { t } = useTranslation()
@@ -174,7 +176,7 @@ export const PasswordInput = ({
<InfosDialog {...dialogHandler.props} title={t('password_rules_dialog_title')} content={<PasswordRules />} />
<TextField
error={passwordError}
- label={t('password_input_label')}
+ label={newPlaceHolder ? newPlaceHolder : t('password_input_label')}
type={showPassword ? 'text' : 'password'}
variant="standard"
autoComplete="current-password"
--
GitLab