From 34c6d2e5283d07e6006438fc3c5b1af5891b52f8 Mon Sep 17 00:00:00 2001
From: MD <1917406+mdcfe@users.noreply.github.com>
Date: Sat, 10 Aug 2024 15:17:21 +0100
Subject: [PATCH 1/4] Improve login page strings

---
 frontend/src/i18n/locales/en.json | 17 +++++++++++++++++
 frontend/src/pages/auth/login.vue | 31 +++++++++++++++++++++++++------
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index cfbec5a0b..740c44a27 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -939,6 +939,23 @@
     }
   },
   "auth": {
+    "login": {
+      "main": {
+        "title": "Log in to Hangar"
+      },
+      "sudo": {
+        "title": "Verify your identity",
+        "info": "You need to authenticate again to perform this action."
+      },
+      "twoFactor": {
+        "title": "Two-factor authentication",
+        "info": "Your account uses two-factor authentication. Use one of your saved methods to continue.",
+        "webauthn": {
+          "button": "Use passkey",
+          "genericError": "Passkey authentication failed. Try again, or use another method."
+        }
+      }
+    },
     "settings": {
       "profile": {
         "header": "Profile",
diff --git a/frontend/src/pages/auth/login.vue b/frontend/src/pages/auth/login.vue
index e6bed88c2..926ddc65a 100644
--- a/frontend/src/pages/auth/login.vue
+++ b/frontend/src/pages/auth/login.vue
@@ -30,6 +30,26 @@ if (privileged) {
   loading.value = false;
 }
 
+const dialogTitle = computed(() => {
+  if (privileged) {
+    return i18n.t("auth.login.sudo.title");
+  }
+  if (supportedMethods.value.length > 0) {
+    return i18n.t("auth.login.twoFactor.title");
+  }
+  return i18n.t("auth.login.main.title");
+})
+
+const dialogInfo = computed(() => {
+  if (privileged) {
+    return i18n.t("auth.login.sudo.info");
+  }
+  if (supportedMethods.value.length > 0) {
+    return i18n.t("auth.login.twoFactor.info");
+  }
+  return null;
+})
+
 async function loginPassword() {
   if (!(await v.value.$validate())) return;
   loading.value = true;
@@ -125,9 +145,9 @@ useHead(useSeo("Login", null, route, null));
 
 <template>
   <Card class="w-xl mx-auto max-w-full">
-    <template #header>{{ privileged ? "Sudo" : "Login" }}</template>
+    <template #header>{{ dialogTitle }}</template>
 
-    <div v-if="privileged" class="mb-2">Please authenticate again to do this action</div>
+    <div v-if="!!dialogInfo" class="mb-2">{{ dialogInfo }}</div>
 
     <form v-if="supportedMethods.length === 0" class="flex flex-col gap-2">
       <InputText
@@ -185,15 +205,14 @@ useHead(useSeo("Login", null, route, null));
     </form>
 
     <form v-if="supportedMethods.length > 0" class="flex flex-col gap-2 hide-last-hr">
-      <p>Please verify your sign in using one of your second factors</p>
       <template v-if="supportedMethods.includes('WEBAUTHN')">
-        <Button class="w-max" :disabled="loading" @click.prevent="loginWebAuthN">Use WebAuthN</Button>
+        <Button class="w-max" :disabled="loading" @click.prevent="loginWebAuthN">Use WebAuthn</Button>
         <hr />
       </template>
       <template v-if="supportedMethods.includes('TOTP')">
         <div class="flex flex-col gap-2">
-          <InputText v-model="totpCode" label="Totp code" inputmode="numeric" />
-          <Button class="w-max" :disabled="loading" @click.prevent="loginTotp">Use totp</Button>
+          <InputText v-model="totpCode" label="TOTP code" inputmode="numeric" />
+          <Button class="w-max" :disabled="loading" @click.prevent="loginTotp">Use TOTP</Button>
         </div>
         <hr />
       </template>

From 9d078817b5f75c3dab35a3a1697590e7765d59cc Mon Sep 17 00:00:00 2001
From: MD <1917406+mdcfe@users.noreply.github.com>
Date: Sat, 10 Aug 2024 15:18:47 +0100
Subject: [PATCH 2/4] Improve 2FA settings strings

---
 frontend/src/i18n/locales/en.json             | 20 ++++++++++++++-----
 frontend/src/pages/auth/settings/security.vue | 18 +++++++++++++++--
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 740c44a27..7518bd7b1 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -87,8 +87,8 @@
     "indexTitle": "Home",
     "authorsTitle": "Authors",
     "staffTitle": "Staff",
-    "login": "Login",
-    "signup": "Signup",
+    "login": "Log in",
+    "signup": "Sign up",
     "user": {
       "profile": "Profile",
       "notifications": "Notifications",
@@ -972,14 +972,21 @@
       },
       "security": {
         "header": "Security",
-        "authApp": "Authenticator App",
+        "authApp": {
+          "name": "Authenticator App",
+          "none": "Set up a mobile authenticator app to generate one-time passcodes as a two-factor authentication method.",
+          "active": "You have set up an authenticator app as a two-factor method."
+        },
         "devices": "Devices",
         "button": {
           "setupAuthApp": "Setup 2FA via authenticator app",
           "setupSecurityKey": "Setup 2FA via security key",
           "linkGithub": "Link a GitHub account",
+          "linkGoogle": "Link a Google account",
+          "linkMicrosoft": "Link a Microsoft account",
           "linkOther": "Link {0} account",
-          "unlinkAccount": "Unlink {0} account {1}"
+          "unlinkAccount": "Unlink {0} account {1}",
+          "unlinkTotp": "Remove authenticator app"
         },
         "authAppSetup": {
           "scan": "Scan the QR code on the right using your favorite authenticator app",
@@ -991,10 +998,13 @@
           "name": "Security Keys",
           "keyName": "Name",
           "unregister": "Unregister",
-          "rename": "Rename"
+          "rename": "Rename",
+          "registerTitle": "Register a new security key",
+          "none": "You have no security keys registered. You can add a trusted device to your account as a two-factor authentication method."
         },
         "backupCodes": {
           "name": "Backup Codes",
+          "info": "If you lose access to your other two-factor methods, you can use a backup code to log in.",
           "generateNew": "Generate new codes",
           "modal": {
             "title": "Confirm backup codes",
diff --git a/frontend/src/pages/auth/settings/security.vue b/frontend/src/pages/auth/settings/security.vue
index cdad35c57..210f32af8 100644
--- a/frontend/src/pages/auth/settings/security.vue
+++ b/frontend/src/pages/auth/settings/security.vue
@@ -266,8 +266,9 @@ function closeUnlinkModal() {
 <template>
   <div v-if="auth.user">
     <PageTitle>{{ t("auth.settings.security.header") }}</PageTitle>
-    <h3 class="text-lg font-bold mb-2">{{ t("auth.settings.security.authApp") }}</h3>
-    <Button v-if="settings?.hasTotp" :disabled="loading" @click="unlinkTotp">Unlink totp</Button>
+    <h3 class="text-lg font-bold mb-2">{{ t("auth.settings.security.authApp.name") }}</h3>
+    <p class="mb-2">{{ settings?.hasTotp ? t("auth.settings.security.authApp.active") : t("auth.settings.security.authApp.none") }}</p>
+    <Button v-if="settings?.hasTotp" :disabled="loading" @click="unlinkTotp">{{ t("auth.settings.security.button.unlinkTotp") }}</Button>
     <Button v-else-if="!totpData" :disabled="loading" @click="setupTotp"> {{ t("auth.settings.security.button.setupAuthApp") }} </Button>
     <div v-else class="flex lt-sm:flex-col gap-8">
       <div class="flex flex-col gap-2 basis-1/2">
@@ -314,6 +315,8 @@ function closeUnlinkModal() {
         </Button>
       </Modal>
     </ul>
+    <p v-if="settings?.authenticators.length == 0">{{ t("auth.settings.security.securityKeys.none") }}</p>
+    <h4 class="font-semibold mt-4 mb-2">{{ t("auth.settings.security.securityKeys.registerTitle") }}</h4>
     <div class="my-2">
       <InputText
         v-model="authenticatorName"
@@ -325,6 +328,7 @@ function closeUnlinkModal() {
 
     <template v-if="settings?.hasBackupCodes">
       <h3 class="text-lg font-bold mt-4 mb-2">{{ t("auth.settings.security.backupCodes.name") }}</h3>
+      <p>{{ t("auth.settings.security.backupCodes.info") }}</p>
       <div v-if="showCodes" class="flex flex-wrap mt-2 mb-2">
         <div v-for="code in codes" :key="code.code" class="basis-3/12">
           <code>{{ code["used_at"] ? t("general.used") : code.code }}</code>
@@ -343,6 +347,14 @@ function closeUnlinkModal() {
           <IconMdiGithub class="mr-1" />
           {{ t("auth.settings.security.button.linkGithub") }}
         </template>
+        <template v-else-if="provider === 'google'">
+          <IconMdiGoogle class="mr-1" />
+          {{ t("auth.settings.security.button.linkGoogle") }}
+        </template>
+        <template v-else-if="provider === 'microsoft'">
+          <IconMdiMicrosoft class="mr-1" />
+          {{ t("auth.settings.security.button.linkMicrosoft") }}
+        </template>
         <template v-else> {{ t("auth.settings.security.button.linkOther", [provider]) }} </template>
       </Button>
     </div>
@@ -383,11 +395,13 @@ function closeUnlinkModal() {
       <Button class="mt-2" :disabled="v.$invalid" @click="confirmAndRepeat">{{ t("general.confirm") }}</Button>
     </Modal>
 
+    <!-- TODO: implement session list
     <h3 class="text-lg font-bold mt-4 mb-2">{{ t("auth.settings.security.devices") }}</h3>
     <ComingSoon>
       last login<br />
       on revoke iphone<br />
       revoke all
     </ComingSoon>
+    -->
   </div>
 </template>

From e4696a55830d1554db56498cd863183c9d9de7b5 Mon Sep 17 00:00:00 2001
From: MD <1917406+mdcfe@users.noreply.github.com>
Date: Sat, 10 Aug 2024 16:08:04 +0100
Subject: [PATCH 3/4] More security page layout/strings improvements

---
 frontend/src/i18n/locales/en.json             | 6 +++---
 frontend/src/pages/auth/settings/security.vue | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 7518bd7b1..7ea0ab3de 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -1007,9 +1007,9 @@
           "info": "If you lose access to your other two-factor methods, you can use a backup code to log in.",
           "generateNew": "Generate new codes",
           "modal": {
-            "title": "Confirm backup codes",
-            "needConfigure": "You need to configure backup codes before you can activate 2fa. Please save these codes securely!",
-            "confirm": "Confirm that you saved the backup codes by entering one of them below",
+            "title": "Save your backup codes",
+            "needConfigure": "If you ever lose access to your main two-factor authentication methods, you can use these backup codes once to log in.",
+            "confirm": "Store these backup codes somewhere. To finish setting up two-factor authentication, confirm that you saved the backup codes by entering one of them below:",
             "backupCode": "Backup Code"
           }
         },
diff --git a/frontend/src/pages/auth/settings/security.vue b/frontend/src/pages/auth/settings/security.vue
index 210f32af8..7f79ef292 100644
--- a/frontend/src/pages/auth/settings/security.vue
+++ b/frontend/src/pages/auth/settings/security.vue
@@ -281,7 +281,7 @@ function closeUnlinkModal() {
         </div>
       </div>
       <div class="basis-1/2">
-        <img :src="totpData.qrCode" alt="totp qr code" class="w-60" />
+        <img :src="totpData.qrCode" alt="QR code for TOTP setup" class="w-60" />
         <small>{{ totpData.secret }}</small>
       </div>
     </div>
@@ -328,7 +328,7 @@ function closeUnlinkModal() {
 
     <template v-if="settings?.hasBackupCodes">
       <h3 class="text-lg font-bold mt-4 mb-2">{{ t("auth.settings.security.backupCodes.name") }}</h3>
-      <p>{{ t("auth.settings.security.backupCodes.info") }}</p>
+      <p class="mb-2">{{ t("auth.settings.security.backupCodes.info") }}</p>
       <div v-if="showCodes" class="flex flex-wrap mt-2 mb-2">
         <div v-for="code in codes" :key="code.code" class="basis-3/12">
           <code>{{ code["used_at"] ? t("general.used") : code.code }}</code>
@@ -386,7 +386,7 @@ function closeUnlinkModal() {
           <code>{{ code.code }}</code>
         </div>
       </div>
-      {{ t("auth.settings.security.backupCodes.modal.confirm") }}
+      <p class="mb-2">{{ t("auth.settings.security.backupCodes.modal.confirm") }}</p>
       <InputText
         v-model="backupCodeConfirm"
         :label="t('auth.settings.security.backupCodes.modal.backupCode')"

From 6ed675eeb85cf960fb5ed45cbcef07813afbcee7 Mon Sep 17 00:00:00 2001
From: MD <1917406+mdcfe@users.noreply.github.com>
Date: Sat, 10 Aug 2024 16:39:05 +0100
Subject: [PATCH 4/4] Improve backup code modal text

---
 frontend/src/i18n/locales/en.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 7ea0ab3de..5310dc8ae 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -1008,9 +1008,9 @@
           "generateNew": "Generate new codes",
           "modal": {
             "title": "Save your backup codes",
-            "needConfigure": "If you ever lose access to your main two-factor authentication methods, you can use these backup codes once to log in.",
-            "confirm": "Store these backup codes somewhere. To finish setting up two-factor authentication, confirm that you saved the backup codes by entering one of them below:",
-            "backupCode": "Backup Code"
+            "needConfigure": "If you ever lose access to your main two-factor authentication methods, you can use these backup codes to log in. Store these somewhere safe.",
+            "confirm": "To finish setting up two-factor authentication, confirm that you saved the backup codes by entering one of them below:",
+            "backupCode": "Enter a backup code"
           }
         },
         "unlinkOAuth": {