mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Update quick connect success/error ui

Browse source
This commit is contained in:
Bill Thornton 2023-09-16 03:02:55 -04:00
parent a405577519
commit 8553807c0d
3 changed files with 55 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/apps/stable/routes/quickConnect/index.tsx
View file

@ -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>

7
src/apps/stable/routes/quickConnect/quickConnect.scss Normal file
View file

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