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