Refactoring duplicate code

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;

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;

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;

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;

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;

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

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>
     );

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>
     );
 };

src/components/dashboard/users/ButtonElement.tsx

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

src/components/dashboard/users/CheckBoxElement.tsx

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

src/components/dashboard/users/CheckBoxListItem.tsx

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

src/components/dashboard/users/SectionTitleButtonElement.tsx

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

src/components/dashboard/users/SectionTitleContainer.tsx

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

src/components/dashboard/users/SelectElement.tsx

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

src/components/dashboard/users/SelectMaxParentalRating.tsx

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

src/components/dashboard/users/SelectSyncPlayAccessElement.tsx

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

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>

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>