i18n: Add more translatable fields (#1358)

frontend/src/components/layout/Header.vue

@@ -41,18 +41,18 @@ if (authStore.user) {
 type NavBarLinks = { link: string; label: string; icon?: any }[];
 
 const navBarLinks: NavBarLinks = [
-  { link: "index", label: "Home" },
-  { link: "authors", label: "Authors" },
-  { link: "staff", label: "Team" },
+  { link: "index", label: t("nav.indexTitle") },
+  { link: "authors", label: t("nav.authorsTitle") },
+  { link: "staff", label: t("nav.staffTitle") },
 ];
 
 const navBarMenuLinksHangar: NavBarLinks = [
-  { link: "index", label: "Home", icon: IconMdiHome },
-  { link: "guidelines", label: "Resource Guidelines", icon: IconMdiFileDocumentAlert },
-  { link: "new", label: "Create Project", icon: IconMdiFolderPlusOutline },
-  { link: "neworganization", label: "Create Organization", icon: IconMdiFolderPlusOutline },
-  { link: "authors", label: "Authors", icon: IconMdiAccountGroup },
-  { link: "staff", label: "Team", icon: IconMdiAccountGroup },
+  { link: "index", label: t("general.home"), icon: IconMdiHome },
+  { link: "guidelines", label: t("guidelines.title"), icon: IconMdiFileDocumentAlert },
+  { link: "new", label: t("nav.links.createProject"), icon: IconMdiFolderPlusOutline },
+  { link: "neworganization", label: t("nav.links.createOrganization"), icon: IconMdiFolderPlusOutline },
+  { link: "authors", label: t("nav.authorsTitle"), icon: IconMdiAccountGroup },
+  { link: "staff", label: t("nav.staffTitle"), icon: IconMdiAccountGroup },
 ];
 if (!authStore.user) {
   navBarMenuLinksHangar.splice(2, 2);

frontend/src/components/projects/ProjectCard.vue

@@ -25,9 +25,9 @@ defineProps<{
         <div class="overflow-clip overflow-hidden min-w-0">
           <div class="inline-flex items-center gap-x-1">
             <h2>
-              <span class="text-xl font-bold">{{ project.name }}</span>
+              <span class="text-xl font-bold">{{ project.name }}&nbsp;</span>
+              <span class="text-sm"> {{ i18n.t("general.by") }}&nbsp;</span>
               <span class="text-sm">
-                by
                 <object type="html/sucks">
                   <Link v-slot="{ classes }" custom>
                     <RouterLink :to="'/' + project.namespace.owner" :class="classes"> {{ project.namespace.owner }} </RouterLink>

frontend/src/i18n/locales/en.json

@@ -6,6 +6,7 @@
     "icon": "US"
   },
   "general": {
+    "by": "by",
     "close": "Close",
     "submit": "Submit",
     "save": "Save",
@@ -31,6 +32,8 @@
     "today": "Today",
     "yesterday": "Yesterday",
     "tomorrow": "Tomorrow",
+    "used": "Used",
+    "reveal": "Reveal",
     "error": {
       "invalidUrl": "Invalid URL format",
       "nameEmpty": "Name cannot be empty",
@@ -83,6 +86,9 @@
     }
   },
   "nav": {
+    "indexTitle": "Home",
+    "authorsTitle": "Authors",
+    "staffTitle": "Staff",
     "login": "Login",
     "signup": "Signup",
     "user": {
@@ -133,6 +139,10 @@
       "javadocs": "JavaDocs",
       "downloads": "Downloads",
       "community": "Community"
+    },
+    "links": {
+      "createProject": "Create Project",
+      "createOrganization": "Create Organization"
     }
   },
   "guidelines": {
@@ -933,20 +943,71 @@
   "auth": {
     "settings": {
       "profile": {
-        "header": "Profile"
+        "header": "Profile",
+        "avatar": "Avatar",
+        "tagline": "Tagline",
+        "social": "Social"
       },
       "account": {
-        "header": "Account"
+        "header": "Account",
+        "username": "Username",
+        "verifyEmail": "Verify email",
+        "currentPassword": "Current Password",
+        "newPassword": "New Password (Optional)"
       },
       "security": {
-        "header": "Security"
+        "header": "Security",
+        "authApp": "Authenticator App",
+        "devices": "Devices",
+        "button": {
+          "setupAuthApp": "Setup 2FA via authenticator app",
+          "setupSecurityKey": "Setup 2FA via security key",
+          "linkGithub": "Link a GitHub account",
+          "linkOther": "Link {0} account",
+          "unlinkAccount": "Unlink {0} account {1}"
+        },
+        "authAppSetup": {
+          "scan": "Scan the QR code on the right using your favorite authenticator app",
+          "cantScan": "Can't scan? Enter the secret listed below the image!",
+          "enterTotp": "Enter a TOTP code generated by your authenticator app in the box below.",
+          "verifyTotp": "Verify TOTP code and activate"
+        },
+        "securityKeys": {
+          "name": "Security Keys",
+          "keyName": "Name",
+          "unregister": "Unregister",
+          "rename": "Rename"
+        },
+        "backupCodes": {
+          "name": "Backup Codes",
+          "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",
+            "backupCode": "Backup Code"
+          }
+        },
+        "unlinkOAuth": {
+          "cantUnlink": "You can't unlink your last oauth credential if you don't have a password set",
+          "modal": {
+            "title": "Successfully unlinked!",
+            "message": "Successfully unlinked your {0} account!",
+            "unlinkUrl": "Click here to remove the Hangar app from your {0} account"
+          }
+        }
       },
       "apiKeys": {
         "header": "API keys"
       },
       "misc": {
         "header": "Other",
-        "accentColor": "Accent Color"
+        "accentColor": "Accent Color",
+        "language": "Language",
+        "alert": {
+          "colorAlert": "The accent colors are mostly untested and full of contrast issues, proceed with caution!",
+          "languageAlert": "Translations are experimental!"
+        }
       }
     }
   },

frontend/src/pages/auth/settings/account.vue

@@ -44,31 +44,31 @@ async function saveAccount() {
   <div v-if="auth.user">
     <PageTitle>{{ t("auth.settings.account.header") }}</PageTitle>
     <form class="flex flex-col gap-2">
-      <InputText v-model="accountForm.username" label="Username" :rules="[required()]" />
+      <InputText v-model="accountForm.username" :label="t('auth.settings.account.username')" :rules="[required()]" />
       <span class="text-sm opacity-85 -mt-1.5">Note that you can only change your username once every 30 days.</span>
       <InputText v-model="accountForm.email" label="Email" autofill="username" autocomplete="username" :rules="[required(), email()]" />
       <Button v-if="!settings?.emailConfirmed" class="w-max" size="small" :disabled="loading" @click.prevent="$emit('openEmailConfirmModal')">
-        Verify email
+        {{ t("auth.settings.account.verifyEmail") }}
       </Button>
       <template v-if="settings?.hasPassword">
         <InputPassword
           v-model="accountForm.currentPassword"
-          label="Current password"
+          :label="t('auth.settings.account.currentPassword')"
           name="current-password"
           autofill="current-password"
           autocomplete="current-password"
           :rules="[required()]"
         />
         <InputPassword
           v-model="accountForm.newPassword"
-          label="New password (optional)"
+          :label="t('auth.settings.account.newPassword')"
           name="new-password"
           autofill="new-password"
           autocomplete="new-password"
         />
       </template>
       <div v-if="error" class="text-red">{{ error }}</div>
-      <Button type="submit" class="w-max" :disabled="loading" @click.prevent="saveAccount">Save</Button>
+      <Button type="submit" class="w-max" :disabled="loading" @click.prevent="saveAccount">{{ t("general.save") }}</Button>
     </form>
   </div>
 </template>

frontend/src/pages/auth/settings/other.vue

@@ -38,10 +38,10 @@ watch(locale, async (newLocale) => {
 <template>
   <div>
     <PageTitle>{{ i18n.t("auth.settings.misc.header") }}</PageTitle>
-    <Alert type="warning" class="mb-4">The accent colors are mostly untested and full of contrast issues, proceed with caution!</Alert>
+    <Alert type="warning" class="mb-4">{{ i18n.t("auth.settings.misc.alert.colorAlert") }}</Alert>
     <InputSelect v-model="accentColor" :values="accentColors" :label="i18n.t('auth.settings.misc.accentColor')" />
 
-    <Alert type="warning" class="my-4">Translations are experimental!</Alert>
+    <Alert type="warning" class="my-4">{{ i18n.t("auth.settings.misc.alert.languageAlert") }}</Alert>
     <InputSelect v-model="locale" :values="languages" :label="i18n.t('auth.settings.misc.language')" />
   </div>
 </template>

frontend/src/pages/auth/settings/profile.vue

@@ -51,7 +51,7 @@ async function saveProfile() {
   <div v-if="auth.user">
     <PageTitle>{{ t("auth.settings.profile.header") }}</PageTitle>
 
-    <h3 class="text-lg font-bold mb-2">Avatar</h3>
+    <h3 class="text-lg font-bold mb-2">{{ t("auth.settings.profile.avatar") }}</h3>
     <div class="relative">
       <UserAvatar :username="auth.user.name" :avatar-url="auth.user.avatarUrl" />
       <AvatarChangeModal :avatar="auth.user.avatarUrl" :action="`users/${auth.user.name}/settings/avatar`">
@@ -61,15 +61,15 @@ async function saveProfile() {
       </AvatarChangeModal>
     </div>
 
-    <h3 class="text-lg font-bold mt-4 mb-2">Tagline</h3>
-    <InputText v-model="profileForm.tagline" label="Tagline" counter :maxlength="useBackendData.validations.userTagline.max" />
+    <h3 class="text-lg font-bold mt-4 mb-2">{{ t("auth.settings.profile.tagline") }}</h3>
+    <InputText v-model="profileForm.tagline" :label="t('auth.settings.profile.avatar')" counter :maxlength="useBackendData.validations.userTagline.max" />
 
-    <h3 class="text-lg font-bold mt-4">Social</h3>
+    <h3 class="text-lg font-bold mt-4">{{ t("auth.settings.profile.social") }}</h3>
     <div v-for="(link, idx) in profileForm.socials" :key="link[0]" class="flex items-center mt-2">
       <span class="w-25">{{ linkTypes.find((e) => e.value === link[0])?.text }}</span>
       <div class="w-75">
         <InputText v-if="link[0] === 'website'" v-model="link[1]" label="URL" :rules="[required(), validUrl()]" />
-        <InputText v-else v-model="link[1]" label="Username" :rules="[required()]" />
+        <InputText v-else v-model="link[1]" :label="t('auth.settings.account.username')" :rules="[required()]" />
       </div>
       <IconMdiBin class="ml-2 w-6 h-6 cursor-pointer hover:color-red" @click="removeLink(idx)" />
     </div>
@@ -78,10 +78,10 @@ async function saveProfile() {
         <Button button-type="secondary" @click.prevent="addLink">Add link</Button>
       </div>
       <div class="w-75">
-        <InputSelect v-model="linkType" :values="linkTypes" label="Type" />
+        <InputSelect v-model="linkType" :values="linkTypes" :label="t('project.settings.links.typeField')" />
       </div>
     </div>
 
-    <Button type="submit" class="w-max mt-2" :disabled="loading" @click.prevent="saveProfile">Save</Button>
+    <Button type="submit" class="w-max mt-2" :disabled="loading" @click.prevent="saveProfile">{{ t("general.save") }}</Button>
   </div>
 </template>