From cbb365833112c569c48f7e41090f49ce50b5eaea Mon Sep 17 00:00:00 2001
From: David Stensland <me@terite.com>
Date: Sun, 25 Feb 2024 15:45:18 -0800
Subject: [PATCH 1/2] use emby-input/Input instead of InputElement

---
 src/apps/dashboard/routes/users/add.tsx       | 12 +--
 src/apps/dashboard/routes/users/profile.tsx   | 29 ++++----
 src/apps/stable/routes/quickConnect/index.tsx | 35 +++++----
 .../dashboard/users/UserPasswordForm.tsx      | 20 ++---
 src/elements/InputElement.tsx                 | 74 -------------------
 5 files changed, 51 insertions(+), 119 deletions(-)
 delete mode 100644 src/elements/InputElement.tsx

diff --git a/src/apps/dashboard/routes/users/add.tsx b/src/apps/dashboard/routes/users/add.tsx
index ffb8d3dc0..c2ad8df5e 100644
--- a/src/apps/dashboard/routes/users/add.tsx
+++ b/src/apps/dashboard/routes/users/add.tsx
@@ -6,7 +6,7 @@ import globalize from '../../../../lib/globalize';
 import loading from '../../../../components/loading/loading';
 import toast from '../../../../components/toast/toast';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
-import InputElement from '../../../../elements/InputElement';
+import Input from '../../../../elements/emby-input/Input';
 import ButtonElement from '../../../../elements/ButtonElement';
 import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
@@ -194,18 +194,18 @@ const UserNew = () => {
 
                 <form className='newUserProfileForm'>
                     <div className='inputContainer'>
-                        <InputElement
+                        <Input
                             type='text'
                             id='txtUsername'
-                            label='LabelName'
-                            options={'required'}
+                            label={globalize.translate('LabelName')}
+                            required
                         />
                     </div>
                     <div className='inputContainer'>
-                        <InputElement
+                        <Input
                             type='password'
                             id='txtPassword'
-                            label='LabelPassword'
+                            label={globalize.translate('LabelPassword')}
                         />
                     </div>
                     <AccessContainer
diff --git a/src/apps/dashboard/routes/users/profile.tsx b/src/apps/dashboard/routes/users/profile.tsx
index 36afb9ca9..984f4b858 100644
--- a/src/apps/dashboard/routes/users/profile.tsx
+++ b/src/apps/dashboard/routes/users/profile.tsx
@@ -7,8 +7,8 @@ import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import ButtonElement from '../../../../elements/ButtonElement';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
-import InputElement from '../../../../elements/InputElement';
 import LinkButton from '../../../../elements/emby-button/LinkButton';
+import Input from '../../../../elements/emby-input/Input';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import loading from '../../../../components/loading/loading';
@@ -314,11 +314,11 @@ const UserEdit = () => {
                         </div>
                     </div>
                     <div id='fldUserName' className='inputContainer'>
-                        <InputElement
+                        <Input
                             type='text'
                             id='txtUserName'
-                            label='LabelName'
-                            options={'required'}
+                            label={globalize.translate('LabelName')}
+                            required
                         />
                     </div>
                     <div className='selectContainer fldSelectLoginProvider hide'>
@@ -416,11 +416,14 @@ const UserEdit = () => {
                     <br />
                     <div className='verticalSection'>
                         <div className='inputContainer'>
-                            <InputElement
+                            <Input
                                 type='number'
                                 id='txtRemoteClientBitrateLimit'
-                                label='LabelRemoteClientBitrateLimit'
-                                options={'inputMode="decimal" pattern="[0-9]*(.[0-9]+)?" min="{0}" step=".25"'}
+                                label={globalize.translate('LabelRemoteClientBitrateLimit')}
+                                inputMode='decimal'
+                                pattern='[0-9]*(.[0-9]+)?'
+                                min='0'
+                                step='.25'
                             />
                             <div className='fieldDescription'>
                                 {globalize.translate('LabelRemoteClientBitrateLimitHelp')}
@@ -517,11 +520,11 @@ const UserEdit = () => {
                     <br />
                     <div className='verticalSection'>
                         <div className='inputContainer' id='fldLoginAttemptsBeforeLockout'>
-                            <InputElement
+                            <Input
                                 type='number'
                                 id='txtLoginAttemptsBeforeLockout'
-                                label='LabelUserLoginAttemptsBeforeLockout'
-                                options={'min={-1} step={1}'}
+                                label={globalize.translate('LabelUserLoginAttemptsBeforeLockout')}
+                                min={-1} step={1}
                             />
                             <div className='fieldDescription'>
                                 {globalize.translate('OptionLoginAttemptsBeforeLockout')}
@@ -534,11 +537,11 @@ const UserEdit = () => {
                     <br />
                     <div className='verticalSection'>
                         <div className='inputContainer' id='fldMaxActiveSessions'>
-                            <InputElement
+                            <Input
                                 type='number'
                                 id='txtMaxActiveSessions'
-                                label='LabelUserMaxActiveSessions'
-                                options={'min={0} step={1}'}
+                                label={globalize.translate('LabelUserMaxActiveSessions')}
+                                min={0} step={1}
                             />
                             <div className='fieldDescription'>
                                 {globalize.translate('OptionMaxActiveSessions')}
diff --git a/src/apps/stable/routes/quickConnect/index.tsx b/src/apps/stable/routes/quickConnect/index.tsx
index a76488d21..5429be9c8 100644
--- a/src/apps/stable/routes/quickConnect/index.tsx
+++ b/src/apps/stable/routes/quickConnect/index.tsx
@@ -1,10 +1,10 @@
 import { getQuickConnectApi } from '@jellyfin/sdk/lib/utils/api/quick-connect-api';
-import React, { FC, FormEvent, useCallback, useMemo, useState } from 'react';
+import React, { FC, FormEvent, useCallback, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
-import InputElement from 'elements/InputElement';
+import Input from 'elements/emby-input/Input';
 import ButtonElement from 'elements/ButtonElement';
 import { useApi } from 'hooks/useApi';
 
@@ -13,14 +13,12 @@ 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 [ code, setCode ] = useState(searchParams.get('code') ?? '');
     const [ error, setError ] = useState<string>();
     const [ success, setSuccess ] = useState(false);
 
-    const onCodeChange = useCallback((value: string) => {
-        setCode(value);
+    const onCodeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        setCode(event.currentTarget.value);
     }, []);
 
     const onSubmitCode = useCallback((e: FormEvent<HTMLFormElement>) => {
@@ -90,15 +88,20 @@ const QuickConnectPage: FC = () => {
                             </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'"
-                                />
+                                <div className='inputContainer'>
+                                    <Input
+                                        value={code}
+                                        onChange={onCodeChange}
+                                        id='txtQuickConnectCode'
+                                        label={globalize.translate('LabelQuickConnectCode')}
+                                        type='text'
+                                        inputMode='numeric'
+                                        pattern='[0-9\s]*'
+                                        minLength={6}
+                                        required
+                                        autoComplete='off'
+                                    />
+                                </div>
                                 <ButtonElement
                                     type='submit'
                                     className='raised button-submit block'
diff --git a/src/components/dashboard/users/UserPasswordForm.tsx b/src/components/dashboard/users/UserPasswordForm.tsx
index dd3eec0c5..4202e84b4 100644
--- a/src/components/dashboard/users/UserPasswordForm.tsx
+++ b/src/components/dashboard/users/UserPasswordForm.tsx
@@ -6,7 +6,7 @@ import confirm from '../../confirm/confirm';
 import loading from '../../loading/loading';
 import toast from '../../toast/toast';
 import ButtonElement from '../../../elements/ButtonElement';
-import InputElement from '../../../elements/InputElement';
+import Input from '../../../elements/emby-input/Input';
 
 type IProps = {
     userId: string | null;
@@ -158,27 +158,27 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
             >
                 <div className='detailSection'>
                     <div id='fldCurrentPassword' className='inputContainer hide'>
-                        <InputElement
+                        <Input
                             type='password'
                             id='txtCurrentPassword'
-                            label='LabelCurrentPassword'
-                            options={'autoComplete="off"'}
+                            label={globalize.translate('LabelCurrentPassword')}
+                            autoComplete='off'
                         />
                     </div>
                     <div className='inputContainer'>
-                        <InputElement
+                        <Input
                             type='password'
                             id='txtNewPassword'
-                            label='LabelNewPassword'
-                            options={'autoComplete="off"'}
+                            label={globalize.translate('LabelNewPassword')}
+                            autoComplete='off'
                         />
                     </div>
                     <div className='inputContainer'>
-                        <InputElement
+                        <Input
                             type='password'
                             id='txtNewPasswordConfirm'
-                            label='LabelNewPasswordConfirm'
-                            options={'autoComplete="off"'}
+                            label={globalize.translate('LabelNewPasswordConfirm')}
+                            autoComplete='off'
                         />
                     </div>
                     <br />
diff --git a/src/elements/InputElement.tsx b/src/elements/InputElement.tsx
deleted file mode 100644
index ae7e757b6..000000000
--- a/src/elements/InputElement.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { type FC, useCallback, useEffect, useMemo, useRef } from 'react';
-
-import globalize from 'lib/globalize';
-
-interface CreateInputElementParams {
-    type?: string
-    id?: string
-    label?: string
-    initialValue?: string
-    options?: string
-}
-
-const createInputElement = ({ type, id, label, initialValue, options }: CreateInputElementParams) => ({
-    __html: `<input
-        is="emby-input"
-        type="${type}"
-        id="${id}"
-        label="${label}"
-        value="${initialValue}"
-        ${options}
-    />`
-});
-
-type InputElementProps = {
-    containerClassName?: string
-    onChange?: (value: string) => void
-} & CreateInputElementParams;
-
-const InputElement: FC<InputElementProps> = ({
-    containerClassName,
-    initialValue,
-    onChange = () => { /* no-op */ },
-    type,
-    id,
-    label,
-    options = ''
-}) => {
-    const container = useRef<HTMLDivElement>(null);
-
-    // NOTE: We need to memoize the input html because any re-render will break the webcomponent
-    const inputHtml = useMemo(() => (
-        createInputElement({
-            type,
-            id,
-            label: globalize.translate(label),
-            initialValue,
-            options
-        })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ), []);
-
-    const onInput = useCallback((e: Event) => {
-        onChange((e.target as HTMLInputElement).value);
-    }, [ onChange ]);
-
-    useEffect(() => {
-        const inputElement = container?.current?.querySelector<HTMLInputElement>('input');
-        inputElement?.addEventListener('input', onInput);
-
-        return () => {
-            inputElement?.removeEventListener('input', onInput);
-        };
-    }, [ container, onInput ]);
-
-    return (
-        <div
-            ref={container}
-            className={containerClassName}
-            dangerouslySetInnerHTML={inputHtml}
-        />
-    );
-};
-
-export default InputElement;

From 9d604b5a516bd38e31a309269e85298afda1d327 Mon Sep 17 00:00:00 2001
From: David Stensland <me@terite.com>
Date: Sun, 25 Feb 2024 16:56:14 -0800
Subject: [PATCH 2/2] use emby-button/Button instead of ButtonElement

---
 src/apps/dashboard/routes/users/access.tsx    |  6 +--
 src/apps/dashboard/routes/users/add.tsx       | 10 ++---
 .../routes/users/parentalcontrol.tsx          |  6 +--
 src/apps/dashboard/routes/users/profile.tsx   | 10 ++---
 src/apps/stable/routes/quickConnect/index.tsx |  4 +-
 src/apps/stable/routes/user/userprofile.tsx   | 10 ++---
 .../dashboard/users/UserPasswordForm.tsx      | 10 ++---
 src/elements/ButtonElement.tsx                | 42 -------------------
 8 files changed, 28 insertions(+), 70 deletions(-)
 delete mode 100644 src/elements/ButtonElement.tsx

diff --git a/src/apps/dashboard/routes/users/access.tsx b/src/apps/dashboard/routes/users/access.tsx
index f2394f966..cac8e71f3 100644
--- a/src/apps/dashboard/routes/users/access.tsx
+++ b/src/apps/dashboard/routes/users/access.tsx
@@ -6,7 +6,7 @@ import loading from '../../../../components/loading/loading';
 import globalize from '../../../../lib/globalize';
 import toast from '../../../../components/toast/toast';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
-import ButtonElement from '../../../../elements/ButtonElement';
+import Button from '../../../../elements/emby-button/Button';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
@@ -316,10 +316,10 @@ const UserLibraryAccess = () => {
                     </AccessContainer>
                     <br />
                     <div>
-                        <ButtonElement
+                        <Button
                             type='submit'
                             className='raised button-submit block'
-                            title='Save'
+                            title={globalize.translate('Save')}
                         />
                     </div>
                 </form>
diff --git a/src/apps/dashboard/routes/users/add.tsx b/src/apps/dashboard/routes/users/add.tsx
index c2ad8df5e..f1d105253 100644
--- a/src/apps/dashboard/routes/users/add.tsx
+++ b/src/apps/dashboard/routes/users/add.tsx
@@ -7,7 +7,7 @@ import loading from '../../../../components/loading/loading';
 import toast from '../../../../components/toast/toast';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import Input from '../../../../elements/emby-input/Input';
-import ButtonElement from '../../../../elements/ButtonElement';
+import Button from '../../../../elements/emby-button/Button';
 import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import Page from '../../../../components/Page';
@@ -248,16 +248,16 @@ const UserNew = () => {
                         ))}
                     </AccessContainer>
                     <div>
-                        <ButtonElement
+                        <Button
                             type='submit'
                             className='raised button-submit block'
-                            title='Save'
+                            title={globalize.translate('Save')}
                         />
-                        <ButtonElement
+                        <Button
                             type='button'
                             id='btnCancel'
                             className='raised button-cancel block'
-                            title='ButtonCancel'
+                            title={globalize.translate('ButtonCancel')}
                         />
                     </div>
                 </form>
diff --git a/src/apps/dashboard/routes/users/parentalcontrol.tsx b/src/apps/dashboard/routes/users/parentalcontrol.tsx
index 116c61522..2e4954259 100644
--- a/src/apps/dashboard/routes/users/parentalcontrol.tsx
+++ b/src/apps/dashboard/routes/users/parentalcontrol.tsx
@@ -8,7 +8,7 @@ import { useSearchParams } from 'react-router-dom';
 import globalize from '../../../../lib/globalize';
 import AccessScheduleList from '../../../../components/dashboard/users/AccessScheduleList';
 import TagList from '../../../../components/dashboard/users/TagList';
-import ButtonElement from '../../../../elements/ButtonElement';
+import Button from '../../../../elements/emby-button/Button';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import loading from '../../../../components/loading/loading';
@@ -480,10 +480,10 @@ const UserParentalControl = () => {
                         </div>
                     </div>
                     <div>
-                        <ButtonElement
+                        <Button
                             type='submit'
                             className='raised button-submit block'
-                            title='Save'
+                            title={globalize.translate('Save')}
                         />
                     </div>
                 </form>
diff --git a/src/apps/dashboard/routes/users/profile.tsx b/src/apps/dashboard/routes/users/profile.tsx
index 984f4b858..32556467c 100644
--- a/src/apps/dashboard/routes/users/profile.tsx
+++ b/src/apps/dashboard/routes/users/profile.tsx
@@ -5,7 +5,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
-import ButtonElement from '../../../../elements/ButtonElement';
+import Button from '../../../../elements/emby-button/Button';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import LinkButton from '../../../../elements/emby-button/LinkButton';
 import Input from '../../../../elements/emby-input/Input';
@@ -553,16 +553,16 @@ const UserEdit = () => {
                     </div>
                     <br />
                     <div>
-                        <ButtonElement
+                        <Button
                             type='submit'
                             className='raised button-submit block'
-                            title='Save'
+                            title={globalize.translate('Save')}
                         />
-                        <ButtonElement
+                        <Button
                             type='button'
                             id='btnCancel'
                             className='raised button-cancel block'
-                            title='ButtonCancel'
+                            title={globalize.translate('ButtonCancel')}
                         />
                     </div>
                 </form>
diff --git a/src/apps/stable/routes/quickConnect/index.tsx b/src/apps/stable/routes/quickConnect/index.tsx
index 5429be9c8..b4dd7d0b9 100644
--- a/src/apps/stable/routes/quickConnect/index.tsx
+++ b/src/apps/stable/routes/quickConnect/index.tsx
@@ -5,7 +5,7 @@ import { Link, useSearchParams } from 'react-router-dom';
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
 import Input from 'elements/emby-input/Input';
-import ButtonElement from 'elements/ButtonElement';
+import Button from 'elements/emby-button/Button';
 import { useApi } from 'hooks/useApi';
 
 import './quickConnect.scss';
@@ -102,7 +102,7 @@ const QuickConnectPage: FC = () => {
                                         autoComplete='off'
                                     />
                                 </div>
-                                <ButtonElement
+                                <Button
                                     type='submit'
                                     className='raised button-submit block'
                                     title={globalize.translate('Authorize')}
diff --git a/src/apps/stable/routes/user/userprofile.tsx b/src/apps/stable/routes/user/userprofile.tsx
index 0c40b2447..51ca84c40 100644
--- a/src/apps/stable/routes/user/userprofile.tsx
+++ b/src/apps/stable/routes/user/userprofile.tsx
@@ -7,7 +7,7 @@ import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import { appHost } from '../../../../components/apphost';
 import confirm from '../../../../components/confirm/confirm';
-import ButtonElement from '../../../../elements/ButtonElement';
+import Button from '../../../../elements/emby-button/Button';
 import UserPasswordForm from '../../../../components/dashboard/users/UserPasswordForm';
 import loading from '../../../../components/loading/loading';
 import toast from '../../../../components/toast/toast';
@@ -197,17 +197,17 @@ const UserProfile: FunctionComponent = () => {
                             {userName}
                         </h2>
                         <br />
-                        <ButtonElement
+                        <Button
                             type='button'
                             id='btnAddImage'
                             className='raised button-submit hide'
-                            title='ButtonAddImage'
+                            title={globalize.translate('ButtonAddImage')}
                         />
-                        <ButtonElement
+                        <Button
                             type='button'
                             id='btnDeleteImage'
                             className='raised hide'
-                            title='DeleteImage'
+                            title={globalize.translate('DeleteImage')}
                         />
                     </div>
                 </div>
diff --git a/src/components/dashboard/users/UserPasswordForm.tsx b/src/components/dashboard/users/UserPasswordForm.tsx
index 4202e84b4..b6e05e41d 100644
--- a/src/components/dashboard/users/UserPasswordForm.tsx
+++ b/src/components/dashboard/users/UserPasswordForm.tsx
@@ -5,7 +5,7 @@ import globalize from '../../../lib/globalize';
 import confirm from '../../confirm/confirm';
 import loading from '../../loading/loading';
 import toast from '../../toast/toast';
-import ButtonElement from '../../../elements/ButtonElement';
+import Button from '../../../elements/emby-button/Button';
 import Input from '../../../elements/emby-input/Input';
 
 type IProps = {
@@ -183,16 +183,16 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
                     </div>
                     <br />
                     <div>
-                        <ButtonElement
+                        <Button
                             type='submit'
                             className='raised button-submit block'
-                            title='SavePassword'
+                            title={globalize.translate('SavePassword')}
                         />
-                        <ButtonElement
+                        <Button
                             type='button'
                             id='btnResetPassword'
                             className='raised button-cancel block hide'
-                            title='ResetPassword'
+                            title={globalize.translate('ResetPassword')}
                         />
                     </div>
                 </div>
diff --git a/src/elements/ButtonElement.tsx b/src/elements/ButtonElement.tsx
deleted file mode 100644
index 379f4f799..000000000
--- a/src/elements/ButtonElement.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import globalize from 'lib/globalize';
-
-const createButtonElement = ({ type, id, className, title, leftIcon, rightIcon }: IProps) => ({
-    __html: `<button
-        is="emby-button"
-        type="${type}"
-        ${id}
-        class="${className}"
-        >
-        ${leftIcon}
-        <span>${title}</span>
-        ${rightIcon}
-    </button>`
-});
-
-type IProps = {
-    type?: string;
-    id?: string;
-    className?: string;
-    title?: string;
-    leftIcon?: string;
-    rightIcon?: string;
-};
-
-const ButtonElement: FunctionComponent<IProps> = ({ type, id, className, title, leftIcon, rightIcon }: IProps) => {
-    return (
-        <div
-            dangerouslySetInnerHTML={createButtonElement({
-                type: type,
-                id: id ? `id="${id}"` : '',
-                className: className,
-                title: globalize.translate(title),
-                leftIcon: leftIcon ? `<span class="material-icons ${leftIcon}" aria-hidden="true"></span>` : '',
-                rightIcon: rightIcon ? `<span class="material-icons ${rightIcon}" aria-hidden="true"></span>` : ''
-            })}
-        />
-    );
-};
-
-export default ButtonElement;