Update quick connect success/error ui

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

@@ -1,20 +1,23 @@
 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 { Link, 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';
 
+import './quickConnect.scss';
+
 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 [ error, setError ] = useState<string>();
+    const [ success, setSuccess ] = useState(false);
 
     const onCodeChange = useCallback((value: string) => {
         setCode(value);
@@ -22,15 +25,17 @@ const QuickConnectPage: FC = () => {
 
     const onSubmitCode = useCallback((e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        const form = e.currentTarget;
+        setError(undefined);
 
+        const form = e.currentTarget;
         if (!form.checkValidity()) {
-            toast(globalize.translate('QuickConnectInvalidCode'));
+            setError('QuickConnectInvalidCode');
             return;
         }
 
         if (!api) {
             console.error('[QuickConnect] cannot authorize, missing api instance');
+            setError('UnknownError');
             return;
         }
 
@@ -44,10 +49,10 @@ const QuickConnectPage: FC = () => {
                 userId
             })
             .then(() => {
-                toast(globalize.translate('QuickConnectAuthorizeSuccess'));
+                setSuccess(true);
             })
             .catch(() => {
-                toast(globalize.translate('QuickConnectAuthorizeFail'));
+                setError('QuickConnectAuthorizeFail');
             });
     }, [api, code, searchParams, user?.Id]);
 
@@ -67,20 +72,40 @@ const QuickConnectPage: FC = () => {
                             {globalize.translate('QuickConnectDescription')}
                         </div>
                         <br />
-                        <InputElement
+
-                            containerClassName='inputContainer'
+                        {error && (
-                            initialValue={initialValue}
+                            <div className='quickConnectError'>
-                            onChange={onCodeChange}
+                                {globalize.translate(error)}
-                            id='txtQuickConnectCode'
+                            </div>
-                            label='LabelQuickConnectCode'
+                        )}
-                            type='text'
+
-                            options="inputmode='numeric' pattern='[0-9\s]*' minlength='6' required autocomplete='off'"
+                        {success ? (
-                        />
+                            <div style={{ textAlign: 'center' }}>
-                        <ButtonElement
+                                <p>
-                            type='submit'
+                                    {globalize.translate('QuickConnectAuthorizeSuccess')}
-                            className='raised button-submit block'
+                                </p>
-                            title={globalize.translate('Authorize')}
+                                <Link to='/home.html' className='button-link emby-button'>
-                        />
+                                    {globalize.translate('GoHome')}
+                                </Link>
+                            </div>
+                        ) : (
+                            <>
+                                <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>

src/apps/stable/routes/quickConnect/quickConnect.scss

@@ -0,0 +1,7 @@
+.quickConnectError {
+    border-radius: 0.2em;
+    background-color: #160b0b;
+    color: #f4c7c3;
+    padding: 0.7em 0.5em;
+    margin-bottom: 1em;
+}

src/strings/en-us.json

@@ -297,6 +297,7 @@
     "Genre": "Genre",
     "Genres": "Genres",
     "GetThePlugin": "Get the Plugin",
+    "GoHome": "Go Home",
     "GoogleCastUnsupported": "Google Cast Unsupported",
     "GroupBySeries": "Group by series",
     "GroupVersions": "Group versions",
@@ -1358,7 +1359,7 @@
     "QuickConnectActivationSuccessful": "Successfully activated",
     "QuickConnectAuthorizeCode": "Enter code {0} to login",
     "QuickConnectAuthorizeFail": "Unknown Quick Connect code",
-    "QuickConnectAuthorizeSuccess": "Request authorized",
+    "QuickConnectAuthorizeSuccess": "You have successfully authenticated your device!",
     "QuickConnectDeactivated": "Quick Connect was deactivated before the login request could be approved",
     "QuickConnectDescription": "To sign in with Quick Connect, select the 'Quick Connect' button on the device you are logging in from and enter the displayed code below.",
     "QuickConnectInvalidCode": "Invalid Quick Connect code",
@@ -1554,6 +1555,7 @@
     "Typewriter": "Typewriter",
     "Uniform": "Uniform",
     "UninstallPluginConfirmation": "Are you sure you wish to uninstall {0}?",
+    "UnknownError": "An unknown error occurred.",
     "Unmute": "Unmute",
     "Unplayed": "Unplayed",
     "Unrated": "Unrated",