Better help messages, styling

webapp/locales/de.json

@@ -169,8 +169,16 @@
       "success": "Eine neue E-Mail Addresse wurde registriert.",
       "submitted": "Eine E-Mail zur Bestätigung deiner Adresse wurde an <b>{email}</b> gesendet.",
       "change-successful": "Deine E-Mail Adresse wurde erfolgreich geändert.",
-      "change-error": "Deine E-Mail Adresse konnte nicht verifiziert werden.",
-      "change-error-help": "Vielleicht ist der Bestätigungscode falsch oder diese E-Mail Adresse wurde nicht hinterlegt?"
+      "change-error": {
+        "message": "Deine E-Mail Adresse konnte nicht verifiziert werden.",
+        "support": "Wenn das Problem weiterhin besteht, kontaktiere uns gerne per E-Mail an",
+        "explanation": "Das kann verschiedene Ursachen haben:",
+        "reason": {
+          "invalid-nonce": "Ist der Bestätigungscode falsch?",
+          "no-email-request": "Wurde gar keine Änderung der E-Mail Adresse angefragt?",
+          "email-address-taken": "Wurde die E-Mail inzwischen einem anderen Benutzer zugewiesen?"
+        }
+      }
     },
     "validation": {
       "slug": {

webapp/locales/en.json

@@ -2,7 +2,7 @@
   "maintenance": {
     "title": "Human Connection is under maintenance",
     "explanation": "At the moment we are doing some scheduled maintenance, please try again later.",
-    "questions": "Any Questions or concerns, send an email to" 
+    "questions": "Any Questions or concerns, send an email to"
   },
   "index": {
     "no-results": "No contributions found.",
@@ -170,8 +170,16 @@
       "success": "A new E-Mail address has been registered.",
       "submitted": "An email to verify your address has been sent to <b>{email}</b>.",
       "change-successful": "Your E-Mail address has been changed successfully.",
-      "change-error": "Your E-Mail could not be changed.",
-      "change-error-help": "Maybe the code was invalid or you did not add a new E-Mail address before?"
+      "change-error": {
+        "message": "Your E-Mail could not be changed.",
+        "explanation": "This can have different causes:",
+        "reason": {
+          "invalid-nonce": "Is the confirmation code invalid?",
+          "no-email-request": "You haven't requested a change of your email address at all?",
+          "email-address-taken": "Has the email been assigned to another user in the meantime?"
+        },
+        "support": "If the problem persists, please contact us by e-mail at"
+      }
     },
     "validation": {
       "slug": {

webapp/pages/settings/my-email-address/verify.vue

@@ -1,18 +1,40 @@
 <template>
-  <ds-card centered>
+  <ds-card>
     <client-only>
       <transition name="ds-transition-fade">
         <sweetalert-icon :icon="sweetAlertIcon" />
       </transition>
+      <ds-space v-if="success">
+        <ds-text>
+          {{ $t(`settings.email.change-successful`) }}
+        </ds-text>
+      </ds-space>
+      <template v-else>
+        <ds-text bold align="center">
+          {{ $t(`settings.email.change-error.message`) }}
+        </ds-text>
+        <ds-space class="message">
+          <ds-text>
+            <ds-space margin-top="large" margin-bottom="small">
+              {{ $t(`settings.email.change-error.explanation`) }}
+            </ds-space>
+            <ds-list>
+              <ds-list-item>
+                {{ $t(`settings.email.change-error.reason.invalid-nonce`) }}
+              </ds-list-item>
+              <ds-list-item>
+                {{ $t(`settings.email.change-error.reason.no-email-request`) }}
+              </ds-list-item>
+              <ds-list-item>
+                {{ $t(`settings.email.change-error.reason.email-address-taken`) }}
+              </ds-list-item>
+            </ds-list>
+            {{ $t('settings.email.change-error.support') }}
+            <a href="mailto:support@human-connection.org">support@human-connection.org</a>
+          </ds-text>
+        </ds-space>
+      </template>
     </client-only>
-    <ds-text v-if="success">
-      {{ $t(`settings.email.change-successful`) }}
-    </ds-text>
-    <ds-text v-else>
-      {{ $t(`settings.email.change-error`) }}
-      <br />
-      {{ $t(`settings.email.change-error-help`) }}
-    </ds-text>
   </ds-card>
 </template>
 
@@ -69,3 +91,10 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.message {
+  display: flex;
+  justify-content: space-around;
+}
+</style>