V12: Remove avatar step from login (#14629)
Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>
This commit is contained in:
Jacob Overgaard
@@ -14,7 +14,7 @@
|
||||
});
|
||||
|
||||
function UmbLoginController($scope, $location, currentUserResource, formHelper,
|
||||
mediaHelper, umbRequestHelper, Upload, localizationService,
|
||||
mediaHelper, umbRequestHelper, localizationService,
|
||||
userService, externalLoginInfo, externalLoginInfoService,
|
||||
resetPasswordCodeInfo, authResource, $q) {
|
||||
|
||||
@@ -34,15 +34,6 @@
|
||||
submitButton: "init"
|
||||
};
|
||||
|
||||
vm.avatarFile = {
|
||||
filesHolder: null,
|
||||
uploadStatus: null,
|
||||
uploadProgress: 0,
|
||||
maxFileSize: Umbraco.Sys.ServerVariables.umbracoSettings.maxFileSize + "KB",
|
||||
acceptedFileTypes: mediaHelper.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes),
|
||||
uploaded: false
|
||||
};
|
||||
|
||||
vm.allowPasswordReset = Umbraco.Sys.ServerVariables.umbracoSettings.canSendRequiredEmail && Umbraco.Sys.ServerVariables.umbracoSettings.allowPasswordReset;
|
||||
vm.errorMsg = "";
|
||||
const tempUrl = new URL(Umbraco.Sys.ServerVariables.umbracoUrls.externalLoginsUrl, window.location.origin);
|
||||
@@ -66,7 +57,6 @@
|
||||
|
||||
vm.$onInit = onInit;
|
||||
vm.togglePassword = togglePassword;
|
||||
vm.changeAvatar = changeAvatar;
|
||||
vm.getStarted = getStarted;
|
||||
vm.inviteSavePassword = inviteSavePassword;
|
||||
vm.showLogin = showLogin;
|
||||
@@ -154,12 +144,6 @@
|
||||
$(".password-text.show, .password-text.hide").toggle();
|
||||
}
|
||||
|
||||
function changeAvatar(files, event) {
|
||||
if (files && files.length > 0) {
|
||||
upload(files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
function getStarted() {
|
||||
$location.search('invite', null);
|
||||
if (vm.onLogin) {
|
||||
@@ -179,12 +163,17 @@
|
||||
//success
|
||||
formHelper.resetForm({ scope: $scope, formCtrl: vm.inviteUserPasswordForm });
|
||||
vm.invitedUserPasswordModel.buttonState = "success";
|
||||
//set the user and set them as logged in
|
||||
vm.invitedUser = data;
|
||||
userService.setAuthenticationSuccessful(data);
|
||||
|
||||
//set the user
|
||||
vm.invitedUser = data;
|
||||
|
||||
// hide the password form
|
||||
vm.inviteStep = 2;
|
||||
|
||||
// set the user as logged in, which will initialise the app flow in init.js
|
||||
// and eventually redirect the user to the content section when it's ready
|
||||
userService.setAuthenticationSuccessful(data);
|
||||
|
||||
}, function (err) {
|
||||
formHelper.resetForm({ scope: $scope, hasErrors: true, formCtrl: vm.inviteUserPasswordForm });
|
||||
formHelper.handleError(err);
|
||||
@@ -379,69 +368,6 @@
|
||||
});
|
||||
}
|
||||
|
||||
function upload(file) {
|
||||
|
||||
vm.avatarFile.uploadProgress = 0;
|
||||
|
||||
Upload.upload({
|
||||
url: umbRequestHelper.getApiUrl("currentUserApiBaseUrl", "PostSetAvatar"),
|
||||
fields: {},
|
||||
file: file
|
||||
}).progress(function (evt) {
|
||||
|
||||
if (vm.avatarFile.uploadStatus !== "done" && vm.avatarFile.uploadStatus !== "error") {
|
||||
// set uploading status on file
|
||||
vm.avatarFile.uploadStatus = "uploading";
|
||||
|
||||
// calculate progress in percentage
|
||||
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total, 10);
|
||||
|
||||
// set percentage property on file
|
||||
vm.avatarFile.uploadProgress = progressPercentage;
|
||||
}
|
||||
|
||||
}).success(function (data, status, headers, config) {
|
||||
|
||||
vm.avatarFile.uploadProgress = 100;
|
||||
|
||||
// set done status on file
|
||||
vm.avatarFile.uploadStatus = "done";
|
||||
|
||||
vm.invitedUser.avatars = data;
|
||||
|
||||
vm.avatarFile.uploaded = true;
|
||||
|
||||
}).error(function (evt, status, headers, config) {
|
||||
|
||||
// set status done
|
||||
vm.avatarFile.uploadStatus = "error";
|
||||
|
||||
// If file not found, server will return a 404 and display this message
|
||||
if (status === 404) {
|
||||
vm.avatarFile.serverErrorMessage = "File not found";
|
||||
}
|
||||
else if (status == 400) {
|
||||
//it's a validation error
|
||||
vm.avatarFile.serverErrorMessage = evt.message;
|
||||
}
|
||||
else {
|
||||
//it's an unhandled error
|
||||
//if the service returns a detailed error
|
||||
if (evt.InnerException) {
|
||||
vm.avatarFile.serverErrorMessage = evt.InnerException.ExceptionMessage;
|
||||
|
||||
//Check if its the common "too large file" exception
|
||||
if (evt.InnerException.StackTrace && evt.InnerException.StackTrace.indexOf("ValidateRequestEntityLength") > 0) {
|
||||
vm.avatarFile.serverErrorMessage = "File too large to upload";
|
||||
}
|
||||
|
||||
} else if (evt.Message) {
|
||||
vm.avatarFile.serverErrorMessage = evt.Message;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function show2FALoginDialog(viewPath) {
|
||||
vm.twoFactor.submitCallback = function submitCallback() {
|
||||
vm.onLogin();
|
||||
|
||||
@@ -14,90 +14,48 @@
|
||||
<div class="form" ng-if="vm.inviteStep === 1">
|
||||
<h1 style="margin-bottom: 10px; text-align: left;">Hi, {{vm.invitedUser.name}}</h1>
|
||||
<p style="line-height: 1.6; margin-bottom: 25px;">
|
||||
<localize key="user_userinviteWelcomeMessage">Welcome to Umbraco! Just need to get your password and avatar setup and then you're good to go</localize>
|
||||
<localize key="user_userinviteWelcomeMessage">Welcome to Umbraco! Just need to get your password setup and then you're good to go</localize>
|
||||
</p>
|
||||
|
||||
<div class="control-group" ng-class="{error: vm.setPasswordForm.password.$invalid}">
|
||||
<label for="umb-passwordOne">
|
||||
<localize key="user_newPassword">New password</localize>
|
||||
<small style="font-size: 13px;">{{vm.invitedUserPasswordModel.passwordPolicyText}}</small>
|
||||
</label>
|
||||
<input type="password" ng-model="vm.invitedUserPasswordModel.password" name="password" id="umb-passwordOne" class="-full-width-input" umb-auto-focus required val-server-field="value" ng-minlength="{{vm.invitedUserPasswordModel.passwordPolicies.minPasswordLength}}" spellcheck="false" />
|
||||
<span ng-messages="inviteUserPasswordForm.password.$error" show-validation-on-submit>
|
||||
<span class="help-inline" ng-message="required"><localize key="user_passwordIsBlank">Your new password cannot be blank!</localize></span>
|
||||
<span class="help-inline" ng-message="minlength">Minimum {{vm.invitedUserPasswordModel.passwordPolicies.minPasswordLength}} characters</span>
|
||||
<span class="help-inline" ng-message="valServerField">{{inviteUserPasswordForm.password.errorMsg}}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="control-group" ng-class="{error: vm.setPasswordForm.confirmPassword.$invalid}">
|
||||
<label for="umb-confirmPasswordOne"><localize key="user_confirmNewPassword">Confirm new password</localize></label>
|
||||
<input type="password" ng-model="vm.invitedUserPasswordModel.confirmPassword" name="confirmPassword" id="umb-confirmPasswordOne" class="-full-width-input" required val-compare="password" spellcheck="false"/>
|
||||
<span ng-messages="inviteUserPasswordForm.confirmPassword.$error" show-validation-on-submit>
|
||||
<span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" ng-message="valCompare"><localize key="user_passwordMismatch">The confirmed password doesn't match the new password!</localize></span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<umb-button type="submit"
|
||||
button-style="success"
|
||||
state="vm.invitedUserPasswordModel.buttonState"
|
||||
label="Save password">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="form" ng-if="vm.inviteStep === 2">
|
||||
|
||||
<div class="flex justify-center items-center">
|
||||
|
||||
<ng-form name="vm.avatarForm">
|
||||
|
||||
<umb-progress-bar style="max-width: 100px; margin-bottom: 5px;"
|
||||
ng-show="vm.avatarFile.uploadStatus === 'uploading'"
|
||||
progress="{{ vm.avatarFile.uploadProgress }}"
|
||||
size="s">
|
||||
</umb-progress-bar>
|
||||
|
||||
<div class="umb-info-local-item text-error mt3" ng-if="vm.avatarFile.uploadStatus === 'error'">
|
||||
{{ vm.avatarFile.serverErrorMessage }}
|
||||
<div ng-if="vm.inviteStep === 1">
|
||||
<div class="control-group" ng-class="{error: vm.setPasswordForm.password.$invalid}">
|
||||
<label for="umb-passwordOne">
|
||||
<localize key="user_newPassword">New password</localize>
|
||||
<small style="font-size: 13px;">{{vm.invitedUserPasswordModel.passwordPolicyText}}</small>
|
||||
</label>
|
||||
<input type="password" ng-model="vm.invitedUserPasswordModel.password" name="password" id="umb-passwordOne" class="-full-width-input" umb-auto-focus required val-server-field="value" ng-minlength="{{vm.invitedUserPasswordModel.passwordPolicies.minPasswordLength}}" spellcheck="false" />
|
||||
<span ng-messages="inviteUserPasswordForm.password.$error" show-validation-on-submit>
|
||||
<span class="help-inline" ng-message="required"><localize key="user_passwordIsBlank">Your new password cannot be blank!</localize></span>
|
||||
<span class="help-inline" ng-message="minlength">Minimum {{vm.invitedUserPasswordModel.passwordPolicies.minPasswordLength}} characters</span>
|
||||
<span class="help-inline" ng-message="valServerField">{{inviteUserPasswordForm.password.errorMsg}}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a class="umb-avatar-btn"
|
||||
ngf-select
|
||||
ng-model="vm.avatarFile.filesHolder"
|
||||
ngf-change="vm.changeAvatar($files, $event)"
|
||||
ngf-multiple="false"
|
||||
ngf-pattern="{{vm.avatarFile.acceptedFileTypes}}"
|
||||
ngf-max-size="{{ vm.avatarFile.maxFileSize }}">
|
||||
<div class="control-group" ng-class="{error: vm.setPasswordForm.confirmPassword.$invalid}">
|
||||
<label for="umb-confirmPasswordOne"><localize key="user_confirmNewPassword">Confirm new password</localize></label>
|
||||
<input type="password" ng-model="vm.invitedUserPasswordModel.confirmPassword" name="confirmPassword" id="umb-confirmPasswordOne" class="-full-width-input" required val-compare="password" spellcheck="false"/>
|
||||
<span ng-messages="inviteUserPasswordForm.confirmPassword.$error" show-validation-on-submit>
|
||||
<span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" ng-message="valCompare"><localize key="user_passwordMismatch">The confirmed password doesn't match the new password!</localize></span>
|
||||
</span>
|
||||
|
||||
<umb-avatar color="gray"
|
||||
size="xl"
|
||||
unknown-char="+"
|
||||
img-src="{{vm.invitedUser.avatars[3]}}"
|
||||
img-srcset="{{vm.invitedUser.avatars[4]}} 2x, {{vm.invitedUser.avatars[4]}} 3x">
|
||||
</umb-avatar>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<umb-button type="submit"
|
||||
button-style="success"
|
||||
state="vm.invitedUserPasswordModel.buttonState"
|
||||
label="Save password">
|
||||
</umb-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-form>
|
||||
</div>
|
||||
|
||||
<h1 style="margin-bottom: 10px;">Upload a photo</h1>
|
||||
<p style="text-align: center; margin-bottom: 25px; line-height: 1.6em;">
|
||||
<localize key="user_userinviteAvatarMessage">Uploading a photo of yourself will make it easy for other users to recognize you. Click the circle above to upload your photo.</localize>
|
||||
</p>
|
||||
<div class="flex justify-center items-center">
|
||||
<umb-button type="button"
|
||||
button-style="success"
|
||||
label="Done"
|
||||
action="vm.getStarted()">
|
||||
</umb-button>
|
||||
<div class="form" ng-if="vm.inviteStep === 2">
|
||||
<h1 style="margin-bottom: 10px; text-align: left;">
|
||||
<localize key="general_welcome">Welcome...</localize></h1>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div ng-show="vm.invitedUser == null && vm.inviteStep === 3" ng-if="!vm.denyLocalLogin && vm.inviteStep === 3" class="umb-login-container">
|
||||
@@ -106,6 +64,11 @@
|
||||
<p style="line-height: 1.6; margin-bottom: 25px;">
|
||||
<localize key="user_userinviteExpiredMessage">Welcome to Umbraco! Unfortunately your invite has expired. Please contact your administrator and ask them to resend it.</localize>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#" ng-href="#/login" style="text-decoration: underline;">
|
||||
<localize key="login_returnToLogin">Return to login form</localize>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="vm.invitedUser == null && !vm.inviteStep" class="umb-login-container">
|
||||
|
||||
Reference in New Issue
Block a user