From 1bab55722497a57a18da48065dee0d30480d589e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20S=C3=BC=C3=9Fenguth?=
 <christian.suessenguth@noreply.%(DOMAIN)s>
Date: Fri, 30 Apr 2021 18:56:34 +0200
Subject: [PATCH] Extended the explanations in the text, added some more
 details regarding the password quality

---
 src/SetPassword.vue | 56 ++++++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/SetPassword.vue b/src/SetPassword.vue
index db1bbc2..430cccc 100644
--- a/src/SetPassword.vue
+++ b/src/SetPassword.vue
@@ -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(() => {