From 5a426770d3e5d8a1fe2aca4ba4907c3a5fbd42a4 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Wed, 29 Jan 2025 22:13:40 +0100
Subject: [PATCH 1/3] (auth)(ux) warn users if they only have a single login
 method set up

---
 components/Account.vue         | 54 ++++++++++++++++++++++++++++++++++
 locale/_base/translations.suml |  2 ++
 locale/en/translations.suml    |  2 ++
 locale/pl/translations.suml    |  2 ++
 4 files changed, 60 insertions(+)

diff --git a/components/Account.vue b/components/Account.vue
index f60407868..be60639ce 100644
--- a/components/Account.vue
+++ b/components/Account.vue
@@ -206,6 +206,9 @@
             <template #cards-header>
                 <Icon v="id-card" />
                 <T>profile.list</T>
+                <span v-if="profiles !== undefined" class="badge text-bg-light">
+                    {{ Object.keys(profiles).length }}
+                </span>
             </template>
             <template #cards>
                 <Loading :value="profiles">
@@ -226,10 +229,22 @@
             <template #socials-header>
                 <Icon v="sign-in-alt" />
                 <T>user.socialConnection.header</T>
+                <template v-if="authMethodsCount !== null">
+                    <span v-if="authMethodsCount < 2" class="badge text-bg-warning">
+                        <Icon v="exclamation-triangle" />
+                    </span>
+                    <span v-else class="badge text-bg-light">
+                        {{ authMethodsCount }}
+                    </span>
+                </template>
             </template>
             <template #socials>
                 <Loading :value="socialConnections">
                     <template #header>
+                        <div v-if="authMethodsCount !== null && authMethodsCount < 2" class="alert alert-warning">
+                            <Icon v="exclamation-triangle" />
+                            <T>user.tooFewAuthMethods</T>
+                        </div>
                         <div class="form-check form-switch my-2">
                             <label>
                                 <input v-model="socialLookup" class="form-check-input" type="checkbox">
@@ -240,6 +255,36 @@
                         </div>
                     </template>
                     <ul v-if="socialConnections !== undefined" class="list-group">
+                        <li :class="['list-group-item', hasEmail ? 'profile-current' : '']">
+                            <div class="d-md-flex justify-content-between align-items-center">
+                                <h4 class="my-md-0 d-flex align-items-center gap-2">
+                                    <Icon v="envelope"/>
+                                    <T>user.account.changeEmail.header</T>
+                                </h4>
+
+                                <span v-if="hasEmail">
+                                    <span class="me-2">
+                                        {{ user.email }}
+                                    </span>
+                                    <a
+                                        href="#general"
+                                        class="btn btn-light border"
+                                    >
+                                        <Icon v="edit" />
+                                        <T>user.account.changeEmail.action</T>
+                                    </a>
+                                </span>
+                                <span v-else>
+                                    <a
+                                        href="#general"
+                                        class="btn btn-light border border-warning"
+                                    >
+                                        <Icon v="mailbox" />
+                                        <T>user.account.changeEmail.confirm</T>
+                                    </a>
+                                </span>
+                            </div>
+                        </li>
                         <li v-for="(providerOptions, provider) in socialProviders" :key="provider" :class="['list-group-item', socialConnections[provider] !== undefined ? 'profile-current' : '']">
                             <SocialConnection
                                 :provider="provider"
@@ -385,6 +430,15 @@ export default defineComponent({
             }
             return null;
         },
+        hasEmail() {
+            return this.user?.email && !this.user.email.endsWith('.oauth');
+        },
+        authMethodsCount() {
+            if (!this.user || this.socialConnections === undefined) {
+                return null;
+            }
+            return Object.keys(this.socialConnections).length + (this.hasEmail ? 1 : 0);
+        },
     },
     watch: {
         email(v) {
diff --git a/locale/_base/translations.suml b/locale/_base/translations.suml
index 01a4975b7..1e63dc694 100644
--- a/locale/_base/translations.suml
+++ b/locale/_base/translations.suml
@@ -599,6 +599,7 @@ user:
     headerLong: 'Your account'
     tokenExpired: 'Token has expired. Please refresh the website and try again.'
     tooManyAttempts: 'Too many attempts. Access to your account has been temporarily locked. Please try again later.'
+    tooFewAuthMethods: 'We recommend connecting at least two authentication method so that you have a backup option.'
     login:
         help: 'To log in or create an account you can either use the social media buttons or enter your email in the field below and then confirm the code you will have received in your mailbox.'
         placeholder: 'Email (or username, if you''re already registered)'
@@ -642,6 +643,7 @@ user:
             action: 'Change email'
             invalid: 'Invalid email address.'
             taken: 'This address is taken.'
+            confirm: 'Confirm your email'
     logout: 'Log out @%username%'
     logoutAll: 'Log out from all accounts'
     avatar:
diff --git a/locale/en/translations.suml b/locale/en/translations.suml
index c263445ca..2ae6dc5c4 100644
--- a/locale/en/translations.suml
+++ b/locale/en/translations.suml
@@ -803,6 +803,7 @@ user:
     headerLong: 'Your account'
     tokenExpired: 'Token has expired. Please refresh the website and try again.'
     tooManyAttempts: 'Too many attempts. Access to your account has been temporarily locked. Please try again later.'
+    tooFewAuthMethods: 'We recommend connecting at least two authentication method so that you have a backup option.'
     login:
         help: 'To log in or create an account you can either use the social media buttons or enter your email in the field below and then confirm the code you will have received in your mailbox.'
         placeholder: 'Email (or username, if you''re already registered)'
@@ -846,6 +847,7 @@ user:
             action: 'Change email'
             invalid: 'Invalid email address.'
             taken: 'This address is taken.'
+            confirm: 'Confirm your email'
     logout: 'Log out @%username%'
     logoutAll: 'Log out from all accounts'
     avatar:
diff --git a/locale/pl/translations.suml b/locale/pl/translations.suml
index 3a8321e7b..7b4eae948 100644
--- a/locale/pl/translations.suml
+++ b/locale/pl/translations.suml
@@ -1440,6 +1440,7 @@ user:
     headerLong: 'Twoje konto'
     tokenExpired: 'Sesja wygasła. Odśwież stronę i spróbuj ponownie.'
     tooManyAttempts: 'Zbyt wiele prób. Dostęp do Twojego konta został tymczasowo zablokowany. Spróbuj później.'
+    tooFewAuthMethods: 'Zalecamy podpięcie co najmniej dwóch metod logowania, aby mieć opcję zapasową.'
     login:
         help: 'Aby zalogować się lub założyć konto, użyj opcji logowania za pomocą mediów społecznościowych lub wpisz swój email w polu poniżej, a następnie potwierdź kod, który otrzymasz na swoją skrzynkę.'
         placeholder: 'Email (lub nazwa użytkownicza, jeśli już posiadasz konto)'
@@ -1482,6 +1483,7 @@ user:
             action: 'Zmień email'
             invalid: 'Nieprawidłowy adres email.'
             taken: 'Ten adres jest zajęty.'
+            confirm: 'Potwierdź swój adres'
     logout: 'Wyloguj @%username%'
     logoutAll: 'Wyloguj ze wszystkich kont'
     avatar:

From 7d70c620aac8e1d1c5da73912937b9b5175e2a7d Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Wed, 29 Jan 2025 22:15:53 +0100
Subject: [PATCH 2/3] (lint)

---
 components/Account.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Account.vue b/components/Account.vue
index be60639ce..48138d0eb 100644
--- a/components/Account.vue
+++ b/components/Account.vue
@@ -258,7 +258,7 @@
                         <li :class="['list-group-item', hasEmail ? 'profile-current' : '']">
                             <div class="d-md-flex justify-content-between align-items-center">
                                 <h4 class="my-md-0 d-flex align-items-center gap-2">
-                                    <Icon v="envelope"/>
+                                    <Icon v="envelope" />
                                     <T>user.account.changeEmail.header</T>
                                 </h4>
 

From cc2dc6bfa2f0e644046e98115f23ccbf12c2a8c5 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Fri, 31 Jan 2025 22:02:11 +0100
Subject: [PATCH 3/3] CR feedback

---
 components/Account.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Account.vue b/components/Account.vue
index 48138d0eb..35e8ad231 100644
--- a/components/Account.vue
+++ b/components/Account.vue
@@ -254,7 +254,7 @@
                             </label>
                         </div>
                     </template>
-                    <ul v-if="socialConnections !== undefined" class="list-group">
+                    <ul v-if="socialConnections !== null" class="list-group">
                         <li :class="['list-group-item', hasEmail ? 'profile-current' : '']">
                             <div class="d-md-flex justify-content-between align-items-center">
                                 <h4 class="my-md-0 d-flex align-items-center gap-2">
@@ -434,7 +434,7 @@ export default defineComponent({
             return this.user?.email && !this.user.email.endsWith('.oauth');
         },
         authMethodsCount() {
-            if (!this.user || this.socialConnections === undefined) {
+            if (!this.user || this.socialConnections === null) {
                 return null;
             }
             return Object.keys(this.socialConnections).length + (this.hasEmail ? 1 : 0);