christian.suessenguth/password-reset-web
1
0
Fork 0
forked from services/password-reset-web
Code Issues Pull Requests Projects Releases Wiki Activity

Extended the explanations in the text, added some more details regarding the password quality

Browse Source
This commit is contained in:
Christian Süßenguth
2021-04-30 18:56:34 +02:00
parent b0ee150e32
commit 1bab557224
1 changed files with 30 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/SetPassword.vue
View File

@@ -1,9 +1,10 @@
<template> <template>
<div> <div>
<h1>⚿ Submit new password</h1> <h1>ECG account</h1>
<h2>⚿ Set new password</h2>
<div v-if="validationRequestActive" class="alert alert-info"> <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> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</div> </div>
<template v-else> <template v-else>
@@ -11,18 +12,18 @@
<div v-if="!tokenIsValid" class="alert alert-danger" role="alert"> <div v-if="!tokenIsValid" class="alert alert-danger" role="alert">
<template v-if="validationRequestError"> <template v-if="validationRequestError">
<h3>Failed to validate password reset link</h3> <h3>Failed to validate password reset token</h3>
<p>{{ validationRequestError }}</p> <p>{{ validationRequestError }}</p>
</template> </template>
<template v-else> <template v-else>
<h3>Invalid link provided</h3> <h3>Invalid token provided</h3>
<p>This password reset link isn't valid (anymore). Please <p>This password reset token isn't valid (anymore). Please
<router-link :to="{ name: 'request' }" tag="a">renew your password reset request</router-link></p> <router-link :to="{ name: 'request' }" tag="a">send the password reset request</router-link> again.</p>
</template> </template>
</div> </div>
<div v-else> <div v-else>
<div v-if="setRequestFinished" class="alert alert-success" role="alert"> <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> </div>
<form v-else method="POST" class="col-md-10 mb-lg-5" @submit.prevent="onSubmit"> <form v-else method="POST" class="col-md-10 mb-lg-5" @submit.prevent="onSubmit">
<p>Please provide a new password.</p> <p>Please provide a new password.</p>
@@ -46,6 +47,9 @@
</div> </div>
<div class="mb-3 row"> <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> <label for="password-quality" class="col-sm-3 col-form-label">Password quality:</label>
<div class="col-sm-9"> <div class="col-sm-9">
<password-strength :password="password1" class="mt-2" <password-strength :password="password1" class="mt-2"
@@ -60,7 +64,7 @@
<div class="text-end" :title="setButtonTitle"> <div class="text-end" :title="setButtonTitle">
<button class="btn btn-outline-danger" type="submit" id="button-submit" <button class="btn btn-outline-danger" type="submit" id="button-submit"
:disabled="setButtonTitle !== null"> :disabled="setButtonTitle !== null">
<span v-if="!setRequestIsWorking">⮷ Set</span> <span v-if="!setRequestIsWorking">⮷ Set password</span>
<span v-else> <span v-else>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</span> </span>
@@ -71,24 +75,24 @@
</div> </div>
</template> </template>
<h3 class="text-muted">How to choose a good password?</h3> <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 three approved strategies:</p> <p>As of today (2021) there are two approved strategies:</p>
<ul> <ol>
<li>Choose a reasonably complex password using multiple character classes (upper-case, lower-case, special <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
characters). Downside: They are hard to remember for users and potentionally lead to passwords being
reused across different services.</li> 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 <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> 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 <!--<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> yet supported by the ECG services. But it's on our radar.</li>-->
</ul> </ol>
<p>Although currently not technically prevented it's not allowed to reuse a previous password</p> <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>Furthermore we recommend using a password manager like KeePass.</p> <p>Although currently not prevented technically it's <strong>not allowed to reuse your previous password</strong>.</p>
<h6>In the case of problems</h6> <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> <p>
You can find <a href="https://wiki.ecogood.org/x/DYQjB" target="_blank"> 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>.
a detailed explanation of the password reset process in the wiki</a>.
</p> </p>
</div> </div>
</template> </template>
@@ -133,9 +137,9 @@
computed: { computed: {
setButtonTitle: function () { setButtonTitle: function () {
if (this.qualityScore < 4) { 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) { } else if (this.password1 !== this.password2) {
return "The two provided passwords don't match"; return "The two passwords do not match";
} else { } else {
return null; return null;
} }
@@ -181,7 +185,7 @@
}, (error) => { }, (error) => {
let containsResponse = typeof error.response !== 'undefined'; let containsResponse = typeof error.response !== 'undefined';
this.setRequestError = containsResponse && error.response.status === 400 this.setRequestError = containsResponse && error.response.status === 400
? "Insufficient password strength!" ? "Insufficient password quality!"
: error.message; : error.message;
}) })
.finally(() => { .finally(() => {