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

update TypeScript

Browse source
This commit is contained in:
grafixeyehero 2022-03-03 03:37:56 +03:00 • committed by Bill Thornton
parent 2aa41f8a33
commit 417a9ddc99
3 changed files with 147 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

137
src/components/dashboard/users/UserPasswordForm.tsx
View file

@ -1,4 +1,4 @@
import React, { FunctionComponent, useEffect, useRef } from 'react'; import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react';
import Dashboard from '../../../scripts/clientUtils'; import Dashboard from '../../../scripts/clientUtils';
import globalize from '../../../scripts/globalize'; import globalize from '../../../scripts/globalize';
import LibraryMenu from '../../../scripts/libraryMenu'; import LibraryMenu from '../../../scripts/libraryMenu';
@ -10,76 +10,103 @@ import CheckBoxElement from './CheckBoxElement';
import InputElement from './InputElement'; import InputElement from './InputElement';
type IProps = { type IProps = {
userId?: string; userId: string;
} }
const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => { const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
const element = useRef(null); const element = useRef<HTMLDivElement>(null);
const loadUser = useCallback(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
window.ApiClient.getUser(userId).then(function (user) {
Dashboard.getCurrentUser().then(function (loggedInUser: { Policy: { IsAdministrator: boolean; }; }) {
if (!user.Id) {
throw new Error('Unexpected null user.Id');
}
if (!user.Policy) {
throw new Error('Unexpected null user.Policy');
}
if (!user.Id) {
throw new Error('Unexpected null user.Id');
}
if (!user.Configuration) {
throw new Error('Unexpected null user.Configuration');
}
const loadUser = (Id) => {
window.ApiClient.getUser(Id).then(function (user) {
Dashboard.getCurrentUser().then(function (loggedInUser) {
LibraryMenu.setTitle(user.Name); LibraryMenu.setTitle(user.Name);
let showPasswordSection = true; const showPasswordSection = true;
let showLocalAccessSection = false; let showLocalAccessSection = false;
if (user.ConnectLinkType == 'Guest') { if (user.HasConfiguredPassword) {
element.current?.querySelector('.localAccessSection').classList.add('hide'); (page.querySelector('.btnResetPassword') as HTMLDivElement).classList.remove('hide');
showPasswordSection = false; (page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.remove('hide');
} else if (user.HasConfiguredPassword) {
element.current?.querySelector('.btnResetPassword').classList.remove('hide');
element.current?.querySelector('#fldCurrentPassword').classList.remove('hide');
showLocalAccessSection = true; showLocalAccessSection = true;
} else { } else {
element.current?.querySelector('.btnResetPassword').classList.add('hide'); (page.querySelector('.btnResetPassword') as HTMLDivElement).classList.add('hide');
element.current?.querySelector('#fldCurrentPassword').classList.add('hide'); (page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.add('hide');
} }
if (showPasswordSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) { if (showPasswordSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
element.current?.querySelector('.passwordSection').classList.remove('hide'); (page.querySelector('.passwordSection') as HTMLDivElement).classList.remove('hide');
} else { } else {
element.current?.querySelector('.passwordSection').classList.add('hide'); (page.querySelector('.passwordSection') as HTMLDivElement).classList.add('hide');
} }
if (showLocalAccessSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) { if (showLocalAccessSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
element.current?.querySelector('.localAccessSection').classList.remove('hide'); (page.querySelector('.localAccessSection') as HTMLDivElement).classList.remove('hide');
} else { } else {
element.current?.querySelector('.localAccessSection').classList.add('hide'); (page.querySelector('.localAccessSection') as HTMLDivElement).classList.add('hide');
} }
const txtEasyPassword = element.current?.querySelector('#txtEasyPassword'); const txtEasyPassword = page.querySelector('#txtEasyPassword') as HTMLInputElement;
txtEasyPassword.value = ''; txtEasyPassword.value = '';
if (user.HasConfiguredEasyPassword) { if (user.HasConfiguredEasyPassword) {
txtEasyPassword.placeholder = '******'; txtEasyPassword.placeholder = '******';
element.current?.querySelector('.btnResetEasyPassword').classList.remove('hide'); (page.querySelector('.btnResetEasyPassword') as HTMLDivElement).classList.remove('hide');
} else { } else {
txtEasyPassword.removeAttribute('placeholder'); txtEasyPassword.removeAttribute('placeholder');
txtEasyPassword.placeholder = ''; txtEasyPassword.placeholder = '';
element.current?.querySelector('.btnResetEasyPassword').classList.add('hide'); (page.querySelector('.btnResetEasyPassword') as HTMLDivElement).classList.add('hide');
} }
element.current.querySelector('.chkEnableLocalEasyPassword').checked = user.Configuration.EnableLocalPassword; const chkEnableLocalEasyPassword = page.querySelector('.chkEnableLocalEasyPassword') as HTMLInputElement;
chkEnableLocalEasyPassword.checked = user.Configuration.EnableLocalPassword || false;
import('../../autoFocuser').then(({default: autoFocuser}) => { import('../../autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(element.current); autoFocuser.autoFocus(page);
}); });
}); });
}); });
element.current.querySelector('#txtCurrentPassword').value = ''; (page.querySelector('#txtCurrentPassword') as HTMLInputElement).value = '';
element.current.querySelector('#txtNewPassword').value = ''; (page.querySelector('#txtNewPassword') as HTMLInputElement).value = '';
element.current.querySelector('#txtNewPasswordConfirm').value = ''; (page.querySelector('#txtNewPasswordConfirm') as HTMLInputElement).value = '';
}; }, [userId]);
useEffect(() => { useEffect(() => {
loadUser(userId); const page = element.current;
const onSubmit = (e) => { if (!page) {
const form = element.current; console.error('Unexpected null reference');
return;
}
if (form.querySelector('#txtNewPassword').value != form.querySelector('#txtNewPasswordConfirm').value) { loadUser();
const onSubmit = (e: Event) => {
if ((page.querySelector('#txtNewPassword') as HTMLInputElement).value != (page.querySelector('#txtNewPasswordConfirm') as HTMLInputElement).value) {
toast(globalize.translate('PasswordMatchError')); toast(globalize.translate('PasswordMatchError'));
} else { } else {
loading.show(); loading.show();
@ -91,10 +118,10 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
}; };
const savePassword = () => { const savePassword = () => {
let currentPassword = element.current?.querySelector('#txtCurrentPassword').value; let currentPassword = (page.querySelector('#txtCurrentPassword') as HTMLInputElement).value;
const newPassword = element.current?.querySelector('#txtNewPassword').value; const newPassword = (page.querySelector('#txtNewPassword') as HTMLInputElement).value;
if (element.current?.querySelector('#fldCurrentPassword').classList.contains('hide')) { if ((page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.contains('hide')) {
// Firefox does not respect autocomplete=off, so clear it if the field is supposed to be hidden (and blank) // Firefox does not respect autocomplete=off, so clear it if the field is supposed to be hidden (and blank)
// This should only happen when user.HasConfiguredPassword is false, but this information is not passed on // This should only happen when user.HasConfiguredPassword is false, but this information is not passed on
currentPassword = ''; currentPassword = '';
@ -104,7 +131,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
loading.hide(); loading.hide();
toast(globalize.translate('PasswordSaved')); toast(globalize.translate('PasswordSaved'));
loadUser(userId); loadUser();
}, function () { }, function () {
loading.hide(); loading.hide();
Dashboard.alert({ Dashboard.alert({
@ -114,7 +141,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
}); });
}; };
const onLocalAccessSubmit = (e) => { const onLocalAccessSubmit = (e: Event) => {
loading.show(); loading.show();
saveEasyPassword(); saveEasyPassword();
e.preventDefault(); e.preventDefault();
@ -122,25 +149,33 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
}; };
const saveEasyPassword = () => { const saveEasyPassword = () => {
const easyPassword = element.current?.querySelector('#txtEasyPassword').value; const easyPassword = (page.querySelector('#txtEasyPassword') as HTMLInputElement).value;
if (easyPassword) { if (easyPassword) {
window.ApiClient.updateEasyPassword(userId, easyPassword).then(function () { window.ApiClient.updateEasyPassword(userId, easyPassword).then(function () {
onEasyPasswordSaved(userId); onEasyPasswordSaved();
}); });
} else { } else {
onEasyPasswordSaved(userId); onEasyPasswordSaved();
} }
}; };
const onEasyPasswordSaved = (Id) => { const onEasyPasswordSaved = () => {
window.ApiClient.getUser(Id).then(function (user) { window.ApiClient.getUser(userId).then(function (user) {
user.Configuration.EnableLocalPassword = element.current?.querySelector('.chkEnableLocalEasyPassword').checked; if (!user.Configuration) {
throw new Error('Unexpected null user.Configuration');
}
if (!user.Id) {
throw new Error('Unexpected null user.Id');
}
user.Configuration.EnableLocalPassword = (page.querySelector('.chkEnableLocalEasyPassword') as HTMLInputElement).checked;
window.ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () { window.ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () {
loading.hide(); loading.hide();
toast(globalize.translate('SettingsSaved')); toast(globalize.translate('SettingsSaved'));
loadUser(userId); loadUser();
}); });
}); });
}; };
@ -156,7 +191,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
message: globalize.translate('PinCodeResetComplete'), message: globalize.translate('PinCodeResetComplete'),
title: globalize.translate('HeaderPinCodeReset') title: globalize.translate('HeaderPinCodeReset')
}); });
loadUser(userId); loadUser();
}); });
}); });
}; };
@ -171,17 +206,17 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
message: globalize.translate('PasswordResetComplete'), message: globalize.translate('PasswordResetComplete'),
title: globalize.translate('ResetPassword') title: globalize.translate('ResetPassword')
}); });
loadUser(userId); loadUser();
}); });
}); });
}; };
element?.current?.querySelector('.updatePasswordForm').addEventListener('submit', onSubmit); (page.querySelector('.updatePasswordForm') as HTMLFormElement).addEventListener('submit', onSubmit);
element?.current?.querySelector('.localAccessForm').addEventListener('submit', onLocalAccessSubmit); (page.querySelector('.localAccessForm') as HTMLFormElement).addEventListener('submit', onLocalAccessSubmit);
element?.current?.querySelector('.btnResetEasyPassword').addEventListener('click', resetEasyPassword); (page.querySelector('.btnResetEasyPassword') as HTMLButtonElement).addEventListener('click', resetEasyPassword);
element?.current?.querySelector('.btnResetPassword').addEventListener('click', resetPassword); (page.querySelector('.btnResetPassword') as HTMLButtonElement).addEventListener('click', resetPassword);
}, [userId]); }, [loadUser, userId]);
return ( return (
<div ref={element}> <div ref={element}>

78
src/components/pages/UserImagePage.tsx
View file

@ -1,4 +1,4 @@
import React, { FunctionComponent, useEffect, useState, useRef } from 'react'; import React, { FunctionComponent, useEffect, useState, useRef, useCallback } from 'react';
import Dashboard from '../../scripts/clientUtils'; import Dashboard from '../../scripts/clientUtils';
import globalize from '../../scripts/globalize'; import globalize from '../../scripts/globalize';
@ -11,17 +11,32 @@ import loading from '../loading/loading';
import toast from '../toast/toast'; import toast from '../toast/toast';
type IProps = { type IProps = {
userId?: string; userId: string;
} }
const UserImagePage: FunctionComponent<IProps> = ({userId}: IProps) => { const UserImagePage: FunctionComponent<IProps> = ({userId}: IProps) => {
const [ userName, setUserName ] = useState(''); const [ userName, setUserName ] = useState('');
const element = useRef(null); const element = useRef<HTMLDivElement>(null);
const reloadUser = useCallback(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const reloadUser = (Id) => {
loading.show(); loading.show();
window.ApiClient.getUser(Id).then(function (user) { window.ApiClient.getUser(userId).then(function (user) {
if (!user.Name) {
throw new Error('Unexpected null user.Name');
}
if (!user.Id) {
throw new Error('Unexpected null user.Id');
}
setUserName(user.Name); setUserName(user.Name);
LibraryMenu.setTitle(user.Name); LibraryMenu.setTitle(user.Name);
@ -32,27 +47,37 @@ const UserImagePage: FunctionComponent<IProps> = ({userId}: IProps) => {
type: 'Primary' type: 'Primary'
}); });
} }
const userImage = (page.querySelector('#image') as HTMLDivElement);
const userImage = element.current?.querySelector('#image');
userImage.style.backgroundImage = 'url(' + imageUrl + ')'; userImage.style.backgroundImage = 'url(' + imageUrl + ')';
Dashboard.getCurrentUser().then(function (loggedInUser) { Dashboard.getCurrentUser().then(function (loggedInUser: { Policy: { IsAdministrator: boolean; }; }) {
if (!user.Policy) {
throw new Error('Unexpected null user.Policy');
}
if (user.PrimaryImageTag) { if (user.PrimaryImageTag) {
element.current?.querySelector('.btnAddImage').classList.add('hide'); (page.querySelector('.btnAddImage') as HTMLButtonElement).classList.add('hide');
element.current?.querySelector('.btnDeleteImage').classList.remove('hide'); (page.querySelector('.btnDeleteImage') as HTMLButtonElement).classList.remove('hide');
} else if (appHost.supports('fileinput') && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) { } else if (appHost.supports('fileinput') && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
element.current?.querySelector('.btnDeleteImage').classList.add('hide'); (page.querySelector('.btnDeleteImage') as HTMLButtonElement).classList.add('hide');
element.current?.querySelector('.btnAddImage').classList.remove('hide'); (page.querySelector('.btnAddImage') as HTMLButtonElement).classList.remove('hide');
} }
}); });
loading.hide(); loading.hide();
}); });
}; }, [userId]);
useEffect(() => { useEffect(() => {
reloadUser(userId); const page = element.current;
const onFileReaderError = (evt) => { if (!page) {
console.error('Unexpected null reference');
return;
}
reloadUser();
const onFileReaderError = (evt: any) => {
loading.hide(); loading.hide();
switch (evt.target.error.code) { switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR: case evt.target.error.NOT_FOUND_ERR:
@ -72,9 +97,10 @@ const UserImagePage: FunctionComponent<IProps> = ({userId}: IProps) => {
toast(globalize.translate('FileReadCancelled')); toast(globalize.translate('FileReadCancelled'));
}; };
const setFiles = (evt) => { const setFiles = (evt: Event) => {
const userImage = element?.current?.querySelector('#image'); const userImage = (page.querySelector('#image') as HTMLDivElement);
const file = evt.target.files[0]; const target = evt.target as HTMLInputElement;
const file = (target.files as FileList)[0];
if (!file || !file.type.match('image.*')) { if (!file || !file.type.match('image.*')) {
return false; return false;
@ -87,34 +113,34 @@ const UserImagePage: FunctionComponent<IProps> = ({userId}: IProps) => {
userImage.style.backgroundImage = 'url(' + reader.result + ')'; userImage.style.backgroundImage = 'url(' + reader.result + ')';
window.ApiClient.uploadUserImage(userId, 'Primary', file).then(function () { window.ApiClient.uploadUserImage(userId, 'Primary', file).then(function () {
loading.hide(); loading.hide();
reloadUser(userId); reloadUser();
}); });
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}; };
element?.current?.querySelector('.btnDeleteImage').addEventListener('click', function () { (page.querySelector('.btnDeleteImage') as HTMLButtonElement).addEventListener('click', function () {
confirm( confirm(
globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImageConfirmation'),
globalize.translate('DeleteImage') globalize.translate('DeleteImage')
).then(function () { ).then(function () {
loading.show(); loading.show();
window.ApiClient.deleteUserImage(userId, 'primary').then(function () { window.ApiClient.deleteUserImage(userId, 'Primary').then(function () {
loading.hide(); loading.hide();
reloadUser(userId); reloadUser();
}); });
}); });
}); });
element?.current?.querySelector('.btnAddImage').addEventListener('click', function () { (page.querySelector('.btnAddImage') as HTMLButtonElement).addEventListener('click', function () {
element?.current?.querySelector('#uploadImage').click(); (page.querySelector('#uploadImage') as HTMLInputElement).click();
}); });
element?.current?.querySelector('#uploadImage').addEventListener('change', function (evt) { (page.querySelector('#uploadImage') as HTMLInputElement).addEventListener('change', function (evt: Event) {
setFiles(evt); setFiles(evt);
}); });
}, [userId]); }, [reloadUser, userId]);
return ( return (
<div ref={element}> <div ref={element}>

16
src/components/pages/UserPasswordPage.tsx
View file

@ -1,4 +1,4 @@
import React, { FunctionComponent, useEffect, useState } from 'react'; import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
import { appRouter } from '../appRouter'; import { appRouter } from '../appRouter';
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement'; import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
import SectionTabs from '../dashboard/users/SectionTabs'; import SectionTabs from '../dashboard/users/SectionTabs';
@ -8,15 +8,17 @@ const UserPasswordPage: FunctionComponent = () => {
const userId = appRouter.param('userId'); const userId = appRouter.param('userId');
const [ userName, setUserName ] = useState(''); const [ userName, setUserName ] = useState('');
const loadUser = (Id) => { const loadUser = useCallback(() => {
window.ApiClient.getUser(Id).then(function (user) { window.ApiClient.getUser(userId).then(function (user) {
if (!user.Name) {
throw new Error('Unexpected null user.Name');
}
setUserName(user.Name); setUserName(user.Name);
}); });
};
useEffect(() => {
loadUser(userId);
}, [userId]); }, [userId]);
useEffect(() => {
loadUser();
}, [loadUser]);
return ( return (
<div> <div>