Skip to content
This repository has been archived by the owner on Jul 12, 2023. It is now read-only.

Update change password javascript and styles #1980

Merged
merged 1 commit into from
Apr 5, 2021
Merged

Update change password javascript and styles #1980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions assets/assets.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ var serverStaticFS, _ = fs.Sub(serverFS, "server/static")
// ServerStaticFS returns the file system for the server static assets, rooted
// at static/.
func ServerStaticFS() fs.FS {
if project.DevMode() {
return os.DirFS(project.Root("assets", "server", "static"))
}

return serverStaticFS
}

Expand Down
53 changes: 28 additions & 25 deletions assets/server/login/_loginscripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,41 +80,44 @@
{{end}}

{{define "login/pwd-validate"}}
<p class="card-text ml-4">
<small class="form-text text-muted">
{{if .requirements.HasRequirements}}
<span class="row">Password should be:</span>
<div class="text-secondary mb-3">
{{if .requirements.HasRequirements}}
{{if gt .requirements.Length 0}}
<span class="row ml-1" id="length-req">
<span id="icon" aria-hidden="true"></span>At least {{.requirements.Length}} characters long
</span>
<div id="length-req">
<span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
At least {{.requirements.Length}} characters long
</div>
{{end}}
{{if gt .requirements.Uppercase 0}}
<span class="row ml-1" id="upper-req">
<span id="icon" aria-hidden="true"></span>Contain {{.requirements.Uppercase}} uppercase letter
</span>
<div id="upper-req">
<span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
Contain {{.requirements.Uppercase}} uppercase letter
</div>
{{end}}
{{if gt .requirements.Lowercase 0}}
<span class="row ml-1" id="lower-req">
<span id="icon" aria-hidden="true"></span>Contain {{.requirements.Lowercase}} lowercase letter
</span>
<div id="lower-req">
<span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
Contain {{.requirements.Lowercase}} lowercase letter
</div>
{{end}}
{{if gt .requirements.Number 0}}
<span class="row ml-1" id="num-req">
<span id="icon" aria-hidden="true"></span>Contain {{.requirements.Number}} number
</span>
<div id="num-req">
<span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
Contain {{.requirements.Number}} number
</div>
{{end}}
{{if gt .requirements.Special 0}}
<span class="row ml-1" id="special-req">
<span id="icon" aria-hidden="true"></span>Contain {{.requirements.Special}} special character
</span>
{{end}}
<div id="special-req">
<span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
Contain {{.requirements.Special}} special character
</div>
{{end}}
<span class="row ml-1" id="retyped">
<span id="icon" aria-hidden="true"></span>Retyped password must match password
</span>
</small>
</p>
{{end}}
<div id="retyped">
<span class="oi oi-circle-x pr-1 small" aria-hidden="true"></span>
Retyped password must match password
</div>
</div>
{{end}}

{{define "login/requirements"}}
Expand Down
75 changes: 36 additions & 39 deletions assets/server/login/change-password.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,49 +13,44 @@
<main role="main" class="container">
{{template "flash" .}}

<div class="d-flex vh-100">
<div class="d-flex w-100 justify-content-center align-self-center">
<div class="col-sm-6">
<div class="card shadow-sm" id="login-div">
<div class="card-header">Change password</div>
<div class="card-body">
<form id="password-form" class="floating-form" action="/login/change-password" method="POST">
{{.csrfField}}
<div class="form-label-group">
<input type="email" id="email" name="email" class="form-control" placeholder="Email address"
value="{{.currentUser.Email}}" required autofocus disabled/>
<label for="email">Email address</label>
</div>
<div class="form-label-group mb-2">
<input type="password" id="password" class="form-control" placeholder="Old password"
autocomplete="password" required />
<label for="password">Old password</label>
</div>
<div class="form-label-group mb-2">
<input type="password" id="new-password" class="form-control" placeholder="New password"
autocomplete="new-password" required />
<label for="password">New password</label>
</div>
<div class="form-label-group">
<input type="password" id="retype" class="form-control" placeholder="Retype new password"
autocomplete="new-password" required />
<label for="retype">Retype new password</label>
</div>

{{template "login/pwd-validate" .}}
</form>
<form class="floating-form">
<button type="submit" id="submit" class="btn btn-primary btn-block" disabled>Set password</button>
</form>
<a class="float-right mt-3 card-link" href="/account">Account settings</a>
</div>
<div class="card shadow-sm" id="login-div">
<div class="card-header">Change password</div>
<div class="card-body">
<form id="password-form" class="floating-form" action="/login/change-password" method="POST">
{{.csrfField}}
<div class="form-label-group">
<input type="email" id="email" name="email" class="form-control" placeholder="Email address"
value="{{.currentUser.Email}}" required autofocus disabled />
<label for="email">Email address</label>
</div>
<div class="form-label-group">
<input type="password" id="password" class="form-control" placeholder="Old password"
autocomplete="password" required />
<label for="password">Old password</label>
</div>

<hr>

{{template "login/pwd-validate" .}}

<div class="form-label-group mb-2">
<input type="password" id="new-password" class="form-control" placeholder="New password"
autocomplete="new-password" required />
<label for="password">New password</label>
</div>
<div class="form-label-group">
<input type="password" id="retype" class="form-control" placeholder="Retype new password"
autocomplete="new-password" required />
<label for="retype">Retype new password</label>
</div>

{{template "login/pindiv" .}}
{{template "login/factorsdiv" .}}
</div>
<button type="submit" id="submit" class="btn btn-primary btn-block" disabled>Set password</button>
</form>
</div>
</div>

{{template "login/pindiv" .}}
{{template "login/factorsdiv" .}}
</main>

{{template "loginscripts" .}}
Expand All @@ -77,6 +72,8 @@
$submit.prop('disabled', !checkPasswordValid($newPassword.val(), $retype.val(), requirements));
});

checkPasswordValid('', '', requirements);

let fn = function doChangePassword() {
let email = $email.val().trim();
let pwd = $newPassword.val();
Expand Down
40 changes: 18 additions & 22 deletions assets/server/static/js/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,11 +314,11 @@ async function uploadWithRetries(uploadFn) {
function checkPasswordValid(pwd, retype, requirements) {
let valid = true;

if (pwd != retype) {
if (pwd && pwd.length > 0 && pwd == retype) {
decorateValid($('#retyped'));
valid = false;
} else {
decorateInvalid($('#retyped'));
valid = false;
}

if (requirements) {
Expand All @@ -341,57 +341,53 @@ function checkPasswordValid(pwd, retype, requirements) {
}

if (pwd.length < requirements.Length) {
decorateValid($('#length-req'));
decorateInvalid($('#length-req'));
valid = false;
} else {
decorateInvalid($('#length-req'));
decorateValid($('#length-req'));
}

if (upper < requirements.Uppercase) {
decorateValid($('#upper-req'));
decorateInvalid($('#upper-req'));
valid = false;
} else {
decorateInvalid($('#upper-req'));
decorateValid($('#upper-req'));
}

if (lower < requirements.Lowercase) {
decorateValid($('#lower-req'));
decorateInvalid($('#lower-req'));
valid = false;
} else {
decorateInvalid($('#lower-req'));
decorateValid($('#lower-req'));
}

if (digit < requirements.Number) {
decorateValid($('#num-req'));
decorateInvalid($('#num-req'));
valid = false;
} else {
decorateInvalid($('#num-req'));
decorateValid($('#num-req'));
}

if (special < requirements.Special) {
decorateValid($('#special-req'));
decorateInvalid($('#special-req'));
valid = false;
} else {
decorateInvalid($('#special-req'));
decorateValid($('#special-req'));
}
}

return valid;
}

const errClass = "oi oi-circle-x pr-1";
const checkClass = "oi oi-circle-check pr-1";
const errClass = "oi-circle-x text-danger";
const checkClass = "oi-circle-check text-success";

function decorateValid($element) {
$element.find("#icon").attr("class", errClass);
$element.addClass("text-danger");
$element.removeClass("text-muted");
function decorateInvalid($element) {
$element.find(".oi").removeClass(checkClass).addClass(errClass);
}

function decorateInvalid($element) {
$element.find("#icon").attr("class", checkClass);
$element.addClass("text-muted");
$element.removeClass("text-danger");
function decorateValid($element) {
$element.find(".oi").removeClass(errClass).addClass(checkClass);
}

function loginScripts(hasCurrentUser, onLoginSuccess) {
Expand Down