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

Convert userPasswordPage & UserImagePage to react

Browse source
This commit is contained in:
grafixeyehero 2022-01-05 20:35:58 +03:00 • committed by Bill Thornton
parent 4a8806e1f6
commit 2aa41f8a33
8 changed files with 498 additions and 424 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/controllers/user/profile/index.html
View file

@ -1,69 +1,3 @@
<div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage noSecondaryNavPage" data-title="${Profile}" data-menubutton="false">
<div class="padded-left padded-right padded-bottom-page">
<div class="readOnlyContent" style="margin: 0 auto; padding: 0 1em;">
<div style="position:relative;display:inline-block;max-width:200px;">
<input id="uploadImage" type="file" accept="image/*" style="position:absolute;right:0;width:100%;height:100%;opacity:0;" />
<div id="image" style="width:200px;height:200px;background-repeat:no-repeat;background-position:center;border-radius:100%;background-size:cover;"></div>
</div>
<div style="vertical-align:top;margin:1em 2em;display:inline-block;">
<h2 class="username" style="margin:0;font-size:xx-large;"></h2>
<br/>
<button is="emby-button" type="button" class="raised hide" id="btnAddImage">
<span>${ButtonAddImage}</span>
</button>
<button is="emby-button" type="button" class="raised hide" id="btnDeleteImage">
<span>${DeleteImage}</span>
</button>
</div>
</div>
<form class="updatePasswordForm passwordSection userProfileSettingsForm hide" style="margin: 3em auto 0;">
<div class="verticalSection">
<h2 class="sectionTitle">
${HeaderPassword}
</h2>
<div id="fldCurrentPassword" class="inputContainer hide">
<input is="emby-input" type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off" />
</div>
<div class="inputContainer">
<input is="emby-input" type="password" id="txtNewPassword" label="${LabelNewPassword}" autocomplete="off" />
</div>
<div class="inputContainer">
<input is="emby-input" type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off" />
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
<button is="emby-button" type="button" id="btnResetPassword" class="raised cancel block hide">
<span>${ResetPassword}</span>
</button>
</div>
</div>
</form>
<form class="localAccessForm localAccessSection userProfileSettingsForm hide" style="margin: 3em auto 0;">
<div class="verticalSection">
<h2 class="sectionTitle">${HeaderEasyPinCode}</h2>
<div>${EasyPasswordHelp}</div>
<br />
<div class="inputContainer">
<input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" />
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" class="chkEnableLocalEasyPassword" />
<span>${LabelInNetworkSignInWithEasyPassword}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
<button is="emby-button" type="button" id="btnResetEasyPassword" class="raised cancel block hide">
<span>${ButtonResetEasyPassword}</span>
</button>
</div>
</div>
</form>
</div>
</div>

104
src/controllers/user/profile/index.js
View file

@ -1,104 +0,0 @@
import UserPasswordPage from '../../dashboard/users/userpasswordpage';
import loading from '../../../components/loading/loading';
import libraryMenu from '../../../scripts/libraryMenu';
import { appHost } from '../../../components/apphost';
import globalize from '../../../scripts/globalize';
import '../../../elements/emby-button/emby-button';
import Dashboard from '../../../scripts/clientUtils';
import toast from '../../../components/toast/toast';
import confirm from '../../../components/confirm/confirm';
function reloadUser(page) {
const userId = getParameterByName('userId');
loading.show();
ApiClient.getUser(userId).then(function (user) {
page.querySelector('.username').innerText = user.Name;
libraryMenu.setTitle(user.Name);
let imageUrl = 'assets/img/avatar.png';
if (user.PrimaryImageTag) {
imageUrl = ApiClient.getUserImageUrl(user.Id, {
tag: user.PrimaryImageTag,
type: 'Primary'
});
}
const userImage = page.querySelector('#image');
userImage.style.backgroundImage = 'url(' + imageUrl + ')';
Dashboard.getCurrentUser().then(function (loggedInUser) {
if (user.PrimaryImageTag) {
page.querySelector('#btnAddImage').classList.add('hide');
page.querySelector('#btnDeleteImage').classList.remove('hide');
} else if (appHost.supports('fileinput') && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
page.querySelector('#btnDeleteImage').classList.add('hide');
page.querySelector('#btnAddImage').classList.remove('hide');
}
});
loading.hide();
});
}
function onFileReaderError(evt) {
loading.hide();
switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
toast(globalize.translate('FileNotFound'));
break;
case evt.target.error.ABORT_ERR:
onFileReaderAbort();
break;
case evt.target.error.NOT_READABLE_ERR:
default:
toast(globalize.translate('FileReadError'));
}
}
function onFileReaderAbort() {
loading.hide();
toast(globalize.translate('FileReadCancelled'));
}
function setFiles(page, files) {
const userImage = page.querySelector('#image');
const file = files[0];
if (!file || !file.type.match('image.*')) {
return false;
}
const reader = new FileReader();
reader.onerror = onFileReaderError;
reader.onabort = onFileReaderAbort;
reader.onload = function (evt) {
userImage.style.backgroundImage = 'url(' + evt.target.result + ')';
const userId = getParameterByName('userId');
ApiClient.uploadUserImage(userId, 'Primary', file).then(function () {
loading.hide();
reloadUser(page);
});
};
reader.readAsDataURL(file);
}
export default function (view, params) {
reloadUser(view);
new UserPasswordPage(view, params);
view.querySelector('#btnDeleteImage').addEventListener('click', function () {
confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () {
loading.show();
const userId = getParameterByName('userId');
ApiClient.deleteUserImage(userId, 'primary').then(function () {
loading.hide();
reloadUser(view);
});
});
});
view.querySelector('#btnAddImage').addEventListener('click', function () {
view.querySelector('#uploadImage').click();
});
view.querySelector('#uploadImage').addEventListener('change', function (evt) {
setFiles(view, evt.target.files);
});
}