[+] i18n

AquaNet/src/pages/Welcome.svelte

@@ -4,6 +4,7 @@
   import { TURNSTILE_SITE_KEY } from "../libs/config";
   import Icon from "@iconify/svelte";
   import { USER } from "../libs/sdk";
+  import { t } from "../libs/i18n"
 
   let params = new URLSearchParams(window.location.search)
 
@@ -22,19 +23,19 @@
 
   if (params.get('confirm-email')) {
     state = 'verify'
-    verifyMsg = "Verifying your email... please wait."
+    verifyMsg = t("welcome.verifying")
     submitting = true
 
     // Send request to server
     USER.confirmEmail(params.get('confirm-email')!)
       .then(() => {
-        verifyMsg = "Your email has been verified! You can now log in now."
+        verifyMsg = t('welcome.verified')
         submitting = false
 
         // Clear the query param
         window.history.replaceState({}, document.title, window.location.pathname)
       })
-      .catch(e => verifyMsg = `Email verification failed: ${e.message}`)
+      .catch(e => verifyMsg = t('welcome.verification-failed', { message: e.message }))
   }
 
   async function submit(): Promise<any> {
@@ -42,20 +43,20 @@
 
     // Check if username and password are valid
     if (email === "" || password === "") {
-      error = "Please fill in all fields."
+      error = t("welcome.email-password-missing")
       return submitting = false
     }
 
     if (turnstile === "") {
       // Sleep for 100ms to allow Turnstile to finish
-      error = "Waiting for Turnstile to verify your network environment..."
+      error = t("welcome.waiting-turnstile")
       return setTimeout(submit, 100)
     }
 
     // Signup
     if (isSignup) {
       if (username === "") {
-        error = "Please fill in all fields."
+        error = t("welcome.username-missing")
         return submitting = false
       }
 
@@ -69,7 +70,7 @@
 
       // Show verify email message
       state = 'verify'
-      verifyMsg = `A verification email has been sent to ${email}. Please check your inbox!`
+      verifyMsg = t("welcome.verification-sent", { email })
     }
     else {
       // Send request to server
@@ -77,15 +78,15 @@
         .catch(e => {
           if (e.message === 'Email not verified - STATE_0') {
             state = 'verify'
-            verifyMsg = "You haven't verified your email. A verification email had been sent to your inbox less than a minute ago. Please check your inbox!"
+            verifyMsg = t("welcome.verify-state-0")
           }
           else if (e.message === 'Email not verified - STATE_1') {
             state = 'verify'
-            verifyMsg = "You haven't verified your email. We've already sent 3 emails over the last 24 hours so we'll not send another one. Please check your inbox!"
+            verifyMsg = t("welcome.verify-state-1")
           }
           else if (e.message === 'Email not verified - STATE_2') {
             state = 'verify'
-            verifyMsg = "You haven't verified your email. We just sent you another verification email. Please check your inbox!"
+            verifyMsg = t("welcome.verify-state-2")
           }
           else {
             error = e.message
@@ -105,8 +106,8 @@
     <h1 id="title">AquaNet</h1>
     {#if state === "home"}
       <div class="btn-group" transition:slide>
-        <button on:click={() => state = 'login'}>Log in</button>
-        <button on:click={() => state = 'signup'}>Sign up</button>
+        <button on:click={() => state = 'login'}>{t('welcome.btn-login')}</button>
+        <button on:click={() => state = 'signup'}>{t('welcome.btn-signup')}</button>
       </div>
     {:else if state === "login" || state === "signup"}
       <div class="login-form" transition:slide>
@@ -116,7 +117,7 @@
         <div on:click={() => state = 'home'} on:keypress={() => state = 'home'}
              role="button" tabindex="0" class="clickable">
           <Icon icon="line-md:chevron-small-left" />
-          <span>Back</span>
+          <span>{t('back')}</span>
         </div>
         {#if isSignup}
           <input type="text" placeholder="Username" bind:value={username}>
@@ -127,20 +128,20 @@
           {#if submitting}
             <Icon icon="line-md:loading-twotone-loop"/>
           {:else}
-            {isSignup ? "Sign up" : "Log in"}
+            {isSignup ? t('welcome.btn-signup') : t('welcome.btn-login')}
           {/if}
         </button>
         <Turnstile siteKey={TURNSTILE_SITE_KEY} bind:reset={turnstileReset}
                    on:turnstile-callback={e => console.log(turnstile = e.detail.token)}
-                   on:turnstile-error={_ => console.log(error = "Error verifying your network environment. Please turn off your VPN and try again.")}
+                   on:turnstile-error={_ => console.log(error = t("welcome.turnstile-error"))}
                    on:turnstile-expired={_ => window.location.reload()}
-                   on:turnstile-timeout={_ => console.log(error = "Network verification timed out. Please try again.")} />
+                   on:turnstile-timeout={_ => console.log(error = t('welcome.turnstile-timeout'))} />
       </div>
     {:else if state === "verify"}
       <div class="login-form" transition:slide>
         <span>{verifyMsg}</span>
         {#if !submitting}
-          <button on:click={() => state = 'home'} transition:slide>Back</button>
+          <button on:click={() => state = 'home'} transition:slide>{t('back')}</button>
         {/if}
       </div>
     {/if}
@@ -245,4 +246,4 @@
     @media (max-width: 500px)
       align-items: center
       padding-left: 0
-</style>
+</style>