Migrate quick connect page to react

src/apps/experimental/App.tsx

@@ -9,6 +9,8 @@ import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import AppLayout from './AppLayout';
 import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './routes/asyncRoutes';
 import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
+import { REDIRECTS } from 'apps/stable/routes/_redirects';
+import { toRedirectRoute } from 'components/router/Redirect';
 
 const ExperimentalApp = () => {
     return (
@@ -38,7 +40,7 @@ const ExperimentalApp = () => {
                 </Route>
 
                 {/* Redirects for old paths */}
-                <Route path='serveractivity.html' element={<Navigate replace to='/dashboard/activity' />} />
+                {REDIRECTS.map(toRedirectRoute)}
             </Route>
         </Routes>
     );

src/apps/experimental/components/AppToolbar/menus/AppUserMenu.tsx

@@ -140,7 +140,7 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
             <Divider />
             <MenuItem
                 component={Link}
-                to='/mypreferencesquickconnect.html'
+                to='/quickconnect'
                 onClick={onMenuClose}
             >
                 <ListItemIcon>

src/apps/experimental/routes/asyncRoutes/user.ts

@@ -1,6 +1,7 @@
 import { AsyncRoute, AsyncRouteType } from '../../../../components/router/AsyncRoute';
 
 export const ASYNC_USER_ROUTES: AsyncRoute[] = [
+    { path: 'quickconnect', page: 'quickConnect' },
     { path: 'search.html', page: 'search' },
     { path: 'userprofile.html', page: 'user/userprofile' },
     { path: 'home.html', page: 'home', type: AsyncRouteType.Experimental },

src/apps/experimental/routes/legacyRoutes/user.ts

@@ -49,12 +49,6 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             controller: 'user/home/index',
             view: 'user/home/index.html'
         }
-    }, {
-        path: 'mypreferencesquickconnect.html',
-        pageProps: {
-            controller: 'user/quickConnect/index',
-            view: 'user/quickConnect/index.html'
-        }
     }, {
         path: 'mypreferencesplayback.html',
         pageProps: {

src/apps/stable/App.tsx

@@ -10,6 +10,8 @@ import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 
 import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './routes/asyncRoutes';
 import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
+import { REDIRECTS } from './routes/_redirects';
+import { toRedirectRoute } from 'components/router/Redirect';
 
 const Layout = () => (
     <>
@@ -53,7 +55,7 @@ const StableApp = () => (
             <Route path='*' element={null} />
 
             {/* Redirects for old paths */}
-            <Route path='/serveractivity.html' element={<Navigate replace to='/dashboard/activity' />} />
+            {REDIRECTS.map(toRedirectRoute)}
         </Route>
     </Routes>
 );

src/apps/stable/routes/_redirects.ts

@@ -0,0 +1,6 @@
+import type { Redirect } from 'components/router/Redirect';
+
+export const REDIRECTS: Redirect[] = [
+    { from: 'mypreferencesquickconnect.html', to: '/quickconnect' },
+    { from: 'serveractivity.html', to: '/dashboard/activity' }
+];

src/apps/stable/routes/asyncRoutes/user.ts

@@ -1,6 +1,7 @@
 import { AsyncRoute } from '../../../../components/router/AsyncRoute';
 
 export const ASYNC_USER_ROUTES: AsyncRoute[] = [
+    { path: 'quickconnect', page: 'quickConnect' },
     { path: 'search.html', page: 'search' },
     { path: 'userprofile.html', page: 'user/userprofile' }
 ];

src/apps/stable/routes/legacyRoutes/user.ts

@@ -49,12 +49,6 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             controller: 'user/home/index',
             view: 'user/home/index.html'
         }
-    }, {
-        path: 'mypreferencesquickconnect.html',
-        pageProps: {
-            controller: 'user/quickConnect/index',
-            view: 'user/quickConnect/index.html'
-        }
     }, {
         path: 'mypreferencesplayback.html',
         pageProps: {

src/apps/stable/routes/quickConnect/index.tsx

@@ -0,0 +1,91 @@
+import { getQuickConnectApi } from '@jellyfin/sdk/lib/utils/api/quick-connect-api';
+import React, { FC, FormEvent, useCallback, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import Page from 'components/Page';
+import globalize from 'scripts/globalize';
+import InputElement from 'elements/InputElement';
+import ButtonElement from 'elements/ButtonElement';
+import toast from 'components/toast/toast';
+import { useApi } from 'hooks/useApi';
+
+const QuickConnectPage: FC = () => {
+    const { api, user } = useApi();
+    const [ searchParams ] = useSearchParams();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const initialValue = useMemo(() => searchParams.get('code') ?? '', []);
+    const [ code, setCode ] = useState(initialValue);
+
+    const onCodeChange = useCallback((value: string) => {
+        setCode(value);
+    }, []);
+
+    const onSubmitCode = useCallback((e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const form = e.currentTarget;
+
+        if (!form.checkValidity()) {
+            toast(globalize.translate('QuickConnectInvalidCode'));
+            return;
+        }
+
+        if (!api) {
+            console.error('[QuickConnect] cannot authorize, missing api instance');
+            return;
+        }
+
+        const userId = searchParams.get('userId') ?? user?.Id;
+        const normalizedCode = code.replace(/\s/g, '');
+        console.log('[QuickConnect] authorizing code %s as user %s', normalizedCode, userId);
+
+        getQuickConnectApi(api)
+            .authorizeQuickConnect({
+                code: normalizedCode,
+                userId
+            })
+            .then(() => {
+                toast(globalize.translate('QuickConnectAuthorizeSuccess'));
+            })
+            .catch(() => {
+                toast(globalize.translate('QuickConnectAuthorizeFail'));
+            });
+    }, [api, code, searchParams, user?.Id]);
+
+    return (
+        <Page
+            id='quickConnectPreferencesPage'
+            title={globalize.translate('QuickConnect')}
+            className='mainAnimatedPage libraryPage userPreferencesPage noSecondaryNavPage'
+        >
+            <div className='padded-left padded-right padded-bottom-page'>
+                <form onSubmit={onSubmitCode}>
+                    <div className='verticalSection'>
+                        <h2 className='sectionTitle'>
+                            {globalize.translate('QuickConnect')}
+                        </h2>
+                        <div>
+                            {globalize.translate('QuickConnectDescription')}
+                        </div>
+                        <br />
+                        <InputElement
+                            containerClassName='inputContainer'
+                            initialValue={initialValue}
+                            onChange={onCodeChange}
+                            id='txtQuickConnectCode'
+                            label='LabelQuickConnectCode'
+                            type='text'
+                            options="inputmode='numeric' pattern='[0-9\s]*' minlength='6' required autocomplete='off'"
+                        />
+                        <ButtonElement
+                            type='submit'
+                            className='raised button-submit block'
+                            title={globalize.translate('Authorize')}
+                        />
+                    </div>
+                </form>
+            </div>
+        </Page>
+    );
+};
+
+export default QuickConnectPage;