use SimpleAlert component

src/apps/stable/routes/session/forgotPassword/index.tsx

@@ -5,14 +5,17 @@ import globalize from 'lib/globalize';
 import Button from 'elements/emby-button/Button';
 import Input from 'elements/emby-input/Input';
 import { useMutation } from '@tanstack/react-query';
-import Dashboard from 'utils/dashboard';
 import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
 import { ForgotPasswordAction } from '@jellyfin/sdk/lib/generated-client/models/forgot-password-action';
 import ServerConnections from 'components/ServerConnections';
+import SimpleAlert from 'components/SimpleAlert';
 
 export const ForgotPasswordPage = () => {
     const navigate = useNavigate();
     const [username, setUsername] = useState('');
+    const [isAlertOpen, setIsAlertOpen] = useState(false);
+    const [alertMessage, setAlertMessage] = useState<string>('');
+    const [alertCallback, setAlertCallback] = useState<(() => void) | undefined>(undefined);
 
     const forgotPasswordMutation = useMutation({
         mutationFn: async (enteredUsername: string) => {
@@ -41,22 +44,17 @@ export const ForgotPasswordPage = () => {
                     break;
                 case ForgotPasswordAction.PinCode:
                     msg = globalize.translate('MessageForgotPasswordFileCreated');
-                    msg += '<br/><br/>';
-                    msg += globalize.translate('MessageForgotPasswordPinReset');
-                    msg += '<br/><br/>';
+                    msg += ': ';
                     msg += result.PinFile;
-                    msg += '<br/>';
                     callback = () => navigate('/forgotpasswordpin');
                     break;
                 default:
                     return;
             }
 
-            Dashboard.alert({
-                message: msg,
-                title: globalize.translate('ButtonForgotPassword'),
-                callback: callback
-            });
+            setAlertMessage(msg);
+            setAlertCallback(() => callback);
+            setIsAlertOpen(true);
         }
     });
 
@@ -73,11 +71,23 @@ export const ForgotPasswordPage = () => {
         setUsername(e.target.value);
     }, []);
 
+    const handleAlertClose = useCallback(() => {
+        setIsAlertOpen(false);
+        if (alertCallback) {
+            alertCallback();
+        }
+    }, [alertCallback]);
+
     return (
         <Page
             id='forgotPasswordPage'
             className='page standalonePage forgotPasswordPage mainAnimatedPage'
         >
+            <SimpleAlert
+                open={isAlertOpen}
+                text={alertMessage}
+                onClose={handleAlertClose}
+            />
             <div className='padded-left padded-right padded-bottom-page'>
                 <form
                     className='forgotPasswordForm'