From 8553807c0d41c107ce5c55821f329ef7d6edfd16 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Sat, 16 Sep 2023 03:02:55 -0400
Subject: [PATCH] Update quick connect success/error ui

---
 src/apps/stable/routes/quickConnect/index.tsx | 65 +++++++++++++------
 .../routes/quickConnect/quickConnect.scss     |  7 ++
 src/strings/en-us.json                        |  4 +-
 3 files changed, 55 insertions(+), 21 deletions(-)
 create mode 100644 src/apps/stable/routes/quickConnect/quickConnect.scss

diff --git a/src/apps/stable/routes/quickConnect/index.tsx b/src/apps/stable/routes/quickConnect/index.tsx
index 1887b90a1..8bff06c7a 100644
--- a/src/apps/stable/routes/quickConnect/index.tsx
+++ b/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'
-                            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')}
-                        />
+
+                        {error && (
+                            <div className='quickConnectError'>
+                                {globalize.translate(error)}
+                            </div>
+                        )}
+
+                        {success ? (
+                            <div style={{ textAlign: 'center' }}>
+                                <p>
+                                    {globalize.translate('QuickConnectAuthorizeSuccess')}
+                                </p>
+                                <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>
diff --git a/src/apps/stable/routes/quickConnect/quickConnect.scss b/src/apps/stable/routes/quickConnect/quickConnect.scss
new file mode 100644
index 000000000..d81e71561
--- /dev/null
+++ b/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;
+}
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index bc6dc0da0..551026c25 100644
--- a/src/strings/en-us.json
+++ b/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",