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