admin/jellyfin-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: forgotPassword page to react component

Browse Source
This commit is contained in:
MontejoJorge
2025-04-21 23:34:18 +02:00
parent 423161d551
commit 3eb26fb416
7 changed files with 125 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/apps/stable/routes/asyncRoutes/index.ts
View File

@@ -1 +1,2 @@
export * from './user';
export * from './public';

5
src/apps/stable/routes/asyncRoutes/public.ts Normal file
View File

@@ -0,0 +1,5 @@
import { AsyncRoute } from '../../../../components/router/AsyncRoute';
export const ASYNC_PUBLIC_ROUTES: AsyncRoute[] = [
{ path: 'forgotpassword', page: 'session/forgotPassword' }
];

7
src/apps/stable/routes/legacyRoutes/public.ts
View File

@@ -22,13 +22,6 @@ export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
view: 'session/login/index.html'
}
},
{
path: 'forgotpassword',
pageProps: {
controller: 'session/forgotPassword/index',
view: 'session/forgotPassword/index.html'
}
},
{
path: 'forgotpasswordpin',
pageProps: {

3
src/apps/stable/routes/routes.tsx
View File

@@ -9,7 +9,7 @@ import FallbackRoute from 'components/router/FallbackRoute';
import AppLayout from '../AppLayout';
import { ASYNC_USER_ROUTES } from './asyncRoutes';
import { ASYNC_PUBLIC_ROUTES, ASYNC_USER_ROUTES } from './asyncRoutes';
import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
export const STABLE_APP_ROUTES: RouteObject[] = [
@@ -33,6 +33,7 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
/* Public routes */
element: <ConnectionRequired level='public' />,
children: [
...ASYNC_PUBLIC_ROUTES.map(toAsyncPageRoute),
...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
/* Fallback route for invalid paths */
{

117
src/apps/stable/routes/session/forgotPassword/index.tsx Normal file
View File

@@ -0,0 +1,117 @@
import React, { useCallback, useState } from 'react';
import Page from 'components/Page';
import { useNavigate } from 'react-router-dom';
import globalize from 'lib/globalize';
import Button from 'elements/emby-button/Button';
import Input from 'elements/emby-input/Input';
import ServerConnections from 'components/ServerConnections';
import { useMutation } from '@tanstack/react-query';
import Dashboard from 'utils/dashboard';
export const ForgotPasswordPage = () => {
const navigate = useNavigate();
const [username, setUsername] = useState('');
const apiClient = ServerConnections.currentApiClient();
const forgotPasswordMutation = useMutation({
mutationFn: (enteredUsername: string) => {
if (!apiClient) {
throw new Error('API client is not available');
}
return apiClient.ajax({
type: 'POST',
url: apiClient.getUrl('Users/ForgotPassword'),
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({
EnteredUsername: enteredUsername
})
});
},
onSuccess: (result) => {
if (result.Action == 'ContactAdmin') {
Dashboard.alert({
message: globalize.translate('MessageContactAdminToResetPassword'),
title: globalize.translate('ButtonForgotPassword')
});
}
if (result.Action == 'InNetworkRequired') {
Dashboard.alert({
message: globalize.translate('MessageForgotPasswordInNetworkRequired'),
title: globalize.translate('ButtonForgotPassword')
});
}
if (result.Action == 'PinCode') {
navigate('/forgotpasswordpin');
}
}
});
const handleCancel = useCallback(() => {
navigate(-1);
}, [navigate]);
const handleSubmit = useCallback(async (e: React.FormEvent) => {
e.preventDefault();
forgotPasswordMutation.mutate(username);
}, [username, forgotPasswordMutation]);
const handleUsernameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setUsername(e.target.value);
}, []);
return (
<Page
id='forgotPasswordPage'
className='page standalonePage forgotPasswordPage mainAnimatedPage'
>
<div className='padded-left padded-right padded-bottom-page'>
<form
className='forgotPasswordForm'
style={{ textAlign: 'center', margin: '0 auto' }}
onSubmit={handleSubmit}
>
<div style={{ textAlign: 'left' }}>
<h1>{globalize.translate('ButtonForgotPassword')}</h1>
<div className='inputContainer'>
<Input
type='text'
id='txtName'
label={globalize.translate('LabelUser')}
autoComplete='off'
value={username}
onChange={handleUsernameChange}
/>
<div className='fieldDescription'>
{globalize.translate('LabelForgotPasswordUsernameHelp')}
</div>
</div>
<div>
<Button
type='submit'
id='btnSubmit'
className='raised submit block'
title={globalize.translate('ButtonSubmit')}
/>
<Button
type='button'
id='btnCancel'
className='raised cancel block btnCancel'
title={globalize.translate('ButtonCancel')}
onClick={handleCancel}
/>
</div>
</div>
</form>
</div>
</Page>
);
};
export default ForgotPasswordPage;

24
src/controllers/session/forgotPassword/index.html
View File

@@ -1,24 +0,0 @@
<div data-role="page" id="forgotPasswordPage" class="page standalonePage forgotPasswordPage">
<div class="padded-left padded-right padded-bottom-page">
<form class="forgotPasswordForm" style="text-align: center; margin: 0 auto;">
<div style="text-align: left;">
<h1>${ButtonForgotPassword}</h1>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtName" label="${LabelUser}" autocomplete="off"/>
<div class="fieldDescription">${LabelForgotPasswordUsernameHelp}</div>
</div>
<div>
<button is="emby-button" type="submit" class="raised submit block">
<span>${ButtonSubmit}</span>
</button>
<button is="emby-button" type="button" class="raised cancel block btnCancel" onclick="history.back();">
<span>${ButtonCancel}</span>
</button>
</div>
</div>
</form>
</div>
</div>

56
src/controllers/session/forgotPassword/index.js
View File

@@ -1,56 +0,0 @@
import globalize from 'lib/globalize';
import Dashboard from 'utils/dashboard';
function processForgotPasswordResult(result) {
if (result.Action == 'ContactAdmin') {
Dashboard.alert({
message: globalize.translate('MessageContactAdminToResetPassword'),
title: globalize.translate('ButtonForgotPassword')
});
return;
}
if (result.Action == 'InNetworkRequired') {
Dashboard.alert({
message: globalize.translate('MessageForgotPasswordInNetworkRequired'),
title: globalize.translate('ButtonForgotPassword')
});
return;
}
if (result.Action == 'PinCode') {
let msg = globalize.translate('MessageForgotPasswordFileCreated');
msg += '<br/>';
msg += '<br/>';
msg += 'Enter PIN here to finish Password Reset<br/>';
msg += '<br/>';
msg += result.PinFile;
msg += '<br/>';
Dashboard.alert({
message: msg,
title: globalize.translate('ButtonForgotPassword'),
callback: function () {
Dashboard.navigate('forgotpasswordpin');
}
});
}
}
export default function (view) {
function onSubmit(e) {
ApiClient.ajax({
type: 'POST',
url: ApiClient.getUrl('Users/ForgotPassword'),
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({
EnteredUsername: view.querySelector('#txtName').value
})
}).then(processForgotPasswordResult);
e.preventDefault();
return false;
}
view.querySelector('form').addEventListener('submit', onSubmit);
}