rebase

src/components/dashboard/users/ButtonElement.tsx

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+const createButtonElement = ({ type, className, title }) => ({
+    __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;

src/components/dashboard/users/CheckBoxElement.tsx

@@ -0,0 +1,33 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+const createCheckBoxElement = ({ type, className, title }) => ({
+    __html: `<label>
+        <input
+            is="emby-checkbox"
+            type="${type}"
+            class="${className}"
+        />
+        <span>${title}</span>
+    </label>`
+});
+
+type IProps = {
+    type?: string;
+    className?: string;
+    title?: string
+}
+
+const CheckBoxElement: FunctionComponent<IProps> = ({ type, className, title }: IProps) => {
+    return (
+        <div
+            dangerouslySetInnerHTML={createCheckBoxElement({
+                type: type,
+                className: className,
+                title: globalize.translate(title)
+            })}
+        />
+    );
+};
+
+export default CheckBoxElement;

src/components/dashboard/users/InputElement.tsx

@@ -0,0 +1,34 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+const createInputElement = ({ type, id, label, options }) => ({
+    __html: `<input
+        is="emby-input"
+        type="${type}"
+        id="${id}"
+        label="${label}"
+        ${options}
+    />`
+});
+
+type IProps = {
+    type?: string;
+    id?: string;
+    label?: string;
+    options?: string
+}
+
+const InputElement: FunctionComponent<IProps> = ({ type, id, label, ...rest }: IProps) => {
+    return (
+        <div
+            dangerouslySetInnerHTML={createInputElement({
+                type: type,
+                id: id,
+                label: globalize.translate(label),
+                options: rest.options ? rest.options : ''
+            })}
+        />
+    );
+};
+
+export default InputElement;

src/components/dashboard/users/NewUserChannelAccessList.tsx

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from 'react';
+
+const createCheckBoxElement = ({Name, Id}) => ({
+    __html: `<label>
+        <input
+        type="checkbox"
+        is="emby-checkbox"
+        class="chkChannel"
+        data-id="${Id}"
+        />
+        <span>${Name}</span>
+    </label>`
+});
+
+type IProps = {
+    Name?: string;
+    Id?: string;
+}
+
+const NewUserChannelAccessList: FunctionComponent<IProps> = ({Name, Id}: IProps) => {
+    return (
+        <div
+            dangerouslySetInnerHTML={createCheckBoxElement({
+                Name: Name,
+                Id: Id
+            })}
+        />
+    );
+};
+
+export default NewUserChannelAccessList;
+

src/components/dashboard/users/NewUserFolderAccessList.tsx

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from 'react';
+
+const createCheckBoxElement = ({Name, Id}) => ({
+    __html: `<label>
+        <input
+        type="checkbox"
+        is="emby-checkbox"
+        class="chkFolder"
+        data-id="${Id}"
+        />
+        <span>${Name}</span>
+    </label>`
+});
+
+type IProps = {
+    Name?: string;
+    Id?: string;
+}
+
+const NewUserFolderAccessList: FunctionComponent<IProps> = ({Name, Id}: IProps) => {
+    return (
+        <div
+            dangerouslySetInnerHTML={createCheckBoxElement({
+                Name: Name,
+                Id: Id
+            })}
+        />
+    );
+};
+
+export default NewUserFolderAccessList;
+

src/components/dashboard/users/SectionTitleLinkElement.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
-const createLinkElement = ({ className, href, title }) => ({
+const createLinkElement = ({ className, title, href }) => ({
     __html: `<a
         is="emby-linkbutton"
         rel="noopener noreferrer"