Skip to content
GitLab
Commit b0bc3e5a authored by Estefany's avatar Estefany Committed by Francesc Guasch
Browse files

fix(frontend): Improve users management in admin (#1159) 

Only show errors when the field loses focus
Added a "Show password" button
"Cancel" button now redirects to the users page (before it redirected to the VMs page)

fixes #1140
parent 0feb98b8
Hide whitespace changes
Inline Side-by-side
templates/ng-templates/new_user.html.ep
View file @ b0bc3e5a
......@@ -3,65 +3,72 @@
<form name="new_userForm" role="form" method="post" action="/users/register" novalidate>
<div class="from-group">
<label for="username"><%=l 'Username' %></label>
<input class="form-control" ng-model="username" placeholder="<%=l 'Enter Username' %>" type="text" ng-maxlength="20" ng-minlength="5" name="username" ng-pattern="/^[a-zA-Z0-9_.-]*$/" id="username" required=""><br/>
</div>
<div class="from-group">
<label for="password"><%=l 'Password' %></label>
<input class="form-control" ng-model="password" placeholder="<%=l 'Enter Password' %>" type="password" ng-maxlength="20" ng-minlength="5" name="password" ng-pattern="/^[a-zA-Z0-9]*$/" id="password" required=""><br/>
</div>
<div class="from-group">
<label for="password"><%=l 'Confirm Password' %></label>
<input class="form-control" ng-model="cpassword" placeholder="<%=l 'Confirm Password' %>" type="password" ng-maxlength="20" ng-minlength="5" name="cpassword" ng-pattern="/^[a-zA-Z0-9]*$/" id="confirm_password" onkeyup="checkPass(); return false;" required><span id="confirmMessage" class="confirmMessage"></span><br/>
</div>
<div class="card-text" ng-show="new_userForm.$submitted || new_userForm.username.$touched">
<input class="form-control" ng-model="username" ng-model-onblur placeholder="<%=l 'Enter Username' %>" type="text" ng-maxlength="20" ng-minlength="5" name="username" ng-pattern="/^[a-zA-Z0-9_.-]*$/" id="username" required=""><br/>
</div>
<div class="card-text" ng-show="new_userForm.$submitted || (new_userForm.username.$touched && new_userForm.username.$dirty)">
<div ng-show="new_userForm.username.$error.required" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Username is required' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Username is required' %>.
</div>
<div ng-show="new_userForm.username.$error.maxlength" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Username can not exceed 20 characters' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Username can not exceed 20 characters' %>.
</div>
<div ng-show="new_userForm.username.$error.minlength" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Username must be at least 5 characters' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Username must be at least 5 characters' %>.
</div>
<div ng-show="new_userForm.username.$error.pattern" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Username can only contain words, numbers, dashes, dots and underscores' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Username can only contain words, numbers, dashes, dots and underscores' %>.
</div>
</div>
<div ng-show="new_userForm.$submitted || new_userForm.password.$touched">
<div class="from-group">
<label for="password"><%=l 'Password' %></label>
<div class="input-group mb-3">
<input class="form-control" input ng-attr-type="{{ showPassword ? 'text' : 'password' }}" ng-model="password" ng-model-onblur placeholder="<%=l 'Enter Password' %>" ng-maxlength="20" ng-minlength="5" name="password" ng-pattern="/^[a-zA-Z0-9]*$/" id="password" required=""><br/>
<div class="input-group-append">
<span class="input-group-addon"><button type="button" tabindex="-1" class="btn btn-secondary" ng-model="showPassword" ng-click="showPassword=!showPassword"><i class="{{ showPassword ? 'fa fa-eye' : 'fa fa-eye-slash' }}" aria-hidden="true"></i></button></span>
</div>
</div>
</div>
<div ng-show="new_userForm.$submitted || (new_userForm.password.$touched && new_userForm.password.$dirty)">
<div ng-show="new_userForm.password.$error.required" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Password is required' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Password is required' %>.
</div>
<div ng-show="new_userForm.password.$error.maxlength" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Password can not exceed 20 characters' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Password can not exceed 20 characters' %>.
</div>
<div ng-show="new_userForm.password.$error.minlength" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Password must be at least 5 characters' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Password must be at least 5 characters' %>.
</div>
<div ng-show="new_userForm.password.$error.pattern" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Password can only contain words and numbers' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Password can only contain words and numbers' %>.
</div>
</div>
<div ng-show="new_userForm.$submitted || new_userForm.password.$touched">
<div class="from-group">
<label for="password"><%=l 'Confirm Password' %></label>
<div class="input-group mb-3">
<input class="form-control" ng-model="cpassword" input ng-attr-type="{{ showPassword ? 'text' : 'password' }}" placeholder="<%=l 'Confirm Password' %>" ng-maxlength="20" ng-minlength="5" name="cpassword" ng-pattern="/^[a-zA-Z0-9]*$/" id="confirm_password" required><span id="confirmMessage" class="confirmMessage"></span><br/>
<div class="input-group-append">
<span class="input-group-addon"><button type="button" tabindex="-1" class="btn btn-secondary" ng-model="showPassword" ng-click="showPassword=!showPassword"><i class="{{ showPassword ? 'fa fa-eye' : 'fa fa-eye-slash' }}" aria-hidden="true"></i></button></span>
</div>
</div>
</div>
<div ng-show="new_userForm.$submitted || (new_userForm.cpassword.$touched && new_userForm.cpassword.$dirty)">
<div ng-show="new_userForm.cpassword.$error.required" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Confirm Password is required' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Confirm password is required' %>.
</div>
<div ng-show="new_userForm.cpassword.$error.maxlength" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Confirm Password can not exceed 20 characters' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Confirm password can not exceed 20 characters' %>.
</div>
<div ng-show="new_userForm.cpassword.$error.minlength" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Confirm Password must be at least 5 characters' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Confirm password must be at least 5 characters' %>.
</div>
<div ng-show="new_userForm.cpassword.$error.pattern" class="alert alert-warning">
<strong><%=l 'Error' %></strong>&nbsp;<%=l 'Confirm Password can only contain words and numbers' %>.
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Confirm password can only contain words and numbers' %>.
</div>
<div ng-show="cpassword != password" class="alert alert-danger">
<strong><%=l 'Oops!' %></strong>&nbsp;<%=l 'Passwords do not match!' %>.
</div>
</div>
<button type="reset" class="btn btn-outline-secondary" onclick = "location='/admin/machines'"><%=l 'Cancel' %></button>
<button type="reset" class="btn btn-outline-secondary" onclick = "location='/admin/users'"><%=l 'Cancel' %></button>
<button type="submit" ng-disabled="new_userForm.$invalid || cpassword != password" id="submitbutton" class="btn btn-primary"><%=l 'Submit' %></button>
% if (scalar @$error) {
% for my $i (@$error) {
......@@ -72,32 +79,3 @@
% }
</form>
</div>
<!--check that password matches-->
<script>
function checkPass()
{
var pass1 = document.getElementById('password');
var pass2 = document.getElementById('confirm_password');
var button = document.getElementById('submitbutton');
var message = document.getElementById('confirmMessage');
var goodColor = "#7CFFA6";
var goodColorLetter = "#4FAB6C";
var badColor = "#FFA2A2";
var badColorLetter = "#ff6666";
if(pass1.value == pass2.value){
pass2.style.backgroundColor = goodColor;
message.style.color = goodColorLetter;
message.innerHTML = "Passwords Match!"
return true;
}else{
pass2.style.backgroundColor = badColor;
message.style.color = badColorLetter;
message.innerHTML = "Passwords Do Not Match!"
return false;
}
}
</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment