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 globalize from '../../../scripts/globalize';
import LibraryMenu from '../../../scripts/libraryMenu';
@ -10,76 +10,103 @@ import CheckBoxElement from './CheckBoxElement';
import InputElement from './InputElement';
type IProps = {
userId?: string;
userId: string;
}
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);
let showPasswordSection = true;
const showPasswordSection = true;
let showLocalAccessSection = false;
if (user.ConnectLinkType == 'Guest') {
element.current?.querySelector('.localAccessSection').classList.add('hide');
showPasswordSection = false;
} else if (user.HasConfiguredPassword) {
element.current?.querySelector('.btnResetPassword').classList.remove('hide');
element.current?.querySelector('#fldCurrentPassword').classList.remove('hide');
if (user.HasConfiguredPassword) {
(page.querySelector('.btnResetPassword') as HTMLDivElement).classList.remove('hide');
(page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.remove('hide');
showLocalAccessSection = true;
} else {
element.current?.querySelector('.btnResetPassword').classList.add('hide');
element.current?.querySelector('#fldCurrentPassword').classList.add('hide');
(page.querySelector('.btnResetPassword') as HTMLDivElement).classList.add('hide');
(page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.add('hide');
}
if (showPasswordSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
element.current?.querySelector('.passwordSection').classList.remove('hide');
(page.querySelector('.passwordSection') as HTMLDivElement).classList.remove('hide');
} else {
element.current?.querySelector('.passwordSection').classList.add('hide');
(page.querySelector('.passwordSection') as HTMLDivElement).classList.add('hide');
}
if (showLocalAccessSection && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
element.current?.querySelector('.localAccessSection').classList.remove('hide');
(page.querySelector('.localAccessSection') as HTMLDivElement).classList.remove('hide');
} 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 = '';
if (user.HasConfiguredEasyPassword) {
txtEasyPassword.placeholder = '******';
element.current?.querySelector('.btnResetEasyPassword').classList.remove('hide');
(page.querySelector('.btnResetEasyPassword') as HTMLDivElement).classList.remove('hide');
} else {
txtEasyPassword.removeAttribute('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}) => {
autoFocuser.autoFocus(element.current);
autoFocuser.autoFocus(page);
});
});
});
element.current.querySelector('#txtCurrentPassword').value = '';
element.current.querySelector('#txtNewPassword').value = '';
element.current.querySelector('#txtNewPasswordConfirm').value = '';
};
(page.querySelector('#txtCurrentPassword') as HTMLInputElement).value = '';
(page.querySelector('#txtNewPassword') as HTMLInputElement).value = '';
(page.querySelector('#txtNewPasswordConfirm') as HTMLInputElement).value = '';
}, [userId]);
useEffect(() => {
loadUser(userId);
const page = element.current;
const onSubmit = (e) => {
const form = element.current;
if (!page) {
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'));
} else {
loading.show();
@ -91,10 +118,10 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
};
const savePassword = () => {
let currentPassword = element.current?.querySelector('#txtCurrentPassword').value;
const newPassword = element.current?.querySelector('#txtNewPassword').value;
let currentPassword = (page.querySelector('#txtCurrentPassword') as HTMLInputElement).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)
// This should only happen when user.HasConfiguredPassword is false, but this information is not passed on
currentPassword = '';
@ -104,7 +131,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
loading.hide();
toast(globalize.translate('PasswordSaved'));
loadUser(userId);
loadUser();
}, function () {
loading.hide();
Dashboard.alert({
@ -114,7 +141,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
});
};
const onLocalAccessSubmit = (e) => {
const onLocalAccessSubmit = (e: Event) => {
loading.show();
saveEasyPassword();
e.preventDefault();
@ -122,25 +149,33 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
};
const saveEasyPassword = () => {
const easyPassword = element.current?.querySelector('#txtEasyPassword').value;
const easyPassword = (page.querySelector('#txtEasyPassword') as HTMLInputElement).value;
if (easyPassword) {
window.ApiClient.updateEasyPassword(userId, easyPassword).then(function () {
onEasyPasswordSaved(userId);
onEasyPasswordSaved();
});
} else {
onEasyPasswordSaved(userId);
onEasyPasswordSaved();
}
};
const onEasyPasswordSaved = (Id) => {
window.ApiClient.getUser(Id).then(function (user) {
user.Configuration.EnableLocalPassword = element.current?.querySelector('.chkEnableLocalEasyPassword').checked;
const onEasyPasswordSaved = () => {
window.ApiClient.getUser(userId).then(function (user) {
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 () {
loading.hide();
toast(globalize.translate('SettingsSaved'));
loadUser(userId);
loadUser();
});
});
};
@ -156,7 +191,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
message: globalize.translate('PinCodeResetComplete'),
title: globalize.translate('HeaderPinCodeReset')
});
loadUser(userId);
loadUser();
});
});
};
@ -171,17 +206,17 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
message: globalize.translate('PasswordResetComplete'),
title: globalize.translate('ResetPassword')
});
loadUser(userId);
loadUser();
});
});
};
element?.current?.querySelector('.updatePasswordForm').addEventListener('submit', onSubmit);
element?.current?.querySelector('.localAccessForm').addEventListener('submit', onLocalAccessSubmit);
(page.querySelector('.updatePasswordForm') as HTMLFormElement).addEventListener('submit', onSubmit);
(page.querySelector('.localAccessForm') as HTMLFormElement).addEventListener('submit', onLocalAccessSubmit);
element?.current?.querySelector('.btnResetEasyPassword').addEventListener('click', resetEasyPassword);
element?.current?.querySelector('.btnResetPassword').addEventListener('click', resetPassword);
}, [userId]);
(page.querySelector('.btnResetEasyPassword') as HTMLButtonElement).addEventListener('click', resetEasyPassword);
(page.querySelector('.btnResetPassword') as HTMLButtonElement).addEventListener('click', resetPassword);
}, [loadUser, userId]);
return (
<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 globalize from '../../scripts/globalize';
@ -11,17 +11,32 @@ import loading from '../loading/loading';
import toast from '../toast/toast';
type IProps = {
userId?: string;
userId: string;
}
const UserImagePage: FunctionComponent<IProps> = ({userId}: IProps) => {
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();
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);
LibraryMenu.setTitle(user.Name);
@ -32,27 +47,37 @@ const UserImagePage: FunctionComponent<IProps> = ({userId}: IProps) => {
type: 'Primary'
});
}
const userImage = element.current?.querySelector('#image');
const userImage = (page.querySelector('#image') as HTMLDivElement);
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) {
element.current?.querySelector('.btnAddImage').classList.add('hide');
element.current?.querySelector('.btnDeleteImage').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)) {
element.current?.querySelector('.btnDeleteImage').classList.add('hide');
element.current?.querySelector('.btnAddImage').classList.remove('hide');
(page.querySelector('.btnDeleteImage') as HTMLButtonElement).classList.add('hide');
(page.querySelector('.btnAddImage') as HTMLButtonElement).classList.remove('hide');
}
});
loading.hide();
});
};
}, [userId]);
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();
switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
@ -72,9 +97,10 @@ const UserImagePage: FunctionComponent<IProps> = ({userId}: IProps) => {
toast(globalize.translate('FileReadCancelled'));
};
const setFiles = (evt) => {
const userImage = element?.current?.querySelector('#image');
const file = evt.target.files[0];
const setFiles = (evt: Event) => {
const userImage = (page.querySelector('#image') as HTMLDivElement);
const target = evt.target as HTMLInputElement;
const file = (target.files as FileList)[0];
if (!file || !file.type.match('image.*')) {
return false;
@ -87,34 +113,34 @@ const UserImagePage: FunctionComponent<IProps> = ({userId}: IProps) => {
userImage.style.backgroundImage = 'url(' + reader.result + ')';
window.ApiClient.uploadUserImage(userId, 'Primary', file).then(function () {
loading.hide();
reloadUser(userId);
reloadUser();
});
};
reader.readAsDataURL(file);
};
element?.current?.querySelector('.btnDeleteImage').addEventListener('click', function () {
(page.querySelector('.btnDeleteImage') as HTMLButtonElement).addEventListener('click', function () {
confirm(
globalize.translate('DeleteImageConfirmation'),
globalize.translate('DeleteImage')
).then(function () {
loading.show();
window.ApiClient.deleteUserImage(userId, 'primary').then(function () {
window.ApiClient.deleteUserImage(userId, 'Primary').then(function () {
loading.hide();
reloadUser(userId);
reloadUser();
});
});
});
element?.current?.querySelector('.btnAddImage').addEventListener('click', function () {
element?.current?.querySelector('#uploadImage').click();
(page.querySelector('.btnAddImage') as HTMLButtonElement).addEventListener('click', function () {
(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);
});
}, [userId]);
}, [reloadUser, userId]);
return (
<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 SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
import SectionTabs from '../dashboard/users/SectionTabs';
@ -8,15 +8,17 @@ const UserPasswordPage: FunctionComponent = () => {
const userId = appRouter.param('userId');
const [ userName, setUserName ] = useState('');
const loadUser = (Id) => {
window.ApiClient.getUser(Id).then(function (user) {
const loadUser = useCallback(() => {
window.ApiClient.getUser(userId).then(function (user) {
if (!user.Name) {
throw new Error('Unexpected null user.Name');
}
setUserName(user.Name);
});
};
useEffect(() => {
loadUser(userId);
}, [userId]);
useEffect(() => {
loadUser();
}, [loadUser]);
return (
<div>