forked from services/password-reset-web
Extended the explanations in the text, added some more details regarding the password quality
This commit is contained in:
Christian Süßenguth
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>⚿ Submit new password</h1>
|
||||
<h1>ECG account</h1>
|
||||
<h2>⚿ Set new password</h2>
|
||||
|
||||
<div v-if="validationRequestActive" class="alert alert-info">
|
||||
Validating reset token …
|
||||
Validating password reset token …
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
</div>
|
||||
<template v-else>
|
||||
@@ -11,18 +12,18 @@
|
||||
|
||||
<div v-if="!tokenIsValid" class="alert alert-danger" role="alert">
|
||||
<template v-if="validationRequestError">
|
||||
<h3>Failed to validate password reset link</h3>
|
||||
<h3>Failed to validate password reset token</h3>
|
||||
<p>{{ validationRequestError }}</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h3>Invalid link provided</h3>
|
||||
<p>This password reset link isn't valid (anymore). Please
|
||||
<router-link :to="{ name: 'request' }" tag="a">renew your password reset request</router-link></p>
|
||||
<h3>Invalid token provided</h3>
|
||||
<p>This password reset token isn't valid (anymore). Please
|
||||
<router-link :to="{ name: 'request' }" tag="a">send the password reset request</router-link> again.</p>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="setRequestFinished" class="alert alert-success" role="alert">
|
||||
✊ Your password has been set successfully! The change takes effect immediately.
|
||||
✊ Your password has been set <strong>successfully</strong>! The new password takes effect immediately.
|
||||
</div>
|
||||
<form v-else method="POST" class="col-md-10 mb-lg-5" @submit.prevent="onSubmit">
|
||||
<p>Please provide a new password.</p>
|
||||
@@ -46,6 +47,9 @@
|
||||
</div>
|
||||
|
||||
<div class="mb-3 row">
|
||||
<p>
|
||||
Please read the guidelines on <a href="#faq-how-to-choose-good-pwd">How to choose a strong password?</a> below. You can only procees as soon as the following progress bar <strong>turns green</strong>.
|
||||
</p>
|
||||
<label for="password-quality" class="col-sm-3 col-form-label">Password quality:</label>
|
||||
<div class="col-sm-9">
|
||||
<password-strength :password="password1" class="mt-2"
|
||||
@@ -60,7 +64,7 @@
|
||||
<div class="text-end" :title="setButtonTitle">
|
||||
<button class="btn btn-outline-danger" type="submit" id="button-submit"
|
||||
:disabled="setButtonTitle !== null">
|
||||
<span v-if="!setRequestIsWorking">⮷ Set</span>
|
||||
<span v-if="!setRequestIsWorking">⮷ Set password</span>
|
||||
<span v-else>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
</span>
|
||||
@@ -71,24 +75,24 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<h3 class="text-muted">How to choose a good password?</h3>
|
||||
<p>As of today (2021) there are three approved strategies:</p>
|
||||
<h3 class="text-muted" id="faq-how-to-choose-good-pwd">How to choose a strong password?</h3>
|
||||
<p>As of today (2021) there are two approved strategies:</p>
|
||||
|
||||
<ul>
|
||||
<li>Choose a reasonably complex password using multiple character classes (upper-case, lower-case, special
|
||||
characters). Downside: They are hard to remember for users and potentionally lead to passwords being
|
||||
<ol>
|
||||
<li>Choose a <strong>reasonably complex password</strong> using <strong>multiple character classes</strong> (like uppercase, lowercase, special characters). Downside: They are hard to remember for users and potentionally lead to passwords being
|
||||
reused across different services.</li>
|
||||
<li>Choose a long password that consists of a personal sentence which is hard to break for machines and easy
|
||||
to remember for users</li>
|
||||
<li>Just for the sake of completeness: Choose a second factor to get the best possible security. This is not
|
||||
yet supported by the ECG services. But it's on our radar.</li>
|
||||
</ul>
|
||||
<p>Although currently not technically prevented it's not allowed to reuse a previous password</p>
|
||||
<p>Furthermore we recommend using a password manager like KeePass.</p>
|
||||
<h6>In the case of problems</h6>
|
||||
<li>Choose a <strong>long password</strong> that consists of a personal sentence which is hard to break for machines and easy
|
||||
to remember for users.</li>
|
||||
<!--<li>Just for the sake of completeness: Choose a second factor to get the best possible security. This is not
|
||||
yet supported by the ECG services. But it's on our radar.</li>-->
|
||||
</ol>
|
||||
<p>If you want to create a good password you can refer to this service: <a href="https://passwordcreator.org/nl.html" target="_blank">Dutch</a> | <a href="https://passwordcreator.org/fr.html" target="_blank">French</a> | <a href="https://passwordcreator.org" target="_blank">English</a> | <a href="https://passwordcreator.org/de.html" target="_blank">German</a> | <a href="https://passwordcreator.org/es.html" target="_blank">Spanish</a>
|
||||
<p>Although currently not prevented technically it's <strong>not allowed to reuse your previous password</strong>.</p>
|
||||
<p>Furthermore we recommend using a password manager like <a href="https://keepass.info/" target="_blank">KeePass</a>.</p>
|
||||
<br />
|
||||
<h5>In case of a problem</h5>
|
||||
<p>
|
||||
You can find <a href="https://wiki.ecogood.org/x/DYQjB" target="_blank">
|
||||
a detailed explanation of the password reset process in the wiki</a>.
|
||||
You find <a href="https://wiki.ecogood.org/x/DYQjB" target="_blank"> a detailed explanation of the whole password reset process</a> in the ECG Wiki.<br />For further help just open a ticket at the <a href="https://wiki.ecogood.org/display/PUBLIC/IT-Support" target="_blank">IT support</a>.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -133,9 +137,9 @@
|
||||
computed: {
|
||||
setButtonTitle: function () {
|
||||
if (this.qualityScore < 4) {
|
||||
return 'The password strength is too low to be accepted';
|
||||
return 'The password quality is too low';
|
||||
} else if (this.password1 !== this.password2) {
|
||||
return "The two provided passwords don't match";
|
||||
return "The two passwords do not match";
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
@@ -181,7 +185,7 @@
|
||||
}, (error) => {
|
||||
let containsResponse = typeof error.response !== 'undefined';
|
||||
this.setRequestError = containsResponse && error.response.status === 400
|
||||
? "Insufficient password strength!"
|
||||
? "Insufficient password quality!"
|
||||
: error.message;
|
||||
})
|
||||
.finally(() => {
|
||||
|
||||
Reference in New Issue
Block a user