refactor: move static texts to locale file

rotki · Jul 31, 2023 · 8934ee8 · 8934ee8
1 parent eda8fcc
commit 8934ee8
Show file tree

Hide file tree

Showing 16 changed files with 304 additions and 162 deletions.
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -3,15 +3,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer utilities {
-  /* Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}
diff --git a/components/account/activation/AccountActivate.vue b/components/account/activation/AccountActivate.vue
@@ -22,31 +22,32 @@ const validateToken = async () => {
 };
 
 onBeforeMount(async () => await validateToken());
+const { t } = useI18n();
 </script>
 
 <template>
   <div
     class="container py-16 lg:pt-[200px] lg:pb-32 flex flex-col items-center justify-center"
   >
-    <div class="w-[360px]">
+    <div class="w-[380px]">
       <div v-if="validating" class="flex justify-center">
         <RuiProgress variant="indeterminate" circular color="primary" />
       </div>
       <div v-else-if="!isValid" class="space-y-3">
-        <div class="text-h4">Invalid Link</div>
+        <div class="text-h4">{{ t('auth.activation.invalid.title') }}</div>
         <div class="text-body-1 text-rui-text-secondary">
-          The activation link is not valid. This can happen if you have already
-          confirmed your account.
+          {{ t('auth.activation.invalid.message') }}
         </div>
       </div>
       <div v-else class="space-y-3">
-        <div class="text-h4">Welcome to rotki</div>
+        <div class="text-h4">{{ t('auth.activation.success.title') }}</div>
         <div class="text-body-1 text-rui-text-secondary">
           <span>
-            Your rotki account has been successfully activated. To see your
-            dashboard click
+            {{ t('auth.activation.success.message') }}
           </span>
-          <ButtonLink to="/home" inline color="primary">here</ButtonLink>
+          <ButtonLink to="/home" inline color="primary">
+            {{ t('common.here') }}
+          </ButtonLink>
         </div>
       </div>
     </div>

diff --git a/components/account/activation/PendingActivation.vue b/components/account/activation/PendingActivation.vue
@@ -1,12 +1,15 @@
+<script setup lang="ts">
+const { t } = useI18n();
+</script>
+
 <template>
   <div
     class="container py-16 lg:pt-[250px] lg:pb-32 flex flex-col items-center justify-center"
   >
-    <div class="w-[400px] space-y-3">
-      <div class="text-h4">Please check your email</div>
+    <div class="w-[500px] space-y-3">
+      <div class="text-h4">{{ t('auth.pending_activation.title') }}</div>
       <div class="text-body-1 text-rui-text-secondary">
-        A confirm registration link has been send to your account's address.
-        Please check your mailbox to proceed.
+        {{ t('auth.pending_activation.message') }}
       </div>
     </div>
   </div>

diff --git a/components/account/login/LoginForm.vue b/components/account/login/LoginForm.vue
@@ -56,15 +56,16 @@ const performLogin = async () => {
     set(hadError, true);
   }
 };
+
+const { t } = useI18n();
 </script>
 
 <template>
   <div class="w-[360px] space-y-8">
     <div class="space-y-3">
-      <div class="text-h4">Sign in</div>
+      <div class="text-h4">{{ t('auth.login.title') }}</div>
       <div class="text-body-1 text-rui-text-secondary">
-        Premium users unlock the full potential of rotki by removing all limits
-        and unlocking all features.
+        {{ t('auth.login.message') }}
       </div>
     </div>
     <form @submit.prevent="">
@@ -74,7 +75,7 @@ const performLogin = async () => {
           v-model="username"
           dense
           variant="outlined"
-          label="Username"
+          :label="t('auth.common.username')"
           autocomplete="username"
           hide-details
           color="primary"
@@ -87,7 +88,7 @@ const performLogin = async () => {
           v-model="password"
           variant="outlined"
           dense
-          label="Password"
+          :label="t('auth.common.password')"
           autocomplete="current-password"
           hide-details
           color="primary"
@@ -99,7 +100,7 @@ const performLogin = async () => {
 
       <div class="flex justify-end mb-6 mt-2">
         <ButtonLink to="/password/recover" inline>
-          Forgot password?
+          {{ t('auth.login.forgot_password') }}
         </ButtonLink>
       </div>
 
@@ -115,18 +116,19 @@ const performLogin = async () => {
         size="lg"
         @click="performLogin()"
       >
-        Continue
+        {{ t('actions.continue') }}
       </RuiButton>
     </form>
     <div class="flex items-center justify-center">
-      <span class="text-rui-text-secondary"> First time premium? </span>
-      <ButtonLink to="/signup" inline color="primary"> Sign up now </ButtonLink>
+      <span class="text-rui-text-secondary">
+        {{ t('auth.login.first_time_premium') }}
+      </span>
+      <ButtonLink to="/signup" inline color="primary">
+        {{ t('auth.login.sign_up_now') }}
+      </ButtonLink>
     </div>
   </div>
   <div v-if="hadError" class="mt-14 w-[660px]">
-    <RuiAlert
-      type="error"
-      description="If you are writing your username and password from the app, we remind you that they are independent accounts."
-    />
+    <RuiAlert type="error" :description="t('auth.login.alert_error')" />
   </div>
 </template>
diff --git a/components/account/password/PasswordChanged.vue b/components/account/password/PasswordChanged.vue
@@ -1,12 +1,16 @@
+<script setup lang="ts">
+const { t } = useI18n();
+</script>
+
 <template>
   <div
     class="container py-16 lg:pt-[250px] lg:pb-32 flex flex-col items-center justify-center"
   >
     <div class="w-[360px] space-y-8">
       <div class="space-y-3">
-        <div class="text-h4">Password changed</div>
+        <div class="text-h4">{{ t('auth.password_changed.title') }}</div>
         <div class="text-body-1 text-rui-text-secondary">
-          Your password has been successfully reset. Click below to log in.
+          {{ t('auth.password_changed.message') }}
         </div>
       </div>
       <ButtonLink
@@ -16,7 +20,7 @@
         size="lg"
         to="/home"
       >
-        Continue
+        {{ t('actions.continue') }}
       </ButtonLink>
     </div>
   </div>

diff --git a/components/account/password/PasswordForm.vue b/components/account/password/PasswordForm.vue
@@ -59,14 +59,16 @@ const reset = async () => {
   }
   set(loading, false);
 };
+
+const { t } = useI18n();
 </script>
 
 <template>
   <div
     class="container py-16 lg:pt-[200px] lg:pb-32 flex flex-col items-center justify-center"
   >
     <div class="w-[360px] space-y-8">
-      <div class="text-h4">Recover password</div>
+      <div class="text-h4">{{ t('auth.recover_password.title') }}</div>
 
       <form class="space-y-6" @submit.prevent="">
         <div class="space-y-5">
@@ -75,7 +77,7 @@ const reset = async () => {
             v-model="emailAddress"
             dense
             variant="outlined"
-            label="Email"
+            :label="t('auth.common.email')"
             autocomplete="email"
             hide-details
             color="primary"
@@ -97,7 +99,7 @@ const reset = async () => {
           :loading="loading"
           @click="reset()"
         >
-          Submit
+          {{ t('actions.submit') }}
         </RuiButton>
       </form>
     </div>

diff --git a/components/account/password/PasswordLinkSend.vue b/components/account/password/PasswordLinkSend.vue
@@ -1,12 +1,15 @@
+<script setup lang="ts">
+const { t } = useI18n();
+</script>
+
 <template>
   <div
     class="container py-16 lg:pt-[250px] lg:pb-32 flex flex-col items-center justify-center"
   >
     <div class="w-[360px] space-y-3">
-      <div class="text-h4">Password recovery</div>
+      <div class="text-h4">{{ t('auth.password_link_send.title') }}</div>
       <div class="text-body-1 text-rui-text-secondary">
-        A recovery link has been send to your account's address. Please check
-        your mailbox to proceed.
+        {{ t('auth.password_link_send.message') }}
       </div>
     </div>
   </div>

diff --git a/components/account/password/PasswordReset.vue b/components/account/password/PasswordReset.vue
@@ -108,6 +108,8 @@ const { valid, v$ } = setupFormValidation(
   passwordConfirmation,
   $externalResults,
 );
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -119,13 +121,13 @@ const { valid, v$ } = setupFormValidation(
         <RuiProgress variant="indeterminate" circular color="primary" />
       </div>
       <div v-else-if="!isValid" class="space-y-3">
-        <div class="text-h4">Invalid password reset link</div>
+        <div class="text-h4">{{ t('auth.password_reset.invalid.title') }}</div>
         <div class="text-body-1 text-rui-text-secondary">
-          The link you followed doesn't seem like a valid password reset link.
+          {{ t('auth.password_reset.invalid.message') }}
         </div>
       </div>
       <div v-else class="space-y-8">
-        <div class="text-h4">Provide your new password</div>
+        <div class="text-h4">{{ t('auth.password_reset.title') }}</div>
         <form class="space-y-6" @submit.prevent="">
           <div class="space-y-5">
             <div class="space-y-1">
@@ -134,19 +136,24 @@ const { valid, v$ } = setupFormValidation(
                 v-model="password"
                 dense
                 variant="outlined"
-                label="New password"
+                :label="t('auth.password_reset.form.password')"
                 hide-details
                 color="primary"
                 :error-messages="toMessages(v$.password)"
               />
               <ul class="ml-4 list-disc text-rui-text-secondary text-caption">
                 <li>
-                  Your password can't be too similar to your other personal
-                  information.
+                  {{ t('auth.common.password_hint.line_1') }}
+                </li>
+                <li>
+                  {{ t('auth.common.password_hint.line_2') }}
+                </li>
+                <li>
+                  {{ t('auth.common.password_hint.line_3') }}
+                </li>
+                <li>
+                  {{ t('auth.common.password_hint.line_4') }}
                 </li>
-                <li>Your password must contain at least 8 characters.</li>
-                <li>Your password can't be a commonly used password.</li>
-                <li>Your password can't be entirely numeric.</li>
               </ul>
             </div>
             <div>
@@ -155,8 +162,8 @@ const { valid, v$ } = setupFormValidation(
                 v-model="passwordConfirmation"
                 dense
                 variant="outlined"
-                label="Confirm new password"
-                hint="Enter the same password as before, for verification."
+                :label="t('auth.password_reset.form.confirm')"
+                :hint="t('auth.common.confirm_hint')"
                 color="primary"
                 :error-messages="toMessages(v$.passwordConfirmation)"
               />
@@ -171,7 +178,7 @@ const { valid, v$ } = setupFormValidation(
               :loading="submitting"
               @click="submit()"
             >
-              Submit
+              {{ t('actions.submit') }}
             </RuiButton>
           </div>
         </form>