complete i18n for auth routes

console/app/controllers/auth/forgot-password.js

@@ -18,6 +18,13 @@ export default class AuthForgotPasswordController extends Controller {
      */
     @service notifications;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @memberof AuthForgotPasswordController
+     */
+    @service intl;
+
     /**
      * The email variable
      *
@@ -55,7 +62,7 @@ export default class AuthForgotPasswordController extends Controller {
         this.fetch
             .post('auth/get-magic-reset-link', { email })
             .then(() => {
-                this.notifications.success('Check your email to continue!');
+                this.notifications.success(this.intl.t('auth.forgot-password.success-message'));
                 this.isSent = true;
             })
             .catch((error) => {

console/app/controllers/auth/login.js

@@ -33,7 +33,6 @@ export default class AuthLoginController extends Controller {
      */
     @service session;
 
-
     /**
      * Inject the `router` service
      *
@@ -41,6 +40,13 @@ export default class AuthLoginController extends Controller {
      */
     @service router;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
     /**
      * Whether or not to remember the users session
      *
@@ -185,7 +191,7 @@ export default class AuthLoginController extends Controller {
      * @void
      */
     slowConnection() {
-        this.notifications.error('Experiencing connectivity issues.');
+        this.notifications.error(this.intl.t('auth.login.slow-connection-message'));
     }
 
     /**

console/app/controllers/auth/reset-password.js

@@ -25,6 +25,13 @@ export default class AuthResetPasswordController extends Controller {
      */
     @service router;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @memberof AuthResetPasswordController
+     */
+    @service intl;
+
     /**
      * The code param.
      *
@@ -70,7 +77,7 @@ export default class AuthResetPasswordController extends Controller {
         this.fetch
             .post('auth/reset-password', { link: id, code, password, password_confirmation })
             .then(() => {
-                this.notifications.success('Your password has been reset! Login to continue.');
+                this.notifications.success(this.intl.t('auth.reset-password.success-message'));
 
                 return this.router.transitionTo('auth.login');
             })

console/app/templates/auth/login.hbs

@@ -3,7 +3,7 @@
         <LogoIcon @url={{@brand.icon_url}} @size="12" class="mx-auto" />
     </div>
     <h2 class="mt-6 mb-3 text-3xl font-extrabold leading-9 text-center text-gray-900 dark:text-gray-100">
-        Sign in to your account
+        {{t "auth.login.title"}}
     </h2>
 </div>
 
@@ -14,10 +14,10 @@
                 <FaIcon @icon="exclamation-triangle" @size="lg" class="text-yellow-900 mr-4" />
             </div>
             <p class="flex-1 text-sm text-yellow-900 dark:yellow-red-900">
-                <strong>Forgot your password?</strong><br> Click the button below to reset your password.
+                {{t "auth.login.failed-attempt.message" htmlSafe=true}}
             </p>
         </div>
-        <Button @text="Ok, help me reset!" @type="warning" @onClick={{this.forgotPassword}} />
+        <Button @text={{t "auth.login.failed-attempt.button-text"}} @type="warning" @onClick={{this.forgotPassword}} />
     </div>
 {{/if}}
 
@@ -25,10 +25,10 @@
     <input type="hidden" name="remember" value="true" />
     <div class="rounded-md shadow-sm">
         <div>
-            <Input @value={{this.email}} aria-label="Email address" name="email" @type="email" autocomplete="username" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-none appearance-none rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5 dark:text-white dark:bg-gray-700 dark:border-gray-900" placeholder="Email address" disabled={{this.isLoading}} />
+            <Input @value={{this.email}} aria-label={{t "auth.login.form.email-label"}} name="email" @type="email" autocomplete="username" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-none appearance-none rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5 dark:text-white dark:bg-gray-700 dark:border-gray-900" placeholder={{t "auth.login.form.email-label"}} disabled={{this.isLoading}} />
         </div>
         <div class="-mt-px">
-            <Input @value={{this.password}} aria-label="Password" name="password" @type="password" autocomplete="current-password" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-none appearance-none rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5 dark:text-white dark:bg-gray-700 dark:border-gray-900" placeholder="Password" disabled={{this.isLoading}} />
+            <Input @value={{this.password}} aria-label={{t "auth.login.form.password-label"}} name="password" @type="password" autocomplete="current-password" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-none appearance-none rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5 dark:text-white dark:bg-gray-700 dark:border-gray-900" placeholder={{t "auth.login.form.password-label"}} disabled={{this.isLoading}} />
         </div>
     </div>
 
@@ -36,22 +36,22 @@
         <div class="flex items-center">
             <Input id="rememberMe" @type="checkbox" @checked={{this.rememberMe}} disabled={{this.isLoading}} class="w-4 h-4 transition duration-150 ease-in-out form-checkbox text-sky-500" />
             <label for="rememberMe" class="block ml-2 text-sm leading-5 text-gray-900 dark:text-gray-100">
-                Remember me
+                {{t "auth.login.form.remember-me-label"}}
             </label>
         </div>
 
         <div class="text-sm leading-5">
             <a href="javascript:;" {{on "click" this.forgotPassword}} disabled={{this.isLoading}} class="font-medium transition duration-150 ease-in-out text-sky-600 hover:text-sky-500 focus:outline-none focus:underline">
-                Forgot your password?
+                {{t "auth.login.form.forgot-password-label"}}
             </a>
         </div>
     </div>
 
     <div class="mt-6">
-        <Button @buttonType="submit" @type="primary" @text="Sign In" @icon="lock" @wrapperClass="btn-block" @isLoading={{this.isLoading}} @onClick={{this.login}} />
+        <Button @buttonType="submit" @type="primary" @text={{t "auth.login.form.sign-in-button"}} @icon="lock" @wrapperClass="btn-block" @isLoading={{this.isLoading}} @onClick={{this.login}} />
     </div>
 
     <div class="mt-3">
-        <Button @text="Create a new Account" @wrapperClass="btn-block" @disabled={{this.isLoading}} @onClick={{fn (transition-to "onboard")}} />
+        <Button @text={{t "auth.login.form.create-account-button"}} @wrapperClass="btn-block" @disabled={{this.isLoading}} @onClick={{fn (transition-to "onboard")}} />
     </div>
 </form>

console/app/templates/auth/reset-password.hbs

@@ -2,18 +2,18 @@
     <div class="mb-4">
         <Image src={{@model.logo_url}} @fallbackSrc="/images/fleetbase-logo-svg.svg" alt={{t "app.name"}} width="160" height="56" class="w-40 h-14 mx-auto" />
         <h2 class="text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
-            Reset your password
+            {{t "auth.reset-password.title"}}
         </h2>
     </div>
 
     <form class="space-y-6" {{on "submit" this.resetPassword}}>
-        <InputGroup @name="Your reset code" @value={{this.code}} @inputClass="form-input-lg" @helpText="The verification code you received in your email." />
-        <InputGroup @name="New Password" @value={{this.password}} @type="password" @inputClass="form-input-lg" @helpText="Enter a password at-least 6 characters to continue." />
-        <InputGroup @name="Confirm new Password" @value={{this.password_confirmation}} @type="password" @inputClass="form-input-lg" @helpText="Enter a password at-least 6 characters to continue." />
+        <InputGroup @name={{t "auth.reset-password.form.code.label"}} @value={{this.code}} @inputClass="form-input-lg" @helpText={{t "auth.reset-password.form.code.help-text"}} />
+        <InputGroup @name={{t "auth.reset-password.form.password.label"}} @value={{this.password}} @type="password" @inputClass="form-input-lg" @helpText={{t "auth.reset-password.form.password.help-text"}} />
+        <InputGroup @name={{t "auth.reset-password.form.confirm-password.label"}} @value={{this.password_confirmation}} @type="password" @inputClass="form-input-lg" @helpText={{t "auth.reset-password.form.confirm-password.help-text"}} />
 
         <div class="flex space-x-2">
-            <Button @icon="check" @size="lg" @type="primary" @buttonType="submit" @text="Reset Password" @onClick={{this.resetPassword}} @isLoading={{this.isLoading}} />
-            <Button @size="lg" @buttonType="button" @text="Back" @onClick={{fn (transition-to "auth.login")}} @disabled={{this.isLoading}} />
+            <Button @icon="check" @size="lg" @type="primary" @buttonType="submit" @text={{t "auth.reset-password.form.submit-button"}} @onClick={{this.resetPassword}} @isLoading={{this.isLoading}} />
+            <Button @size="lg" @buttonType="button" @text={{t "auth.reset-password.form.back-button"}} @onClick={{fn (transition-to "auth.login")}} @disabled={{this.isLoading}} />
         </div>
     </form>
 </div>

console/translations/en-us.yaml

@@ -3,6 +3,7 @@ app:
 
 auth:
   forgot-password:
+    success-message: Check your email to continue!
     is-sent:  
       title: Almost Done!
       message: <strong>Check your email!</strong><br> We've sent you a magic link to your email which will allow you to reset your password. The link expires in 15 minutes.
@@ -13,6 +14,34 @@ auth:
       email-label: Your email address
       submit-button: OK, Send me a magic link!
       nevermind-button: Nevermind
+  login:
+    title: Sign in to your account
+    failed-attempt:
+      message: <strong>Forgot your password?</strong><br> Click the button below to reset your password.
+      button-text: Ok, help me reset!
+    form:
+      email-label: Email address
+      password-label: Password
+      remember-me-label: Remember me
+      forgot-password-label: Forgot your password?
+      sign-in-button: Sign in
+      create-account-button: Create a new Account
+    slow-connection-message: Experiencing connectivity issues.
+  reset-password:
+    success-message: Your password has been reset! Login to continue.
+    title: Reset your password
+    form:
+      code:
+        label: Your reset code
+        help-text: The verification code you received in your email.
+      password:
+        label: New Password
+        help-text: Enter a password at-least 6 characters to continue.
+      confirm-password:
+        label: Confirm new Password
+        help-text: Enter a password at-least 6 characters to continue.
+      submit-button: Reset Password
+      back-button: Back
 
 layout:
   header:
@@ -37,6 +66,7 @@ terms:
   logout: Logout
   dashboard: Dashboard
   search: Search
+  uploading: Uploading...
 phrases:
   search-input: Search Input