From 9efc39f828d56be6b1cd954793053bb93ec329bf Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Wed, 29 Jun 2022 02:17:10 +0300
Subject: [PATCH] Refactoring duplicate code

---
 .../dashboard/elements/ButtonElement.tsx      |  41 +++++++
 .../dashboard/elements/CheckBoxElement.tsx    |  57 +++++++++
 .../dashboard/elements/IconButtonElement.tsx  |  49 ++++++++
 .../{users => elements}/InputElement.tsx      |   0
 .../elements/SectionTitleContainer.tsx        |  42 +++++++
 .../SectionTitleLinkElement.tsx               |   0
 .../dashboard/elements/SelectElement.tsx      |  38 ++++++
 .../dashboard/users/AccessContainer.tsx       |   8 +-
 .../dashboard/users/AccessScheduleList.tsx    |  21 ++--
 .../dashboard/users/BlockedTagList.tsx        |  22 ++--
 .../dashboard/users/ButtonElement.tsx         |  32 -----
 .../dashboard/users/CheckBoxElement.tsx       |  36 ------
 .../dashboard/users/CheckBoxListItem.tsx      |  41 -------
 .../users/SectionTitleButtonElement.tsx       |  34 ------
 .../dashboard/users/SectionTitleContainer.tsx |  35 ------
 .../dashboard/users/SelectElement.tsx         |  44 -------
 .../users/SelectMaxParentalRating.tsx         |  47 -------
 .../users/SelectSyncPlayAccessElement.tsx     |  35 ------
 .../dashboard/users/UserCardBox.tsx           |  31 +++--
 .../dashboard/users/UserPasswordForm.tsx      |  17 +--
 src/components/pages/NewUserPage.tsx          |  38 +++---
 src/components/pages/UserEditPage.tsx         | 115 ++++++++++--------
 .../pages/UserLibraryAccessPage.tsx           |  42 ++++---
 src/components/pages/UserParentalControl.tsx  | 101 +++++++--------
 src/components/pages/UserPasswordPage.tsx     |  12 +-
 src/components/pages/UserProfilePage.tsx      |  20 +--
 src/components/pages/UserProfilesPage.tsx     |  20 +--
 27 files changed, 462 insertions(+), 516 deletions(-)
 create mode 100644 src/components/dashboard/elements/ButtonElement.tsx
 create mode 100644 src/components/dashboard/elements/CheckBoxElement.tsx
 create mode 100644 src/components/dashboard/elements/IconButtonElement.tsx
 rename src/components/dashboard/{users => elements}/InputElement.tsx (100%)
 create mode 100644 src/components/dashboard/elements/SectionTitleContainer.tsx
 rename src/components/dashboard/{users => elements}/SectionTitleLinkElement.tsx (100%)
 create mode 100644 src/components/dashboard/elements/SelectElement.tsx
 delete mode 100644 src/components/dashboard/users/ButtonElement.tsx
 delete mode 100644 src/components/dashboard/users/CheckBoxElement.tsx
 delete mode 100644 src/components/dashboard/users/CheckBoxListItem.tsx
 delete mode 100644 src/components/dashboard/users/SectionTitleButtonElement.tsx
 delete mode 100644 src/components/dashboard/users/SectionTitleContainer.tsx
 delete mode 100644 src/components/dashboard/users/SelectElement.tsx
 delete mode 100644 src/components/dashboard/users/SelectMaxParentalRating.tsx
 delete mode 100644 src/components/dashboard/users/SelectSyncPlayAccessElement.tsx

diff --git a/src/components/dashboard/elements/ButtonElement.tsx b/src/components/dashboard/elements/ButtonElement.tsx
new file mode 100644
index 0000000000..a872166b0a
--- /dev/null
+++ b/src/components/dashboard/elements/ButtonElement.tsx
@@ -0,0 +1,41 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/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;
diff --git a/src/components/dashboard/elements/CheckBoxElement.tsx b/src/components/dashboard/elements/CheckBoxElement.tsx
new file mode 100644
index 0000000000..16b8fb28b7
--- /dev/null
+++ b/src/components/dashboard/elements/CheckBoxElement.tsx
@@ -0,0 +1,57 @@
+import escapeHTML from 'escape-html';
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+const createCheckBoxElement = ({ labelClassName, className, id, dataFilter, dataItemType, dataId, checkedAttribute, renderContent }: { labelClassName?: string, type?: string, className?: string, id?: string, dataFilter?: string, dataItemType?: string, dataId?: string, checkedAttribute?: string, renderContent?: string }) => ({
+    __html: `<label ${labelClassName}>
+        <input
+            is="emby-checkbox"
+            type="checkbox"
+            class="${className}"
+            ${id}
+            ${dataFilter}
+            ${dataItemType}
+            ${dataId}
+            ${checkedAttribute}
+        />
+        ${renderContent}
+    </label>`
+});
+
+type IProps = {
+    labelClassName?: string;
+    className?: string;
+    elementId?: string;
+    dataFilter?: string;
+    itemType?: string;
+    itemId?: string;
+    itemAppName?: string;
+    itemCheckedAttribute?: string;
+    itemName?: string
+    title?: string
+}
+
+const CheckBoxElement: FunctionComponent<IProps> = ({ labelClassName, className, elementId, dataFilter, itemType, itemId, itemAppName, itemCheckedAttribute, itemName, title }: IProps) => {
+    const appName = itemAppName ? `- ${itemAppName}` : '';
+    const renderContent = itemName ?
+        `<span>${escapeHTML(itemName || '')} ${appName}</span>` :
+        `<span>${globalize.translate(title)}</span>`;
+
+    return (
+        <div
+            className='sectioncheckbox'
+            dangerouslySetInnerHTML={createCheckBoxElement({
+                labelClassName: labelClassName ? `class='${labelClassName}'` : '',
+                className: className,
+                id: elementId ? `id='${elementId}'` : '',
+                dataFilter: dataFilter ? `data-filter='${dataFilter}'` : '',
+                dataItemType: itemType ? `data-itemtype='${itemType}'` : '',
+                dataId: itemId ? `data-id='${itemId}'` : '',
+                checkedAttribute: itemCheckedAttribute ? itemCheckedAttribute : '',
+                renderContent: renderContent
+            })}
+        />
+    );
+};
+
+export default CheckBoxElement;
diff --git a/src/components/dashboard/elements/IconButtonElement.tsx b/src/components/dashboard/elements/IconButtonElement.tsx
new file mode 100644
index 0000000000..919e4d5cef
--- /dev/null
+++ b/src/components/dashboard/elements/IconButtonElement.tsx
@@ -0,0 +1,49 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+type IProps = {
+    is?: string;
+    type?: string;
+    id?: string;
+    title?: string;
+    className?: string;
+    icon?: string,
+    dataIndex?: string | number;
+    dataTag?: string | number;
+    dataProfileid?: string | number;
+}
+
+const createIconButtonElement = ({ is, type, id, className, title, icon, dataIndex, dataTag, dataProfileid }: IProps) => ({
+    __html: `<button
+        is="${is}"
+        type="${type}"
+        ${id}
+        class="${className}"
+        ${title}
+        ${dataIndex}
+        ${dataTag}
+        ${dataProfileid}
+    >
+        <span class="material-icons ${icon}" aria-hidden="true"></span>
+    </button>`
+});
+
+const IconButtonElement: FunctionComponent<IProps> = ({ is, type, id, className, title, icon, dataIndex, dataTag, dataProfileid }: IProps) => {
+    return (
+        <div
+            dangerouslySetInnerHTML={createIconButtonElement({
+                is: is,
+                type: type,
+                id: id ? `id="${id}"` : '',
+                className: className,
+                title: title ? `title="${globalize.translate(title)}"` : '',
+                icon: icon,
+                dataIndex: dataIndex ? `data-index="${dataIndex}"` : '',
+                dataTag: dataTag ? `data-tag="${dataTag}"` : '',
+                dataProfileid: dataProfileid ? `data-profileid="${dataProfileid}"` : ''
+            })}
+        />
+    );
+};
+
+export default IconButtonElement;
diff --git a/src/components/dashboard/users/InputElement.tsx b/src/components/dashboard/elements/InputElement.tsx
similarity index 100%
rename from src/components/dashboard/users/InputElement.tsx
rename to src/components/dashboard/elements/InputElement.tsx
diff --git a/src/components/dashboard/elements/SectionTitleContainer.tsx b/src/components/dashboard/elements/SectionTitleContainer.tsx
new file mode 100644
index 0000000000..3749713ada
--- /dev/null
+++ b/src/components/dashboard/elements/SectionTitleContainer.tsx
@@ -0,0 +1,42 @@
+import React, { FunctionComponent } from 'react';
+import IconButtonElement from './IconButtonElement';
+import SectionTitleLinkElement from './SectionTitleLinkElement';
+
+type IProps = {
+    SectionClassName?: string;
+    title?: string;
+    isBtnVisible?: boolean;
+    btnId?: string;
+    btnClassName?: string;
+    btnTitle?: string;
+    btnIcon?: string;
+    isLinkVisible?: boolean;
+    url?: string;
+}
+const SectionTitleContainer: FunctionComponent<IProps> = ({SectionClassName, title, isBtnVisible = false, btnId, btnClassName, btnTitle, btnIcon, isLinkVisible = true, url}: IProps) => {
+    return (
+        <div className={`${SectionClassName} sectionTitleContainer flex align-items-center`}>
+            <h2 className='sectionTitle'>
+                {title}
+            </h2>
+
+            {isBtnVisible && <IconButtonElement
+                is='emby-button'
+                type='button'
+                id={btnId}
+                className={btnClassName}
+                title={btnTitle}
+                icon={btnIcon}
+            />}
+
+            {isLinkVisible && <SectionTitleLinkElement
+                className='raised button-alt headerHelpButton'
+                title='Help'
+                url={url}
+            />}
+
+        </div>
+    );
+};
+
+export default SectionTitleContainer;
diff --git a/src/components/dashboard/users/SectionTitleLinkElement.tsx b/src/components/dashboard/elements/SectionTitleLinkElement.tsx
similarity index 100%
rename from src/components/dashboard/users/SectionTitleLinkElement.tsx
rename to src/components/dashboard/elements/SectionTitleLinkElement.tsx
diff --git a/src/components/dashboard/elements/SelectElement.tsx b/src/components/dashboard/elements/SelectElement.tsx
new file mode 100644
index 0000000000..bcabc35834
--- /dev/null
+++ b/src/components/dashboard/elements/SelectElement.tsx
@@ -0,0 +1,38 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+const createSelectElement = ({ name, id, required, label, option }: { name?: string, id?: string, required?: string, label?: string, option?: React.ReactNode }) => ({
+    __html: `<select
+        is="emby-select"
+        ${name}
+        id="${id}"
+        ${required}
+        label="${label}"
+    >
+        ${option}
+    </select>`
+});
+
+type IProps = {
+    name?: string;
+    id?: string;
+    required?: string;
+    label?: string;
+    children?: React.ReactNode
+}
+
+const SelectElement: FunctionComponent<IProps> = ({ name, id, required, label, children }: IProps) => {
+    return (
+        <div
+            dangerouslySetInnerHTML={createSelectElement({
+                name: name ? `name='${name}'` : '',
+                id: id,
+                required: required ? `required='${required}'` : '',
+                label: globalize.translate(label),
+                option: children
+            })}
+        />
+    );
+};
+
+export default SelectElement;
diff --git a/src/components/dashboard/users/AccessContainer.tsx b/src/components/dashboard/users/AccessContainer.tsx
index 5c0d6341b7..13680070de 100644
--- a/src/components/dashboard/users/AccessContainer.tsx
+++ b/src/components/dashboard/users/AccessContainer.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
-import CheckBoxElement from './CheckBoxElement';
+import CheckBoxElement from '../elements/CheckBoxElement';
 
 type IProps = {
     containerClassName?: string;
@@ -18,7 +18,11 @@ const AccessContainer: FunctionComponent<IProps> = ({containerClassName, headerT
     return (
         <div className={containerClassName}>
             <h2>{globalize.translate(headerTitle)}</h2>
-            <CheckBoxElement labelClassName='checkboxContainer' type='checkbox' className={checkBoxClassName} title={checkBoxTitle} />
+            <CheckBoxElement
+                labelClassName='checkboxContainer'
+                className={checkBoxClassName}
+                title={checkBoxTitle}
+            />
             <div className={listContainerClassName}>
                 <div className={accessClassName}>
                     <h3 className='checkboxListLabel'>
diff --git a/src/components/dashboard/users/AccessScheduleList.tsx b/src/components/dashboard/users/AccessScheduleList.tsx
index 1e788d796f..6549f9e199 100644
--- a/src/components/dashboard/users/AccessScheduleList.tsx
+++ b/src/components/dashboard/users/AccessScheduleList.tsx
@@ -1,17 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import datetime from '../../../scripts/datetime';
 import globalize from '../../../scripts/globalize';
-
-const createButtonElement = (index: number) => ({
-    __html: `<button
-        type='button'
-        is='paper-icon-button-light'
-        class='btnDelete listItemButton'
-        data-index='${index}'
-    >
-        <span class='material-icons delete' aria-hidden='true' />
-    </button>`
-});
+import IconButtonElement from '../elements/IconButtonElement';
 
 type IProps = {
     index: number;
@@ -48,8 +38,13 @@ const AccessScheduleList: FunctionComponent<IProps> = ({index, DayOfWeek, StartH
                     {getDisplayTime(StartHour) + ' - ' + getDisplayTime(EndHour)}
                 </div>
             </div>
-            <div
-                dangerouslySetInnerHTML={createButtonElement(index)}
+            <IconButtonElement
+                is='paper-icon-button-light'
+                type='button'
+                className='btnDelete listItemButton'
+                title='Delete'
+                icon='delete'
+                dataIndex={index}
             />
         </div>
     );
diff --git a/src/components/dashboard/users/BlockedTagList.tsx b/src/components/dashboard/users/BlockedTagList.tsx
index 8f686381f4..4c46d30a57 100644
--- a/src/components/dashboard/users/BlockedTagList.tsx
+++ b/src/components/dashboard/users/BlockedTagList.tsx
@@ -1,15 +1,5 @@
 import React, { FunctionComponent } from 'react';
-
-const createButtonElement = (tag?: string) => ({
-    __html: `<button
-        type='button'
-        is='paper-icon-button-light'
-        class='blockedTag btnDeleteTag listItemButton'
-        data-tag='${tag}'
-    >
-        <span class='material-icons delete' aria-hidden='true' />
-    </button>`
-});
+import IconButtonElement from '../elements/IconButtonElement';
 
 type IProps = {
     tag?: string;
@@ -24,11 +14,15 @@ const BlockedTagList: FunctionComponent<IProps> = ({tag}: IProps) => {
                         {tag}
                     </h3>
                 </div>
-                <div
-                    dangerouslySetInnerHTML={createButtonElement(tag)}
+                <IconButtonElement
+                    is='paper-icon-button-light'
+                    type='button'
+                    className='blockedTag btnDeleteTag listItemButton'
+                    title='Delete'
+                    icon='delete'
+                    dataTag={tag}
                 />
             </div>
-
         </div>
     );
 };
diff --git a/src/components/dashboard/users/ButtonElement.tsx b/src/components/dashboard/users/ButtonElement.tsx
deleted file mode 100644
index c63a1feeb8..0000000000
--- a/src/components/dashboard/users/ButtonElement.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createButtonElement = ({ type, className, title }: { type?: string, className?: string, title?: string }) => ({
-    __html: `<button
-        is="emby-button"
-        type="${type}"
-        class="${className}"
-        >
-        <span>${title}</span>
-    </button>`
-});
-
-type IProps = {
-    type?: string;
-    className?: string;
-    title?: string
-}
-
-const ButtonElement: FunctionComponent<IProps> = ({ type, className, title }: IProps) => {
-    return (
-        <div
-            dangerouslySetInnerHTML={createButtonElement({
-                type: type,
-                className: className,
-                title: globalize.translate(title)
-            })}
-        />
-    );
-};
-
-export default ButtonElement;
diff --git a/src/components/dashboard/users/CheckBoxElement.tsx b/src/components/dashboard/users/CheckBoxElement.tsx
deleted file mode 100644
index 36136e393a..0000000000
--- a/src/components/dashboard/users/CheckBoxElement.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createCheckBoxElement = ({ labelClassName, type, className, title }: { labelClassName?: string, type?: string, className?: string, title?: string }) => ({
-    __html: `<label class="${labelClassName}">
-        <input
-            is="emby-checkbox"
-            type="${type}"
-            class="${className}"
-        />
-        <span>${title}</span>
-    </label>`
-});
-
-type IProps = {
-    labelClassName?: string;
-    type?: string;
-    className?: string;
-    title?: string
-}
-
-const CheckBoxElement: FunctionComponent<IProps> = ({ labelClassName, type, className, title }: IProps) => {
-    return (
-        <div
-            className='sectioncheckbox'
-            dangerouslySetInnerHTML={createCheckBoxElement({
-                labelClassName: labelClassName ? labelClassName : '',
-                type: type,
-                className: className,
-                title: globalize.translate(title)
-            })}
-        />
-    );
-};
-
-export default CheckBoxElement;
diff --git a/src/components/dashboard/users/CheckBoxListItem.tsx b/src/components/dashboard/users/CheckBoxListItem.tsx
deleted file mode 100644
index 02f7560e5f..0000000000
--- a/src/components/dashboard/users/CheckBoxListItem.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import escapeHtml from 'escape-html';
-import React, { FunctionComponent } from 'react';
-
-type IProps = {
-    className?: string;
-    Name?: string;
-    Id?: string;
-    ItemType?: string;
-    AppName?: string;
-    checkedAttribute?: string;
-}
-
-const createCheckBoxElement = ({className, Name, dataAttributes, AppName, checkedAttribute}: {className?: string, Name?: string, dataAttributes?: string, AppName?: string, checkedAttribute?: string}) => ({
-    __html: `<label>
-        <input
-            type="checkbox"
-            is="emby-checkbox"
-            class="${className}"
-            ${dataAttributes} ${checkedAttribute}
-        />
-        <span>${escapeHtml(Name || '')} ${AppName}</span>
-    </label>`
-});
-
-const CheckBoxListItem: FunctionComponent<IProps> = ({className, Name, Id, ItemType, AppName, checkedAttribute}: IProps) => {
-    return (
-        <div
-            className='sectioncheckbox'
-            dangerouslySetInnerHTML={createCheckBoxElement({
-                className: className,
-                Name: Name,
-                dataAttributes: ItemType ? `data-itemtype='${ItemType}'` : `data-id='${Id}'`,
-                AppName: AppName ? `- ${AppName}` : '',
-                checkedAttribute: checkedAttribute
-            })}
-        />
-    );
-};
-
-export default CheckBoxListItem;
-
diff --git a/src/components/dashboard/users/SectionTitleButtonElement.tsx b/src/components/dashboard/users/SectionTitleButtonElement.tsx
deleted file mode 100644
index 1c0c8de22a..0000000000
--- a/src/components/dashboard/users/SectionTitleButtonElement.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-type IProps = {
-    title: string;
-    className?: string;
-    icon: string,
-}
-
-const createButtonElement = ({ className, title, icon }: { className?: string, title: string, icon: string }) => ({
-    __html: `<button
-        is="emby-button"
-        type="button"
-        class="${className}"
-        style="margin-left:1em;"
-        title="${title}"
-    >
-        <span class="material-icons ${icon}" aria-hidden="true"></span>
-    </button>`
-});
-
-const SectionTitleButtonElement: FunctionComponent<IProps> = ({ className, title, icon }: IProps) => {
-    return (
-        <div
-            dangerouslySetInnerHTML={createButtonElement({
-                className: className,
-                title: globalize.translate(title),
-                icon: icon
-            })}
-        />
-    );
-};
-
-export default SectionTitleButtonElement;
diff --git a/src/components/dashboard/users/SectionTitleContainer.tsx b/src/components/dashboard/users/SectionTitleContainer.tsx
deleted file mode 100644
index e5e4b8952a..0000000000
--- a/src/components/dashboard/users/SectionTitleContainer.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import SectionTitleButtonElement from './SectionTitleButtonElement';
-import SectionTitleLinkElement from './SectionTitleLinkElement';
-
-type IProps = {
-    title: string;
-    isBtnVisible?: boolean;
-    titleLink?: string;
-}
-
-const SectionTitleContainer: FunctionComponent<IProps> = ({title, isBtnVisible = false, titleLink}: IProps) => {
-    return (
-        <div className='verticalSection'>
-            <div className='sectionTitleContainer flex align-items-center'>
-                <h2 className='sectionTitle'>
-                    {title}
-                </h2>
-
-                {isBtnVisible && <SectionTitleButtonElement
-                    className='fab btnAddUser submit sectionTitleButton'
-                    title='ButtonAddUser'
-                    icon='add'
-                />}
-
-                <SectionTitleLinkElement
-                    className='raised button-alt headerHelpButton'
-                    title='Help'
-                    url={titleLink}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default SectionTitleContainer;
diff --git a/src/components/dashboard/users/SelectElement.tsx b/src/components/dashboard/users/SelectElement.tsx
deleted file mode 100644
index 329dd9b575..0000000000
--- a/src/components/dashboard/users/SelectElement.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import escapeHtml from 'escape-html';
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createSelectElement = ({ className, label, option }: { className?: string, label: string, option: string[] }) => ({
-    __html: `<select
-        class="${className}"
-        is="emby-select"
-        label="${label}"
-        >
-        ${option}
-    </select>`
-});
-
-type ProvidersArr = {
-    Name?: string;
-    Id?: string;
-}
-
-type IProps = {
-    className?: string;
-    label?: string;
-    currentProviderId: string;
-    providers: ProvidersArr[]
-}
-
-const SelectElement: FunctionComponent<IProps> = ({ className, label, currentProviderId, providers }: IProps) => {
-    const renderOption = providers.map((provider) => {
-        const selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
-        return '<option value="' + provider.Id + '"' + selected + '>' + escapeHtml(provider.Name) + '</option>';
-    });
-
-    return (
-        <div
-            dangerouslySetInnerHTML={createSelectElement({
-                className: className,
-                label: globalize.translate(label),
-                option: renderOption
-            })}
-        />
-    );
-};
-
-export default SelectElement;
diff --git a/src/components/dashboard/users/SelectMaxParentalRating.tsx b/src/components/dashboard/users/SelectMaxParentalRating.tsx
deleted file mode 100644
index d1865b29e7..0000000000
--- a/src/components/dashboard/users/SelectMaxParentalRating.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import escapeHtml from 'escape-html';
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createSelectElement = ({ className, label, option }: { className?: string, label: string, option: string }) => ({
-    __html: `<select
-        class="${className}"
-        is="emby-select"
-        label="${label}"
-    >
-        <option value=''></option>
-        ${option}
-    </select>`
-});
-
-type RatingsArr = {
-    Name: string;
-    Value: number;
-}
-
-type IProps = {
-    className?: string;
-    label?: string;
-    parentalRatings: RatingsArr[];
-}
-
-const SelectMaxParentalRating: FunctionComponent<IProps> = ({ className, label, parentalRatings }: IProps) => {
-    const renderOption = () => {
-        let content = '';
-        for (const rating of parentalRatings) {
-            content += `<option value='${rating.Value}'>${escapeHtml(rating.Name)}</option>`;
-        }
-        return content;
-    };
-
-    return (
-        <div
-            dangerouslySetInnerHTML={createSelectElement({
-                className: className,
-                label: globalize.translate(label),
-                option: renderOption()
-            })}
-        />
-    );
-};
-
-export default SelectMaxParentalRating;
diff --git a/src/components/dashboard/users/SelectSyncPlayAccessElement.tsx b/src/components/dashboard/users/SelectSyncPlayAccessElement.tsx
deleted file mode 100644
index ca4a664794..0000000000
--- a/src/components/dashboard/users/SelectSyncPlayAccessElement.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-const createSelectElement = ({ className, id, label }: { className?: string, id?: string, label: string }) => ({
-    __html: `<select
-        class="${className}"
-        is="emby-select"
-        id="${id}"
-        label="${label}"
-        >
-        <option value='CreateAndJoinGroups'>${globalize.translate('LabelSyncPlayAccessCreateAndJoinGroups')}</option>
-        <option value='JoinGroups'>${globalize.translate('LabelSyncPlayAccessJoinGroups')}</option>
-        <option value='None'>${globalize.translate('LabelSyncPlayAccessNone')}</option>
-    </select>`
-});
-
-type IProps = {
-    className?: string;
-    id?: string;
-    label?: string
-}
-
-const SelectSyncPlayAccessElement: FunctionComponent<IProps> = ({ className, id, label }: IProps) => {
-    return (
-        <div
-            dangerouslySetInnerHTML={createSelectElement({
-                className: className,
-                id: id,
-                label: globalize.translate(label)
-            })}
-        />
-    );
-};
-
-export default SelectSyncPlayAccessElement;
diff --git a/src/components/dashboard/users/UserCardBox.tsx b/src/components/dashboard/users/UserCardBox.tsx
index 28d38cce5a..285ccfe3ce 100644
--- a/src/components/dashboard/users/UserCardBox.tsx
+++ b/src/components/dashboard/users/UserCardBox.tsx
@@ -4,6 +4,8 @@ import { formatDistanceToNow } from 'date-fns';
 import { localeWithSuffix } from '../../../scripts/dfnshelper';
 import globalize from '../../../scripts/globalize';
 import cardBuilder from '../../cardbuilder/cardBuilder';
+import IconButtonElement from '../elements/IconButtonElement';
+import escapeHTML from 'escape-html';
 
 const createLinkElement = ({ user, renderImgUrl }: { user: UserDto, renderImgUrl: string }) => ({
     __html: `<a
@@ -15,16 +17,6 @@ const createLinkElement = ({ user, renderImgUrl }: { user: UserDto, renderImgUrl
     </a>`
 });
 
-const createButtonElement = () => ({
-    __html: `<button
-        is="paper-icon-button-light"
-        type="button"
-        class="btnUserMenu flex-shrink-zero"
-        >
-        <span class="material-icons more_vert" aria-hidden="true"></span>
-    </button>`
-});
-
 type IProps = {
     user?: UserDto;
 }
@@ -81,16 +73,21 @@ const UserCardBox: FunctionComponent<IProps> = ({ user = {} }: IProps) => {
                     />
                 </div>
                 <div className='cardFooter visualCardBox-cardFooter'>
-                    <div className='cardText flex align-items-center'>
-                        <div className='flex-grow' style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
-                            {user.Name}
-                        </div>
-                        <div
-                            dangerouslySetInnerHTML={createButtonElement()}
+                    <div
+                        style={{textAlign: 'right', float: 'right', paddingTop: '5px'}}
+                    >
+                        <IconButtonElement
+                            is='paper-icon-button-light'
+                            type='button'
+                            className='btnUserMenu flex-shrink-zero'
+                            icon='more_vert'
                         />
                     </div>
+                    <div className='cardText'>
+                        <span>{escapeHTML(user.Name)}</span>
+                    </div>
                     <div className='cardText cardText-secondary'>
-                        {lastSeen != '' ? lastSeen : ''}
+                        <span>{lastSeen != '' ? lastSeen : ''}</span>
                     </div>
                 </div>
             </div>
diff --git a/src/components/dashboard/users/UserPasswordForm.tsx b/src/components/dashboard/users/UserPasswordForm.tsx
index e387090949..bc2e3d9fa9 100644
--- a/src/components/dashboard/users/UserPasswordForm.tsx
+++ b/src/components/dashboard/users/UserPasswordForm.tsx
@@ -6,9 +6,9 @@ import LibraryMenu from '../../../scripts/libraryMenu';
 import confirm from '../../confirm/confirm';
 import loading from '../../loading/loading';
 import toast from '../../toast/toast';
-import ButtonElement from './ButtonElement';
-import CheckBoxElement from './CheckBoxElement';
-import InputElement from './InputElement';
+import ButtonElement from '../elements/ButtonElement';
+import CheckBoxElement from '../elements/CheckBoxElement';
+import InputElement from '../elements/InputElement';
 
 type IProps = {
     userId: string;
@@ -206,8 +206,8 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
         (page.querySelector('.updatePasswordForm') as HTMLFormElement).addEventListener('submit', onSubmit);
         (page.querySelector('.localAccessForm') as HTMLFormElement).addEventListener('submit', onLocalAccessSubmit);
 
-        (page.querySelector('.btnResetEasyPassword') as HTMLButtonElement).addEventListener('click', resetEasyPassword);
-        (page.querySelector('.btnResetPassword') as HTMLButtonElement).addEventListener('click', resetPassword);
+        (page.querySelector('#btnResetEasyPassword') as HTMLButtonElement).addEventListener('click', resetEasyPassword);
+        (page.querySelector('#btnResetPassword') as HTMLButtonElement).addEventListener('click', resetPassword);
     }, [loadUser, userId]);
 
     return (
@@ -250,7 +250,8 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
                         />
                         <ButtonElement
                             type='button'
-                            className='raised btnResetPassword button-cancel block hide'
+                            id='btnResetPassword'
+                            className='raised button-cancel block hide'
                             title='ResetPassword'
                         />
                     </div>
@@ -281,7 +282,6 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
                     <br />
                     <div className='checkboxContainer checkboxContainer-withDescription'>
                         <CheckBoxElement
-                            type='checkbox'
                             className='chkEnableLocalEasyPassword'
                             title='LabelInNetworkSignInWithEasyPassword'
                         />
@@ -297,7 +297,8 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
                         />
                         <ButtonElement
                             type='button'
-                            className='raised btnResetEasyPassword button-cancel block hide'
+                            id='btnResetEasyPassword'
+                            className='raised button-cancel block hide'
                             title='ButtonResetEasyPassword'
                         />
                     </div>
diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx
index 3f94055dae..6961917ccd 100644
--- a/src/components/pages/NewUserPage.tsx
+++ b/src/components/pages/NewUserPage.tsx
@@ -4,11 +4,11 @@ import Dashboard from '../../utils/dashboard';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
 import toast from '../toast/toast';
-import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
-import InputElement from '../dashboard/users/InputElement';
-import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
-import ButtonElement from '../dashboard/users/ButtonElement';
+import SectionTitleContainer from '../dashboard/elements/SectionTitleContainer';
+import InputElement from '../dashboard/elements/InputElement';
+import ButtonElement from '../dashboard/elements/ButtonElement';
 import AccessContainer from '../dashboard/users/AccessContainer';
+import CheckBoxElement from '../dashboard/elements/CheckBoxElement';
 
 type userInput = {
     Name?: string;
@@ -169,7 +169,7 @@ const NewUserPage: FunctionComponent = () => {
 
         (page.querySelector('.newUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
 
-        (page.querySelector('.button-cancel') as HTMLButtonElement).addEventListener('click', function() {
+        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
             window.history.back();
         });
     }, [loadUser]);
@@ -177,10 +177,13 @@ const NewUserPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <SectionTitleContainer
-                    title={globalize.translate('HeaderAddUser')}
-                    titleLink='https://docs.jellyfin.org/general/server/users/'
-                />
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={globalize.translate('HeaderAddUser')}
+                        url='https://docs.jellyfin.org/general/server/users/'
+                    />
+                </div>
+
                 <form className='newUserProfileForm'>
                     <div className='inputContainer'>
                         <InputElement
@@ -208,12 +211,11 @@ const NewUserPage: FunctionComponent = () => {
                         description='LibraryAccessHelp'
                     >
                         {mediaFoldersItems.map(Item => (
-                            <CheckBoxListItem
+                            <CheckBoxElement
                                 key={Item.Id}
                                 className='chkFolder'
-                                Id={Item.Id}
-                                Name={Item.Name}
-                                checkedAttribute=''
+                                itemId={Item.Id}
+                                itemName={Item.Name}
                             />
                         ))}
                     </AccessContainer>
@@ -229,12 +231,11 @@ const NewUserPage: FunctionComponent = () => {
                         description='ChannelAccessHelp'
                     >
                         {channelsItems.map(Item => (
-                            <CheckBoxListItem
+                            <CheckBoxElement
                                 key={Item.Id}
                                 className='chkChannel'
-                                Id={Item.Id}
-                                Name={Item.Name}
-                                checkedAttribute=''
+                                itemId={Item.Id}
+                                itemName={Item.Name}
                             />
                         ))}
                     </AccessContainer>
@@ -246,7 +247,8 @@ const NewUserPage: FunctionComponent = () => {
                         />
                         <ButtonElement
                             type='button'
-                            className='raised button-cancel block btnCancel'
+                            id='btnCancel'
+                            className='raised button-cancel block'
                             title='ButtonCancel'
                         />
                     </div>
diff --git a/src/components/pages/UserEditPage.tsx b/src/components/pages/UserEditPage.tsx
index dce189c696..d08f213472 100644
--- a/src/components/pages/UserEditPage.tsx
+++ b/src/components/pages/UserEditPage.tsx
@@ -3,18 +3,17 @@ import React, { FunctionComponent, useCallback, useEffect, useState, useRef } fr
 import Dashboard from '../../utils/dashboard';
 import globalize from '../../scripts/globalize';
 import LibraryMenu from '../../scripts/libraryMenu';
-import ButtonElement from '../dashboard/users/ButtonElement';
-import CheckBoxElement from '../dashboard/users/CheckBoxElement';
-import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
-import InputElement from '../dashboard/users/InputElement';
+import ButtonElement from '../dashboard/elements/ButtonElement';
+import CheckBoxElement from '../dashboard/elements/CheckBoxElement';
+import InputElement from '../dashboard/elements/InputElement';
 import LinkEditUserPreferences from '../dashboard/users/LinkEditUserPreferences';
-import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
-import SelectElement from '../dashboard/users/SelectElement';
-import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement';
+import SectionTitleContainer from '../dashboard/elements/SectionTitleContainer';
 import SectionTabs from '../dashboard/users/SectionTabs';
 import loading from '../loading/loading';
 import toast from '../toast/toast';
 import { getParameterByName } from '../../utils/url';
+import escapeHTML from 'escape-html';
+import SelectElement from '../dashboard/elements/SelectElement';
 
 type ItemsArr = {
     Name?: string;
@@ -22,11 +21,16 @@ type ItemsArr = {
     checkedAttribute: string
 }
 
+type ProvidersArr = {
+    Name?: string;
+    Id?: string;
+}
+
 const UserEditPage: FunctionComponent = () => {
     const [ userName, setUserName ] = useState('');
     const [ deleteFoldersAccess, setDeleteFoldersAccess ] = useState<ItemsArr[]>([]);
-    const [ authProviders, setAuthProviders ] = useState([]);
-    const [ passwordResetProviders, setPasswordResetProviders ] = useState([]);
+    const [ authProviders, setAuthProviders ] = useState<ProvidersArr[]>([]);
+    const [ passwordResetProviders, setPasswordResetProviders ] = useState<ItemsArr[]>([]);
 
     const [ authenticationProviderId, setAuthenticationProviderId ] = useState('');
     const [ passwordResetProviderId, setPasswordResetProviderId ] = useState('');
@@ -172,7 +176,7 @@ const UserEditPage: FunctionComponent = () => {
         (page.querySelector('#txtLoginAttemptsBeforeLockout') as HTMLInputElement).value = user.Policy.LoginAttemptsBeforeLockout || '0';
         (page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value = user.Policy.MaxActiveSessions || '0';
         if (window.ApiClient.isMinServerVersion('10.6.0')) {
-            (page.querySelector('#selectSyncPlayAccess') as HTMLInputElement).value = user.Policy.SyncPlayAccess;
+            (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value = user.Policy.SyncPlayAccess;
         }
         loading.hide();
     }, [loadAuthProviders, loadPasswordResetProviders, loadDeleteFolders ]);
@@ -227,8 +231,8 @@ const UserEditPage: FunctionComponent = () => {
             user.Policy.RemoteClientBitrateLimit = Math.floor(1e6 * parseFloat((page.querySelector('#txtRemoteClientBitrateLimit') as HTMLInputElement).value || '0'));
             user.Policy.LoginAttemptsBeforeLockout = parseInt((page.querySelector('#txtLoginAttemptsBeforeLockout') as HTMLInputElement).value || '0');
             user.Policy.MaxActiveSessions = parseInt((page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value || '0');
-            user.Policy.AuthenticationProviderId = (page.querySelector('.selectLoginProvider') as HTMLInputElement).value;
-            user.Policy.PasswordResetProviderId = (page.querySelector('.selectPasswordResetProvider') as HTMLInputElement).value;
+            user.Policy.AuthenticationProviderId = (page.querySelector('#selectLoginProvider') as HTMLSelectElement).value;
+            user.Policy.PasswordResetProviderId = (page.querySelector('#selectPasswordResetProvider') as HTMLSelectElement).value;
             user.Policy.EnableContentDeletion = (page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement).checked;
             user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (c) {
                 return c.checked;
@@ -236,7 +240,7 @@ const UserEditPage: FunctionComponent = () => {
                 return c.getAttribute('data-id');
             });
             if (window.ApiClient.isMinServerVersion('10.6.0')) {
-                user.Policy.SyncPlayAccess = (page.querySelector('#selectSyncPlayAccess') as HTMLInputElement).value as SyncPlayUserAccessType;
+                user.Policy.SyncPlayAccess = (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value as SyncPlayUserAccessType;
             }
             window.ApiClient.updateUser(user).then(function () {
                 window.ApiClient.updateUserPolicy(user.Id || '', user.Policy || {}).then(function () {
@@ -270,18 +274,39 @@ const UserEditPage: FunctionComponent = () => {
 
         (page.querySelector('.editUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
 
-        (page.querySelector('.button-cancel') as HTMLButtonElement).addEventListener('click', function() {
+        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
             window.history.back();
         });
     }, [loadData]);
 
+    const optionLoginProvider = authProviders.map((provider) => {
+        const selected = provider.Id === authenticationProviderId || authProviders.length < 2 ? ' selected' : '';
+        return `<option value="${provider.Id}"${selected}>${escapeHTML(provider.Name)}</option>`;
+    });
+
+    const optionPasswordResetProvider = passwordResetProviders.map((provider) => {
+        const selected = provider.Id === passwordResetProviderId || passwordResetProviders.length < 2 ? ' selected' : '';
+        return `<option value="${provider.Id}"${selected}>${escapeHTML(provider.Name)}</option>`;
+    });
+
+    const optionSyncPlayAccess = () => {
+        let content = '';
+        content += `<option value='CreateAndJoinGroups'>${globalize.translate('LabelSyncPlayAccessCreateAndJoinGroups')}</option>`;
+        content += `<option value='JoinGroups'>${globalize.translate('LabelSyncPlayAccessJoinGroups')}</option>`;
+        content += `<option value='None'>${globalize.translate('LabelSyncPlayAccessNone')}</option>`;
+        return content;
+    };
+
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <SectionTitleContainer
-                    title={userName}
-                    titleLink='https://docs.jellyfin.org/general/server/users/'
-                />
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={userName}
+                        url='https://docs.jellyfin.org/general/server/users/'
+                    />
+                </div>
+
                 <SectionTabs activeTab='useredit'/>
                 <div
                     className='lnkEditUserPreferencesContainer'
@@ -313,29 +338,29 @@ const UserEditPage: FunctionComponent = () => {
                     </div>
                     <div className='selectContainer fldSelectLoginProvider hide'>
                         <SelectElement
-                            className= 'selectLoginProvider'
-                            label= 'LabelAuthProvider'
-                            currentProviderId={authenticationProviderId}
-                            providers={authProviders}
-                        />
+                            id='selectLoginProvider'
+                            label='LabelAuthProvider'
+                        >
+                            {optionLoginProvider}
+                        </SelectElement>
+
                         <div className='fieldDescription'>
                             {globalize.translate('AuthProviderHelp')}
                         </div>
                     </div>
                     <div className='selectContainer fldSelectPasswordResetProvider hide'>
                         <SelectElement
-                            className= 'selectPasswordResetProvider'
-                            label= 'LabelPasswordResetProvider'
-                            currentProviderId={passwordResetProviderId}
-                            providers={passwordResetProviders}
-                        />
+                            id='selectPasswordResetProvider'
+                            label='LabelPasswordResetProvider'
+                        >
+                            {optionPasswordResetProvider}
+                        </SelectElement>
                         <div className='fieldDescription'>
                             {globalize.translate('PasswordResetProviderHelp')}
                         </div>
                     </div>
                     <div className='checkboxContainer checkboxContainer-withDescription fldRemoteAccess hide'>
                         <CheckBoxElement
-                            type='checkbox'
                             className='chkRemoteAccess'
                             title='AllowRemoteAccess'
                         />
@@ -345,7 +370,6 @@ const UserEditPage: FunctionComponent = () => {
                     </div>
                     <CheckBoxElement
                         labelClassName='checkboxContainer'
-                        type='checkbox'
                         className='chkIsAdmin'
                         title='OptionAllowUserToManageServer'
                     />
@@ -355,12 +379,10 @@ const UserEditPage: FunctionComponent = () => {
                         </h2>
                         <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableLiveTvAccess'
                                 title='OptionAllowBrowsingLiveTv'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkManageLiveTv'
                                 title='OptionAllowManageLiveTv'
                             />
@@ -372,27 +394,22 @@ const UserEditPage: FunctionComponent = () => {
                         </h2>
                         <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableMediaPlayback'
                                 title='OptionAllowMediaPlayback'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableAudioPlaybackTranscoding'
                                 title='OptionAllowAudioPlaybackTranscoding'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableVideoPlaybackTranscoding'
                                 title='OptionAllowVideoPlaybackTranscoding'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableVideoPlaybackRemuxing'
                                 title='OptionAllowVideoPlaybackRemuxing'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkForceRemoteSourceTranscoding'
                                 title='OptionForceRemoteSourceTranscoding'
                             />
@@ -420,11 +437,12 @@ const UserEditPage: FunctionComponent = () => {
                     </div>
                     <div className='verticalSection'>
                         <div className='selectContainer fldSelectSyncPlayAccess'>
-                            <SelectSyncPlayAccessElement
-                                className='selectSyncPlayAccess'
+                            <SelectElement
                                 id='selectSyncPlayAccess'
                                 label='LabelSyncPlayAccess'
-                            />
+                            >
+                                {optionSyncPlayAccess()}
+                            </SelectElement>
                             <div className='fieldDescription'>
                                 {globalize.translate('SyncPlayAccessHelp')}
                             </div>
@@ -437,18 +455,17 @@ const UserEditPage: FunctionComponent = () => {
                         <div className='checkboxList paperList checkboxList-paperList'>
                             <CheckBoxElement
                                 labelClassName='checkboxContainer'
-                                type='checkbox'
                                 className='chkEnableDeleteAllFolders'
                                 title='AllLibraries'
                             />
                             <div className='deleteAccess'>
                                 {deleteFoldersAccess.map(Item => (
-                                    <CheckBoxListItem
+                                    <CheckBoxElement
                                         key={Item.Id}
                                         className='chkFolder'
-                                        Id={Item.Id}
-                                        Name={Item.Name}
-                                        checkedAttribute={Item.checkedAttribute}
+                                        itemId={Item.Id}
+                                        itemName={Item.Name}
+                                        itemCheckedAttribute={Item.checkedAttribute}
                                     />
                                 ))}
                             </div>
@@ -460,12 +477,10 @@ const UserEditPage: FunctionComponent = () => {
                         </h2>
                         <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableRemoteControlOtherUsers'
                                 title='OptionAllowRemoteControlOthers'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkRemoteControlSharedDevices'
                                 title='OptionAllowRemoteSharedDevices'
                             />
@@ -479,7 +494,6 @@ const UserEditPage: FunctionComponent = () => {
                     </h2>
                     <div className='checkboxContainer checkboxContainer-withDescription'>
                         <CheckBoxElement
-                            type='checkbox'
                             className='chkEnableDownloading'
                             title='OptionAllowContentDownload'
                         />
@@ -489,7 +503,6 @@ const UserEditPage: FunctionComponent = () => {
                     </div>
                     <div className='checkboxContainer checkboxContainer-withDescription' id='fldIsEnabled'>
                         <CheckBoxElement
-                            type='checkbox'
                             className='chkDisabled'
                             title='OptionDisableUser'
                         />
@@ -499,7 +512,6 @@ const UserEditPage: FunctionComponent = () => {
                     </div>
                     <div className='checkboxContainer checkboxContainer-withDescription' id='fldIsHidden'>
                         <CheckBoxElement
-                            type='checkbox'
                             className='chkIsHidden'
                             title='OptionHideUser'
                         />
@@ -550,7 +562,8 @@ const UserEditPage: FunctionComponent = () => {
                         />
                         <ButtonElement
                             type='button'
-                            className='raised button-cancel block btnCancel'
+                            id='btnCancel'
+                            className='raised button-cancel block'
                             title='ButtonCancel'
                         />
                     </div>
diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx
index 0ffea1565f..06400af89a 100644
--- a/src/components/pages/UserLibraryAccessPage.tsx
+++ b/src/components/pages/UserLibraryAccessPage.tsx
@@ -6,11 +6,11 @@ import libraryMenu from '../../scripts/libraryMenu';
 import globalize from '../../scripts/globalize';
 import toast from '../toast/toast';
 import SectionTabs from '../dashboard/users/SectionTabs';
-import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
-import ButtonElement from '../dashboard/users/ButtonElement';
+import ButtonElement from '../dashboard/elements/ButtonElement';
 import { getParameterByName } from '../../utils/url';
-import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
+import SectionTitleContainer from '../dashboard/elements/SectionTitleContainer';
 import AccessContainer from '../dashboard/users/AccessContainer';
+import CheckBoxElement from '../dashboard/elements/CheckBoxElement';
 
 type ItemsArr = {
     Name?: string;
@@ -228,10 +228,12 @@ const UserLibraryAccessPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <SectionTitleContainer
-                    title={userName}
-                    titleLink='https://docs.jellyfin.org/general/server/users/'
-                />
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={userName}
+                        url='https://docs.jellyfin.org/general/server/users/'
+                    />
+                </div>
                 <SectionTabs activeTab='userlibraryaccess'/>
                 <form className='userLibraryAccessForm'>
                     <AccessContainer
@@ -245,12 +247,12 @@ const UserLibraryAccessPage: FunctionComponent = () => {
                         description='LibraryAccessHelp'
                     >
                         {mediaFoldersItems.map(Item => (
-                            <CheckBoxListItem
+                            <CheckBoxElement
                                 key={Item.Id}
                                 className='chkFolder'
-                                Id={Item.Id}
-                                Name={Item.Name}
-                                checkedAttribute={Item.checkedAttribute}
+                                itemId={Item.Id}
+                                itemName={Item.Name}
+                                itemCheckedAttribute={Item.checkedAttribute}
                             />
                         ))}
                     </AccessContainer>
@@ -266,12 +268,12 @@ const UserLibraryAccessPage: FunctionComponent = () => {
                         description='ChannelAccessHelp'
                     >
                         {channelsItems.map(Item => (
-                            <CheckBoxListItem
+                            <CheckBoxElement
                                 key={Item.Id}
                                 className='chkChannel'
-                                Id={Item.Id}
-                                Name={Item.Name}
-                                checkedAttribute={Item.checkedAttribute}
+                                itemId={Item.Id}
+                                itemName={Item.Name}
+                                itemCheckedAttribute={Item.checkedAttribute}
                             />
                         ))}
                     </AccessContainer>
@@ -287,13 +289,13 @@ const UserLibraryAccessPage: FunctionComponent = () => {
                         description='DeviceAccessHelp'
                     >
                         {devicesItems.map(Item => (
-                            <CheckBoxListItem
+                            <CheckBoxElement
                                 key={Item.Id}
                                 className='chkDevice'
-                                Id={Item.Id}
-                                Name={Item.Name}
-                                AppName={Item.AppName}
-                                checkedAttribute={Item.checkedAttribute}
+                                itemId={Item.Id}
+                                itemName={Item.Name}
+                                itemAppName={Item.AppName}
+                                itemCheckedAttribute={Item.checkedAttribute}
                             />
                         ))}
                     </AccessContainer>
diff --git a/src/components/pages/UserParentalControl.tsx b/src/components/pages/UserParentalControl.tsx
index 7744d790b2..435f6c3831 100644
--- a/src/components/pages/UserParentalControl.tsx
+++ b/src/components/pages/UserParentalControl.tsx
@@ -4,15 +4,15 @@ import globalize from '../../scripts/globalize';
 import LibraryMenu from '../../scripts/libraryMenu';
 import AccessScheduleList from '../dashboard/users/AccessScheduleList';
 import BlockedTagList from '../dashboard/users/BlockedTagList';
-import ButtonElement from '../dashboard/users/ButtonElement';
-import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
-import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement';
-import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
-import SelectMaxParentalRating from '../dashboard/users/SelectMaxParentalRating';
+import ButtonElement from '../dashboard/elements/ButtonElement';
+import SectionTitleContainer from '../dashboard/elements/SectionTitleContainer';
 import SectionTabs from '../dashboard/users/SectionTabs';
 import loading from '../loading/loading';
 import toast from '../toast/toast';
 import { getParameterByName } from '../../utils/url';
+import CheckBoxElement from '../dashboard/elements/CheckBoxElement';
+import escapeHTML from 'escape-html';
+import SelectElement from '../dashboard/elements/SelectElement';
 
 type RatingsArr = {
     Name: string;
@@ -181,7 +181,7 @@ const UserParentalControl: FunctionComponent = () => {
             }
         }
 
-        (page.querySelector('.selectMaxParentalRating') as HTMLInputElement).value = ratingValue;
+        (page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value = ratingValue;
 
         if (user.Policy.IsAdministrator) {
             (page.querySelector('.accessScheduleSection') as HTMLDivElement).classList.add('hide');
@@ -226,7 +226,7 @@ const UserParentalControl: FunctionComponent = () => {
                 throw new Error('Unexpected null user.Policy');
             }
 
-            user.Policy.MaxParentalRating = parseInt((page.querySelector('.selectMaxParentalRating') as HTMLInputElement).value || '0', 10) || null;
+            user.Policy.MaxParentalRating = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value || '0', 10) || null;
             user.Policy.BlockUnratedItems = Array.prototype.filter.call(page.querySelectorAll('.chkUnratedItem'), function (i) {
                 return i.checked;
             }).map(function (i) {
@@ -299,7 +299,7 @@ const UserParentalControl: FunctionComponent = () => {
             return false;
         };
 
-        (page.querySelector('.btnAddSchedule') as HTMLButtonElement).addEventListener('click', function () {
+        (page.querySelector('#btnAddSchedule') as HTMLButtonElement).addEventListener('click', function () {
             showSchedulePopup({
                 Id: 0,
                 UserId: '',
@@ -309,28 +309,40 @@ const UserParentalControl: FunctionComponent = () => {
             }, -1);
         });
 
-        (page.querySelector('.btnAddBlockedTag') as HTMLButtonElement).addEventListener('click', function () {
+        (page.querySelector('#btnAddBlockedTag') as HTMLButtonElement).addEventListener('click', function () {
             showBlockedTagPopup();
         });
 
         (page.querySelector('.userParentalControlForm') as HTMLFormElement).addEventListener('submit', onSubmit);
     }, [loadBlockedTags, loadData, renderAccessSchedule]);
 
+    const optionMaxParentalRating = () => {
+        let content = '';
+        content += '<option value=\'\'></option>';
+        for (const rating of parentalRatings) {
+            content += `<option value='${rating.Value}'>${escapeHTML(rating.Name)}</option>`;
+        }
+        return content;
+    };
+
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <SectionTitleContainer
-                    title={userName}
-                    titleLink='https://docs.jellyfin.org/general/server/users/'
-                />
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={userName}
+                        url='https://docs.jellyfin.org/general/server/users/'
+                    />
+                </div>
                 <SectionTabs activeTab='userparentalcontrol'/>
                 <form className='userParentalControlForm'>
                     <div className='selectContainer'>
-                        <SelectMaxParentalRating
-                            className= 'selectMaxParentalRating'
-                            label= 'LabelMaxParentalRating'
-                            parentalRatings={parentalRatings}
-                        />
+                        <SelectElement
+                            id='selectMaxParentalRating'
+                            label='LabelMaxParentalRating'
+                        >
+                            {optionMaxParentalRating()}
+                        </SelectElement>
                         <div className='fieldDescription'>
                             {globalize.translate('MaxParentalRatingHelp')}
                         </div>
@@ -342,12 +354,12 @@ const UserParentalControl: FunctionComponent = () => {
                             </h3>
                             <div className='checkboxList paperList' style={{ padding: '.5em 1em' }}>
                                 {unratedItems.map(Item => {
-                                    return <CheckBoxListItem
+                                    return <CheckBoxElement
                                         key={Item.value}
                                         className='chkUnratedItem'
-                                        ItemType={Item.value}
-                                        Name={Item.name}
-                                        checkedAttribute={Item.checkedAttribute}
+                                        itemType={Item.value}
+                                        itemName={Item.name}
+                                        itemCheckedAttribute={Item.checkedAttribute}
                                     />;
                                 })}
                             </div>
@@ -355,19 +367,16 @@ const UserParentalControl: FunctionComponent = () => {
                     </div>
                     <br />
                     <div className='verticalSection' style={{marginBottom: '2em'}}>
-                        <div
-                            className='detailSectionHeader sectionTitleContainer'
-                            style={{display: 'flex', alignItems: 'center', paddingBottom: '1em'}}
-                        >
-                            <h2 className='sectionTitle'>
-                                {globalize.translate('LabelBlockContentWithTags')}
-                            </h2>
-                            <SectionTitleButtonElement
-                                className='fab btnAddBlockedTag submit'
-                                title='Add'
-                                icon='add'
-                            />
-                        </div>
+                        <SectionTitleContainer
+                            SectionClassName='detailSectionHeader'
+                            title={globalize.translate('LabelBlockContentWithTags')}
+                            isBtnVisible={true}
+                            btnId='btnAddBlockedTag'
+                            btnClassName='fab submit sectionTitleButton'
+                            btnTitle='Add'
+                            btnIcon='add'
+                            isLinkVisible={false}
+                        />
                         <div className='blockedTags' style={{marginTop: '.5em'}}>
                             {blockedTags.map((tag, index) => {
                                 return <BlockedTagList
@@ -378,19 +387,15 @@ const UserParentalControl: FunctionComponent = () => {
                         </div>
                     </div>
                     <div className='accessScheduleSection verticalSection' style={{marginBottom: '2em'}}>
-                        <div
-                            className='sectionTitleContainer'
-                            style={{display: 'flex', alignItems: 'center', paddingBottom: '1em'}}
-                        >
-                            <h2 className='sectionTitle'>
-                                {globalize.translate('HeaderAccessSchedule')}
-                            </h2>
-                            <SectionTitleButtonElement
-                                className='fab btnAddSchedule submit'
-                                title='Add'
-                                icon='add'
-                            />
-                        </div>
+                        <SectionTitleContainer
+                            title={globalize.translate('HeaderAccessSchedule')}
+                            isBtnVisible={true}
+                            btnId='btnAddSchedule'
+                            btnClassName='fab submit sectionTitleButton'
+                            btnTitle='Add'
+                            btnIcon='add'
+                            isLinkVisible={false}
+                        />
                         <p>{globalize.translate('HeaderAccessScheduleHelp')}</p>
                         <div className='accessScheduleList paperList'>
                             {accessSchedules.map((accessSchedule, index) => {
diff --git a/src/components/pages/UserPasswordPage.tsx b/src/components/pages/UserPasswordPage.tsx
index 305e8a4422..f0dac9a484 100644
--- a/src/components/pages/UserPasswordPage.tsx
+++ b/src/components/pages/UserPasswordPage.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent, useCallback, useEffect, useState } from 'reac
 import SectionTabs from '../dashboard/users/SectionTabs';
 import UserPasswordForm from '../dashboard/users/UserPasswordForm';
 import { getParameterByName } from '../../utils/url';
-import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
+import SectionTitleContainer from '../dashboard/elements/SectionTitleContainer';
 
 const UserPasswordPage: FunctionComponent = () => {
     const userId = getParameterByName('userId');
@@ -23,10 +23,12 @@ const UserPasswordPage: FunctionComponent = () => {
     return (
         <div>
             <div className='content-primary'>
-                <SectionTitleContainer
-                    title={userName}
-                    titleLink='https://docs.jellyfin.org/general/server/users/'
-                />
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={userName}
+                        url='https://docs.jellyfin.org/general/server/users/'
+                    />
+                </div>
                 <SectionTabs activeTab='userpassword'/>
                 <div className='readOnlyContent'>
                     <UserPasswordForm
diff --git a/src/components/pages/UserProfilePage.tsx b/src/components/pages/UserProfilePage.tsx
index fe09292093..8862d499b5 100644
--- a/src/components/pages/UserProfilePage.tsx
+++ b/src/components/pages/UserProfilePage.tsx
@@ -6,7 +6,7 @@ import globalize from '../../scripts/globalize';
 import LibraryMenu from '../../scripts/libraryMenu';
 import { appHost } from '../apphost';
 import confirm from '../confirm/confirm';
-import ButtonElement from '../dashboard/users/ButtonElement';
+import ButtonElement from '../dashboard/elements/ButtonElement';
 import UserPasswordForm from '../dashboard/users/UserPasswordForm';
 import loading from '../loading/loading';
 import toast from '../toast/toast';
@@ -57,11 +57,11 @@ const UserProfilePage: FunctionComponent<IProps> = ({userId}: IProps) => {
                 }
 
                 if (user.PrimaryImageTag) {
-                    (page.querySelector('.btnAddImage') as HTMLButtonElement).classList.add('hide');
-                    (page.querySelector('.btnDeleteImage') as HTMLButtonElement).classList.remove('hide');
+                    (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.add('hide');
+                    (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.remove('hide');
                 } else if (appHost.supports('fileinput') && (loggedInUser?.Policy?.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
-                    (page.querySelector('.btnDeleteImage') as HTMLButtonElement).classList.add('hide');
-                    (page.querySelector('.btnAddImage') as HTMLButtonElement).classList.remove('hide');
+                    (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.add('hide');
+                    (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.remove('hide');
                 }
             });
             loading.hide();
@@ -120,7 +120,7 @@ const UserProfilePage: FunctionComponent<IProps> = ({userId}: IProps) => {
             reader.readAsDataURL(file);
         };
 
-        (page.querySelector('.btnDeleteImage') as HTMLButtonElement).addEventListener('click', function () {
+        (page.querySelector('#btnDeleteImage') as HTMLButtonElement).addEventListener('click', function () {
             confirm(
                 globalize.translate('DeleteImageConfirmation'),
                 globalize.translate('DeleteImage')
@@ -133,7 +133,7 @@ const UserProfilePage: FunctionComponent<IProps> = ({userId}: IProps) => {
             });
         });
 
-        (page.querySelector('.btnAddImage') as HTMLButtonElement).addEventListener('click', function () {
+        (page.querySelector('#btnAddImage') as HTMLButtonElement).addEventListener('click', function () {
             const uploadImage = page.querySelector('#uploadImage') as HTMLInputElement;
             uploadImage.value = '';
             uploadImage.click();
@@ -172,12 +172,14 @@ const UserProfilePage: FunctionComponent<IProps> = ({userId}: IProps) => {
                         <br />
                         <ButtonElement
                             type='button'
-                            className='raised btnAddImage hide'
+                            id='btnAddImage'
+                            className='raised button-submit hide'
                             title='ButtonAddImage'
                         />
                         <ButtonElement
                             type='button'
-                            className='raised btnDeleteImage hide'
+                            id='btnDeleteImage'
+                            className='raised button-delete hide'
                             title='DeleteImage'
                         />
                     </div>
diff --git a/src/components/pages/UserProfilesPage.tsx b/src/components/pages/UserProfilesPage.tsx
index 0ad54b817b..d3dcb30cdb 100644
--- a/src/components/pages/UserProfilesPage.tsx
+++ b/src/components/pages/UserProfilesPage.tsx
@@ -6,7 +6,7 @@ import loading from '../loading/loading';
 import dom from '../../scripts/dom';
 import confirm from '../../components/confirm/confirm';
 import UserCardBox from '../dashboard/users/UserCardBox';
-import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
+import SectionTitleContainer from '../dashboard/elements/SectionTitleContainer';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../components/cardbuilder/card.scss';
@@ -124,7 +124,7 @@ const UserProfilesPage: FunctionComponent = () => {
             }
         });
 
-        (page.querySelector('.btnAddUser') as HTMLButtonElement).addEventListener('click', function() {
+        (page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', function() {
             Dashboard.navigate('usernew.html');
         });
     }, []);
@@ -132,11 +132,17 @@ const UserProfilesPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <SectionTitleContainer
-                    title={globalize.translate('HeaderUsers')}
-                    isBtnVisible={true}
-                    titleLink='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
-                />
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={globalize.translate('HeaderUsers')}
+                        isBtnVisible={true}
+                        btnId='btnAddUser'
+                        btnClassName='fab submit sectionTitleButton'
+                        btnTitle='ButtonAddUser'
+                        btnIcon='add'
+                        url='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
+                    />
+                </div>
 
                 <div className='localUsers itemsContainer vertical-wrap'>
                     {users.map(user => {