'use strict'; /* global async, Clipboard */ /* global angular */ /* global $ */ /* global TOKEN_TYPES */ angular.module('Application').controller('ProfileController', ['$scope', '$translate', '$location', 'Client', '$timeout', function ($scope, $translate, $location, Client, $timeout) { $scope.user = Client.getUserInfo(); $scope.config = Client.getConfig(); $scope.apps = Client.getInstalledApps(); $scope.language = ''; $scope.languages = []; $scope.$watch('language', function (newVal, oldVal) { if (newVal === oldVal) return; Client.setProfileLanguage(newVal.id, function (error) { if (error) return console.error('Failed to reset password:', error); }); $translate.use(newVal.id); // this switches the language and saves locally in localStorage['NG_TRANSLATE_LANG_KEY'] }); $scope.logout = function (event) { event.stopPropagation(); Client.logout(); }; $scope.sendPasswordReset = function () { Client.sendSelfPasswordReset($scope.user.email, function (error) { if (error) return console.error('Failed to reset password:', error); Client.notify($translate.instant('profile.passwordResetNotification.title'), $translate.instant('profile.passwordResetNotification.body', { email: $scope.user.fallbackEmail || $scope.user.email }), false, 'success'); }); }; $scope.twoFactorAuthentication = { busy: false, error: null, notSupportedError: null, password: '', totpToken: '', secret: '', qrcode: '', mandatory2FA: false, mandatory2FAHelp: false, // show the initial help text when mandatory 2fa forces modal popup reset: function () { $scope.twoFactorAuthentication.busy = false; $scope.twoFactorAuthentication.error = null; $scope.twoFactorAuthentication.notSupportedError = null; $scope.twoFactorAuthentication.password = ''; $scope.twoFactorAuthentication.totpToken = ''; $scope.twoFactorAuthentication.secret = ''; $scope.twoFactorAuthentication.qrcode = ''; $scope.twoFactorAuthentication.mandatory2FAHelp = false; $scope.twoFactorAuthenticationEnableForm.$setUntouched(); $scope.twoFactorAuthenticationEnableForm.$setPristine(); $scope.twoFactorAuthenticationDisableForm.$setUntouched(); $scope.twoFactorAuthenticationDisableForm.$setPristine(); }, getSecret: function () { $scope.twoFactorAuthentication.mandatory2FAHelp = false; Client.setTwoFactorAuthenticationSecret(function (error, result) { if (error && error.statusCode === 400) return $scope.twoFactorAuthentication.notSupportedError = error.message; else if (error) return console.error(error); $scope.twoFactorAuthentication.secret = result.secret; $scope.twoFactorAuthentication.qrcode = result.qrcode; }); }, showMandatory2FA: function () { $scope.twoFactorAuthentication.reset(); $scope.twoFactorAuthentication.mandatory2FA = true; $scope.twoFactorAuthentication.mandatory2FAHelp = true; $('#twoFactorAuthenticationEnableModal').modal({ backdrop: 'static', keyboard: false }); // undimissable dialog }, show: function () { $scope.twoFactorAuthentication.reset(); if ($scope.user.twoFactorAuthenticationEnabled) { $('#twoFactorAuthenticationDisableModal').modal('show'); } else { $('#twoFactorAuthenticationEnableModal').modal('show'); $scope.twoFactorAuthentication.getSecret(); } }, enable: function() { $scope.twoFactorAuthentication.busy = true; Client.enableTwoFactorAuthentication($scope.twoFactorAuthentication.totpToken, function (error) { $scope.twoFactorAuthentication.busy = false; if (error) { $scope.twoFactorAuthentication.error = error.message; $scope.twoFactorAuthentication.totpToken = ''; $scope.twoFactorAuthenticationEnableForm.totpToken.$setPristine(); $('#twoFactorAuthenticationTotpTokenInput').focus(); return; } Client.refreshProfile(); $('#twoFactorAuthenticationEnableModal').modal('hide'); }); }, disable: function () { $scope.twoFactorAuthentication.busy = true; Client.disableTwoFactorAuthentication($scope.twoFactorAuthentication.password, function (error) { $scope.twoFactorAuthentication.busy = false; if (error) { $scope.twoFactorAuthentication.error = error.message; $scope.twoFactorAuthentication.password = ''; $scope.twoFactorAuthenticationDisableForm.password.$setPristine(); $('#twoFactorAuthenticationPasswordInput').focus(); return; } Client.refreshProfile(); $('#twoFactorAuthenticationDisableModal').modal('hide'); }); } }; $scope.avatarChange = { busy: false, error: {}, avatar: null, type: '', typeOrig: '', pictureChanged: false, getBlobFromImg: function (img, callback) { var size = 256; var canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; var imageDimensionRatio = img.width / img.height; var canvasDimensionRatio = canvas.width / canvas.height; var renderableHeight, renderableWidth, xStart, yStart; if (imageDimensionRatio > canvasDimensionRatio) { renderableHeight = canvas.height; renderableWidth = img.width * (renderableHeight / img.height); xStart = (canvas.width - renderableWidth) / 2; yStart = 0; } else if (imageDimensionRatio < canvasDimensionRatio) { renderableWidth = canvas.width; renderableHeight = img.height * (renderableWidth / img.width); xStart = 0; yStart = (canvas.height - renderableHeight) / 2; } else { renderableHeight = canvas.height; renderableWidth = canvas.width; xStart = 0; yStart = 0; } var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, xStart, yStart, renderableWidth, renderableHeight); canvas.toBlob(callback); }, doChangeAvatar: function () { $scope.avatarChange.error.avatar = null; $scope.avatarChange.busy = true; function done(error) { if (error) return console.error('Unable to change avatar.', error); Client.refreshProfile(function (error) { if (error) return console.error(error); $('#avatarChangeModal').modal('hide'); $scope.avatarChange.avatarChangeReset(); }); } if ($scope.avatarChange.type === 'custom') { var img = document.getElementById('previewAvatar'); $scope.avatarChange.getBlobFromImg(img, function (blob) { Client.changeAvatar(blob, done); }); } else { Client.changeAvatar($scope.avatarChange.type, done); } }, setPreviewAvatar: function (avatar) { $scope.avatarChange.pictureChanged = true; $scope.avatarChange.avatar = avatar; document.getElementById('previewAvatar').src = avatar.data; }, avatarChangeReset: function () { $scope.avatarChange.error.avatar = null; console.log($scope.user) $scope.avatarChange.type = $scope.user.avatarType; $scope.avatarChange.typeOrig = $scope.avatarChange.type; document.getElementById('previewAvatar').src = $scope.avatarChange.type === 'custom' ? $scope.user.avatarUrl : ''; $scope.avatarChange.pictureChanged = false; $scope.avatarChange.avatar = null; $scope.avatarChange.busy = false; }, showChangeAvatar: function () { $scope.avatarChange.avatarChangeReset(); $('#avatarChangeModal').modal('show'); }, showCustomAvatarSelector: function () { $('#avatarFileInput').click(); } }; $scope.backgroundImageChange = { busy: false, error: {}, pictureChanged: false, submit: function () { $scope.backgroundImageChange.error.backgroundImage = null; $scope.backgroundImageChange.busy = true; var imageFile = document.getElementById('backgroundImageFileInput').files[0]; if (!imageFile) return; Client.setBackgroundImage(imageFile, function (error) { if (error) return console.error('Unable to change backgroundImage.', error); document.getElementById('mainContentContainer').style.backgroundImage = 'url("' + Client.getBackgroundImageUrl() + '")'; document.getElementById('mainContentContainer').classList.add('has-background'); $scope.user.hasBackgroundImage = true; $('#backgroundImageChangeModal').modal('hide'); $scope.backgroundImageChange.reset(); }); }, unset: function () { Client.setBackgroundImage(null, function (error) { if (error) return console.error('Unable to change backgroundImage.', error); document.getElementById('mainContentContainer').style.backgroundImage = ''; document.getElementById('mainContentContainer').classList.remove('has-background'); $scope.user.hasBackgroundImage = false; $('#backgroundImageChangeModal').modal('hide'); $scope.backgroundImageChange.reset(); }); }, setPreviewBackgroundImage: function (backgroundImageData) { $scope.backgroundImageChange.pictureChanged = true; document.getElementById('previewBackgroundImage').src = backgroundImageData; }, reset: function () { $scope.backgroundImageChange.error.avatar = null; if ($scope.user.hasBackgroundImage) document.getElementById('previewBackgroundImage').src = Client.getBackgroundImageUrl(); else document.getElementById('previewBackgroundImage').src = '/img/background-image-placeholder.svg'; $scope.backgroundImageChange.pictureChanged = false; $scope.backgroundImageChange.busy = false; }, show: function () { $scope.backgroundImageChange.reset(); $('#backgroundImageChangeModal').modal('show'); }, showCustomBackgroundImageSelector: function () { $('#backgroundImageFileInput').click(); } }; $scope.passwordchange = { busy: false, error: {}, password: '', newPassword: '', newPasswordRepeat: '', reset: function () { $scope.passwordchange.error.password = null; $scope.passwordchange.error.newPassword = null; $scope.passwordchange.error.newPasswordRepeat = null; $scope.passwordchange.password = ''; $scope.passwordchange.newPassword = ''; $scope.passwordchange.newPasswordRepeat = ''; $scope.passwordChangeForm.$setUntouched(); $scope.passwordChangeForm.$setPristine(); }, show: function () { $scope.passwordchange.reset(); $('#passwordChangeModal').modal('show'); }, submit: function () { $scope.passwordchange.error.password = null; $scope.passwordchange.error.newPassword = null; $scope.passwordchange.error.newPasswordRepeat = null; $scope.passwordchange.busy = true; Client.changePassword($scope.passwordchange.password, $scope.passwordchange.newPassword, function (error) { $scope.passwordchange.busy = false; if (error) { if (error.statusCode === 412) { $scope.passwordchange.error.password = true; $scope.passwordchange.password = ''; $('#inputPasswordChangePassword').focus(); $scope.passwordChangeForm.password.$setPristine(); } else if (error.statusCode === 400) { $scope.passwordchange.error.newPassword = error.message; $scope.passwordchange.newPassword = ''; $scope.passwordchange.newPasswordRepeat = ''; $scope.passwordChangeForm.newPassword.$setPristine(); $scope.passwordChangeForm.newPasswordRepeat.$setPristine(); $('#inputPasswordChangeNewPassword').focus(); } else { console.error('Unable to change password.', error); } return; } $scope.passwordchange.reset(); $('#passwordChangeModal').modal('hide'); }); } }; $scope.emailChange = { busy: false, error: {}, email: '', password: '', reset: function () { $scope.emailChange.busy = false; $scope.emailChange.error = {}; $scope.emailChange.email = ''; $scope.emailChange.password = ''; $scope.emailChangeForm.$setUntouched(); $scope.emailChangeForm.$setPristine(); }, show: function () { $scope.emailChange.reset(); $('#emailChangeModal').modal('show'); }, submit: function () { $scope.emailChange.error.email = null; $scope.emailChange.busy = true; Client.setProfileEmail($scope.emailChange.email, $scope.emailChange.password, function (error) { $scope.emailChange.busy = false; if (error) { if (error.statusCode === 412) { $scope.emailChange.error.password = true; $scope.emailChange.password = ''; $scope.emailChangeForm.password.$setPristine(); $('#inputFallbackEmailChangePassword').focus(); } else { $scope.emailChange.error.email = error.message; $('#inputEmailChangeEmail').focus(); } $scope.emailChangeForm.$setUntouched(); $scope.emailChangeForm.$setPristine(); return; } Client.refreshProfile(); $scope.emailChange.reset(); $('#emailChangeModal').modal('hide'); }); } }; $scope.fallbackEmailChange = { busy: false, error: { email: false, password: false }, email: '', password: '', reset: function () { $scope.fallbackEmailChange.busy = false; $scope.fallbackEmailChange.error.email = null; $scope.fallbackEmailChange.error.password = null; $scope.fallbackEmailChange.email = ''; $scope.fallbackEmailChange.password = ''; $scope.fallbackEmailChangeForm.$setUntouched(); $scope.fallbackEmailChangeForm.$setPristine(); }, show: function () { $scope.fallbackEmailChange.reset(); $('#fallbackEmailChangeModal').modal('show'); }, submit: function () { $scope.fallbackEmailChange.error.email = null; $scope.fallbackEmailChange.error.password = null; $scope.fallbackEmailChange.error.generic = null; $scope.fallbackEmailChange.busy = true; Client.setProfileFallbackEmail($scope.fallbackEmailChange.email, $scope.fallbackEmailChange.password, function (error) { $scope.fallbackEmailChange.busy = false; if (error) { if (error.statusCode === 412) { $scope.fallbackEmailChange.error.password = true; $scope.fallbackEmailChange.password = ''; $scope.fallbackEmailChangeForm.password.$setPristine(); $('#inputFallbackEmailChangePassword').focus(); } else if (error.statusCode === 400) { $scope.fallbackEmailChange.error.generic = error.message; } else { console.error('Unable to change fallback email.', error); } return; } // update user info in the background Client.refreshProfile(); $scope.fallbackEmailChange.reset(); $('#fallbackEmailChangeModal').modal('hide'); }); } }; $scope.appPasswordAdd = { password: null, name: '', identifier: '', busy: false, error: {}, reset: function () { $scope.appPasswordAdd.busy = false; $scope.appPasswordAdd.password = null; $scope.appPasswordAdd.error.name = null; $scope.appPasswordAdd.name = ''; $scope.appPasswordAdd.identifier = ''; $scope.appPasswordAddForm.$setUntouched(); $scope.appPasswordAddForm.$setPristine(); }, show: function () { $scope.appPasswordAdd.reset(); $('#appPasswordAddModal').modal('show'); }, submit: function () { $scope.appPasswordAdd.busy = true; Client.addAppPassword($scope.appPasswordAdd.identifier, $scope.appPasswordAdd.name, function (error, result) { $scope.appPasswordAdd.busy = false; if (error) { if (error.statusCode === 400 || error.statusCode === 409) { $scope.appPasswordAdd.error.name = error.message; $scope.appPasswordAddForm.name.$setPristine(); $('#inputAppPasswordName').focus(); } else { console.error('Unable to create password.', error); } return; } $scope.appPasswordAdd.password = result; $scope.appPassword.refresh(); }); } }; $scope.appPassword = { busy: false, error: {}, passwords: [], identifiers: [], refresh: function () { Client.getAppPasswords(function (error, result) { if (error) console.error(error); $scope.appPassword.passwords = result.appPasswords || []; $scope.appPassword.identifiers = []; var appsById = {}; $scope.apps.forEach(function (app) { if (!app.manifest.addons) return; if (app.manifest.addons.email) return; var ftp = app.manifest.addons.localstorage && app.manifest.addons.localstorage.ftp; var sso = app.sso && (app.manifest.addons.ldap || app.manifest.addons.proxyAuth); if (!ftp && !sso) return; appsById[app.id] = app; var labelSuffix = ''; if (ftp && sso) labelSuffix = ' - SFTP & App Login'; else if (ftp) labelSuffix = ' - SFTP Only'; var label = app.label ? app.label + ' (' + app.fqdn + ')' + labelSuffix : app.fqdn + labelSuffix; $scope.appPassword.identifiers.push({ id: app.id, label: label }); }); $scope.appPassword.identifiers.push({ id: 'mail', label: 'Mail client' }); // setup label for the table UI $scope.appPassword.passwords.forEach(function (password) { if (password.identifier === 'mail') return password.label = password.identifier; var app = appsById[password.identifier]; if (!app) return password.label = password.identifier + ' (App not found)'; var ftp = app.manifest.addons && app.manifest.addons.localstorage && app.manifest.addons.localstorage.ftp; var labelSuffix = ftp ? ' - SFTP' : ''; password.label = app.label ? app.label + ' (' + app.fqdn + ')' + labelSuffix : app.fqdn + labelSuffix; }); }); }, del: function (id) { Client.delAppPassword(id, function (error) { if (error) console.error(error); $scope.appPassword.refresh(); }); } }; $scope.displayNameChange = { busy: false, error: {}, displayName: '', reset: function () { $scope.displayNameChange.busy = false; $scope.displayNameChange.error.displayName = null; $scope.displayNameChange.displayName = ''; $scope.displayNameChangeForm.$setUntouched(); $scope.displayNameChangeForm.$setPristine(); }, show: function () { $scope.displayNameChange.reset(); $scope.displayNameChange.displayName = $scope.user.displayName; $('#displayNameChangeModal').modal('show'); }, submit: function () { $scope.displayNameChange.error.displayName = null; $scope.displayNameChange.busy = true; Client.setProfileDisplayName($scope.displayNameChange.displayName, function (error) { $scope.displayNameChange.busy = false; if (error) { if (error.statusCode === 400) $scope.displayNameChange.error.displayName = error.message; else console.error('Unable to change email.', error); $('#inputDisplayNameChangeDisplayName').focus(); $scope.displayNameChangeForm.$setUntouched(); $scope.displayNameChangeForm.$setPristine(); return; } // update user info in the background Client.refreshProfile(); $scope.displayNameChange.reset(); $('#displayNameChangeModal').modal('hide'); }); } }; $scope.tokens = { busy: false, error: {}, allTokens: [], webadminTokens: [], cliTokens: [], apiTokens: [], refresh: function () { $scope.tokens.busy = true; Client.getTokens(function (error, result) { if (error) return console.error(error); $scope.tokens.busy = false; $scope.tokens.allTokens = result; // dashboard and development clientIds were issued with 7.5.0 $scope.tokens.webadminTokens = result.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_WEBADMIN || c.clientId === TOKEN_TYPES.ID_DEVELOPMENT || c.clientId === 'dashboard' || c.clientId === 'development'; }); $scope.tokens.cliTokens = result.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_CLI; }); $scope.tokens.apiTokens = result.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_SDK; }); }); }, revokeAllWebAndCliTokens: function () { $scope.tokens.busy = true; async.eachSeries($scope.tokens.webadminTokens.concat($scope.tokens.cliTokens), function (token, callback) { // do not revoke token for this session, will do at the end with logout if (token.accessToken === Client.getToken()) return callback(); Client.delToken(token.id, callback); }, function (error) { if (error) console.error(error); Client.logout(); }); }, add: { busy: false, error: null, name: '', accessToken: '', scope: 'rw', show: function () { $scope.tokens.add.name = ''; $scope.tokens.add.accessToken = ''; $scope.tokens.add.scope = 'rw'; $scope.tokens.add.busy = false; $scope.tokens.add.error = null; $scope.apiTokenAddForm.name.$setPristine(); $('#apiTokenAddModal').modal('show'); }, submit: function () { $scope.tokens.add.busy = true; var scope = { '*': $scope.tokens.add.scope }; Client.createToken($scope.tokens.add.name, scope, function (error, result) { if (error) { if (error.statusCode === 400) { $scope.tokens.add.error = error.message; $scope.apiTokenAddForm.name.$setPristine(); $('#inputApiTokenName').focus(); } else { console.error('Unable to create password.', error); } return; } $scope.tokens.add.busy = false; $scope.tokens.add.accessToken = result.accessToken; $scope.tokens.refresh(); }); } }, revokeToken: function (token) { Client.delToken(token.id, function (error) { if (error) console.error(error); $scope.tokens.refresh(); }); } }; Client.onReady(function () { $scope.appPassword.refresh(); $scope.tokens.refresh(); Client.refreshProfile(); // 2fa status might have changed by admin $translate.onReady(function () { var usedLang = $translate.use() || $translate.fallbackLanguage(); $scope.languages = Client.getAvailableLanguages().map(function (l) { return { display: $translate.instant('lang.'+l, {}, undefined, 'en'), id: l }; }).sort(function (a, b) { return a.display.localeCompare(b.display); }); $scope.language = $scope.languages.find(function (l) { return l.id === usedLang; }); }); }); $('#avatarFileInput').get(0).onchange = function (event) { var fr = new FileReader(); fr.onload = function () { $scope.$apply(function () { var tmp = { file: event.target.files[0], data: fr.result, url: null }; $scope.avatarChange.avatar = tmp; $scope.avatarChange.setPreviewAvatar(tmp); }); }; fr.readAsDataURL(event.target.files[0]); }; $('#backgroundImageFileInput').get(0).onchange = function (event) { var fr = new FileReader(); fr.onload = function () { $scope.$apply(function () { $scope.backgroundImageChange.setPreviewBackgroundImage(fr.result); }); }; fr.readAsDataURL(event.target.files[0]); }; // setup all the dialog focus handling ['passwordChangeModal', 'apiTokenAddModal', 'appPasswordAddModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) { $('#' + id).on('shown.bs.modal', function () { $(this).find("[autofocus]:first").focus(); }); }); new Clipboard('#newAccessTokenClipboardButton').on('success', function(e) { $('#newAccessTokenClipboardButton').tooltip({ title: 'Copied!', trigger: 'manual' }).tooltip('show'); $timeout(function () { $('#newAccessTokenClipboardButton').tooltip('hide'); }, 2000); e.clearSelection(); }).on('error', function(/*e*/) { $('#newAccessTokenClipboardButton').tooltip({ title: 'Press Ctrl+C to copy', trigger: 'manual' }).tooltip('show'); $timeout(function () { $('#newAccessTokenClipboardButton').tooltip('hide'); }, 2000); }); new Clipboard('#newAppPasswordClipboardButton').on('success', function(e) { $('#newAppPasswordClipboardButton').tooltip({ title: 'Copied!', trigger: 'manual' }).tooltip('show'); $timeout(function () { $('#newAppPasswordClipboardButton').tooltip('hide'); }, 2000); e.clearSelection(); }).on('error', function(/*e*/) { $('#newAppPasswordClipboardButton').tooltip({ title: 'Press Ctrl+C to copy', trigger: 'manual' }).tooltip('show'); $timeout(function () { $('#newAppPasswordClipboardButton').tooltip('hide'); }, 2000); }); $('.modal-backdrop').remove(); if ($location.search().setup2fa) { // the form elements of the FormController won't appear in scope yet $timeout(function () { $scope.twoFactorAuthentication.showMandatory2FA(); }, 1000); } else { // don't let the user bypass 2FA by removing the 'setup2FA' in the url if (Client.getConfig().mandatory2FA && !Client.getUserInfo().twoFactorAuthenticationEnabled) { $location.path('/profile').search({ setup2fa: true }); return; } } }]);