From 8571d211df13f219faef6ba377c48de4360f7855 Mon Sep 17 00:00:00 2001
From: Alex Roehm <alex@roehms.de>
Date: Fri, 18 Aug 2023 22:30:25 +0200
Subject: [PATCH] i18n done

---
 backend/Controllers/MessageController.cs    |   2 -
 backend/Controllers/ValidationController.cs |   2 +-
 backend/Models/ValidationRequest.cs         |   1 +
 backend/Services/OneTimeLinkService.cs      |   8 +-
 package.json                                |   1 +
 src/App.vue                                 |   2 +-
 src/components/Header.vue                   | 103 ++++++++++++++++++--
 src/locales/de.json                         |  40 ++++++++
 src/locales/en.json                         |  40 ++++++++
 src/main.ts                                 |  28 +++++-
 src/router.ts                               |  32 ++++--
 src/views/Contact.vue                       |  44 ++++-----
 src/views/EmailForm.vue                     |  56 +++++------
 src/views/Login.vue                         |  18 ++--
 src/views/Templates.vue                     |  37 ++++---
 tsconfig.json                               |   1 +
 16 files changed, 308 insertions(+), 107 deletions(-)
 create mode 100644 src/locales/de.json
 create mode 100644 src/locales/en.json

diff --git a/backend/Controllers/MessageController.cs b/backend/Controllers/MessageController.cs
index 03fdd8d..ce962f5 100644
--- a/backend/Controllers/MessageController.cs
+++ b/backend/Controllers/MessageController.cs
@@ -25,8 +25,6 @@ public async Task<IActionResult> Send( MessageRequest request )
         var oneTimeLink = await _oneTimeLinkService.Check(request.Slug);
         if (oneTimeLink!=null && oneTimeLink is OneTimeLink) {
             var template = await _templateService.GetByPurpose(oneTimeLink.Purpose);
-            Console.WriteLine(template);
-
             if (template != null)
                 success = await _emailService.Send(
                     _templateService.To(template),
diff --git a/backend/Controllers/ValidationController.cs b/backend/Controllers/ValidationController.cs
index 0708b8b..746bb78 100644
--- a/backend/Controllers/ValidationController.cs
+++ b/backend/Controllers/ValidationController.cs
@@ -23,7 +23,7 @@ public ValidationController( IEmailService emailer, IOneTimeLinkService oneTimeL
     public async Task<IActionResult> Validate( ValidationRequest userInput )
     {
         var link = await _oneTimeLinkService.Get(userInput.Purpose, userInput.Email);
-        var url = _oneTimeLinkService.GetFullUrl(link.Slug);
+        var url = _oneTimeLinkService.GetFullUrl(link.Slug, userInput.Language);
         var message = await _templateService.GetMessageByPurpose(userInput.Purpose,url,userInput.Email);
         _emailer.Send(userInput.Email,"Link to Calvary Chapel Freiburg Contact Form",message);
         return Ok();
diff --git a/backend/Models/ValidationRequest.cs b/backend/Models/ValidationRequest.cs
index e8f6826..34fea84 100644
--- a/backend/Models/ValidationRequest.cs
+++ b/backend/Models/ValidationRequest.cs
@@ -9,4 +9,5 @@ public class ValidationRequest
 
     [Required]
     public string Purpose { get; set; }
+    public string Language { get; set; }
 }
\ No newline at end of file
diff --git a/backend/Services/OneTimeLinkService.cs b/backend/Services/OneTimeLinkService.cs
index 3cfd43d..31b4943 100644
--- a/backend/Services/OneTimeLinkService.cs
+++ b/backend/Services/OneTimeLinkService.cs
@@ -16,7 +16,7 @@ public interface IOneTimeLinkService
     Task<OneTimeLink> Check( string slug );
     void Invalidate( string slug );
     void InvalidateOld( );
-    string GetFullUrl( string slug );
+    string GetFullUrl( string slug, string? language );
 
 }
 
@@ -42,7 +42,7 @@ public OneTimeLinkService(AppSettings appSettings, ContRevDb db)
         _db = db;
     }
 
-    public async Task<OneTimeLink> Get( string purpose, string email ) {
+    public async Task<OneTimeLink> Get( string purpose, string email) {
 
         var entry = new OneTimeLink() {
             Slug = Protect(purpose+email),
@@ -55,8 +55,8 @@ public async Task<OneTimeLink> Get( string purpose, string email ) {
         return entry;
     }
 
-    public string GetFullUrl( string slug ) {
-        return _baseUrl+"message/"+slug;
+    public string GetFullUrl( string slug, string? language ) {
+        return _baseUrl+(language!=null && language.Length==2?language+"/":"")+"message/"+slug;
     }
 
     public async Task<OneTimeLink> Check( string slug ) {
diff --git a/package.json b/package.json
index 5080f1d..baa10ee 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "pinia": "^2.1.6",
     "url": "^0.11.1",
     "vue": "^3.3.4",
+    "vue-i18n": "9",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 7245548..79d7ac5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router';
+
 </script>
 
 <template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 443144c..56c6adc 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,13 +1,49 @@
 <template>
     <div>
-        <div class="flex items-center w-full h-20 shadow-md place-content-center">
-            <img class="h-12" :src="logo" />
+      <div class="flex items-center w-full h-20 shadow-md place-content-center">
+
+      <div class="w-10/12
+                          md:w-9/12
+                          xl:w-8/12
+                          2xl:w-[1536px] 
+                          flex justify-between">
+        <div class="relative flex flex-row items-center w-1/6 flex-nowrap">
+          <button id="language_id" @click.stop="showDropdown=true" class="inline-flex items-center text-sm font-medium text-center rounded-lg"
+            type="button"> 
+            <svg class="w-3 h-3 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9">
+              </path>
+            </svg>
+            <div class="invisible w-0 text-xs sm:w-14 sm:visible">{{ t(locale) }}</div>
+            <svg class="invisible w-4 h-4 sm:visible" aria-hidden="true" fill="none" stroke="currentColor"
+              viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+            </svg>
+          </button>
+          <div v-show="showDropdown" class="absolute bg-white border-2 rounded shadow top-10 left-6 w-44">
+            <ul class="py-1 text-sm text-gray-700">
+              <li v-for="navLocale in availableLocales as string[]" :key="navLocale" class="p-1 hover:cursor-pointer" @click="showDropdown=false">
+                  <RouterLink :to="getRouterLink(navLocale)">{{ t(navLocale) }}</RouterLink>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="content-center flex-grow text-center align-middle">
+          <a href="https://ccfreiburg.de" class="inline-block">
+            <img :src="logo" class="m-1 h-7 sm:h-14"/>
+          </a>
         </div>
+        <div class="relative flex flex-row items-center w-1/6 flex-nowrap">&nbsp;
+        </div>
+      </div>
+      </div>
     <section class="flex flex-col place-items-center">
-      <div class="w-11/12 overflow-hidden -inset-y-8 sm:h-56 md:h-64 lg:h-72">
+      <div v-if="!noimage" class="w-11/12 overflow-hidden -inset-y-8 sm:h-56 md:h-64 lg:h-72">
           <img class="object-cover w-full" :src="hero" alt="" />
       </div>
-      <CleanContainer>
+      <CleanContainer v-if="$props.title">
         <div class="flex flex-col items-center justify-center md:mt-4">
             <div class="leading-tight sm:px-2 menu-underline">
       <h1 class="font-bold tracking-widest uppercase sm:text-xl md:text-2xl text-md">
@@ -25,20 +61,75 @@
   </template>
   
 <script lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import CleanContainer from '../components/CleanContainer.vue';
+import { useRoute } from 'vue-router';
 
 export default {
     props: {
       title: String,
       intro: String,
+      noimage: Boolean,
     },
     components: {CleanContainer},
     name: "Header",
     setup() {
+      const showDropdown = ref(false)
+      const { t, availableLocales, locale } = useI18n();
+      const route = useRoute()
+
+      function hide() {
+      showDropdown.value = false;
+      //ctx.emit('closeAll')
+    }
+    function closeIfClickedOutside(event: any) {
+      if (
+        event.target.name === 'language_id' ||
+        event.target.nodeName === 'OPTION' ||
+        event.target.nodeName === 'LI'
+      )
+        return;
+        hide();
+    }
+    function getRouterLink( local : string ) :string {
+      const r = route.path.substring(3,4)
+      if (r=="/")
+        return (local=="de"?"":"/"+local)+route.path.substring(3)
+      return (local=="de"?"":"/"+local)+route.path
+    }
+
+    function setLocaleFromPath() {
+      const routstarts = availableLocales.filter((i)=>i!="de").map((i)=>"/"+i+"/")
+      if (routstarts.some(substr => route.path.startsWith(substr))) {
+        const loc = route.path.substring(1,3)
+        locale.value = loc
+      } else locale.value = "de"
+    }
+
+    watch(()=>route.path, setLocaleFromPath )
+
+    function closeIfScrolled(event: any) {
+      closeIfClickedOutside(event)
+    }
+    onMounted(() => {
+      document.addEventListener('click', closeIfClickedOutside);
+      document.addEventListener('scroll', closeIfScrolled);
+      setLocaleFromPath()
+    })
+
+    onBeforeUnmount(() => {
+      document.removeEventListener('click', closeIfClickedOutside);
+      document.removeEventListener('scroll', closeIfScrolled);
+    })
       return {
         logo: new URL('../assets/images/logo.png', import.meta.url).href,
-        hero: new URL('../assets/images/Calvary Chapel 22 Winter UhlArt Fotogrfie 2022-61-Header.jpg', import.meta.url).href
-
+        hero: new URL('../assets/images/Calvary Chapel 22 Winter UhlArt Fotogrfie 2022-61-Header.jpg', import.meta.url).href,
+        showDropdown,
+        t, 
+        availableLocales,
+        locale,
+        getRouterLink
       }
     }
 }
diff --git a/src/locales/de.json b/src/locales/de.json
new file mode 100644
index 0000000..a4f7775
--- /dev/null
+++ b/src/locales/de.json
@@ -0,0 +1,40 @@
+{
+    "de": "Deutsch",
+    "en": "Englisch",
+    "username": "Benutzername",
+    "password": "Passwort",
+    "passerror": "Benutzer oder Passwort fehlerhaft.",
+    "logout": "Abmelden",
+    "thankyou": "Danke!",
+    "OK": "Ok",
+    "cancel": "Abbruch",
+    "delete": "Löschen",
+    "error": "Fehler",
+    "emailform": {
+        "title": "Email senden",
+        "intro": "Hier kannst du deine Email an die ausgewählte Person oder Funktion senden",
+        "invalid": "Der Link ist fehlerhaft oder inzwischen veraltet. Bitte lass dir einen Neuen schicken.",
+        "your_email_to": "Deine Email an",
+        "subject": "Betreff",
+        "message": "Nachricht",
+        "done": "Deine Email wurde versandt!"
+    },
+    "contactform": {
+        "title": "Email senden",
+        "intro": "Wir haben keine Datenschutzrelevanten Funktionen auf unserer Webseite. Nur hier benötigen wir zuerst deine Emailadresse. Wir freuen uns von die zu hören!",
+        "who_to_contact": "Mit wem möchtest du in Kontakt treten?",
+        "your_email": "Deine Emailadresse",
+        "check_your_email": "Wir haben eine Email mit dem Link zum Kontaktformular an dich gesendet. Bitte schau in dein Postfach. Eventuell solltest du auch deinen Spam checken."
+    },
+    "templates": {
+        "active": "Aktiv",
+        "purpose": "Ziel",
+        "purpose_full": "Ziel der Email (Beschreibung des Empfängers)",
+        "to": "An",
+        "to_full": "Email des Empfämgers",
+        "from_full": "Email Konto von dem gesendet wird",
+        "subject": "Betreff",
+        "text": "Email mit Validierungslink",
+        "add": "Hinzufügen"
+    }
+}
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 0000000..31cdf07
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,40 @@
+{
+    "de": "German",
+    "en": "English",
+    "username": "Username",
+    "password": "Password",
+    "passerror": "Username or password incorrect.",
+    "logout": "Logout",
+    "thankyou": "Thank you!",
+    "OK": "Ok",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "error": "Error",
+    "emailform": {
+        "title": "Send Email",
+        "intro": "Here you can send your email to the requested person or team or function",
+        "invalid": "The Link is wrong or outdated. Please get a new link.",
+        "your_email_to": "Your Email to",
+        "subject": "Subject",
+        "message": "Your message",
+        "done": "We have sent your message!"
+    },
+    "contactform": {
+        "title": "Send Email",
+        "intro": "Our web site is free from any privacy related functionality. No cookies nor external embedded content nor tracking. For the contact form we expect you to provide your email address first. We are looking forward to hear from you!",
+        "who_to_contact": "Who do you want to contact?",
+        "your_email": "Your Email Address",
+        "check_your_email": "We have sent an email containing the link to the contact form to you. Please check your Inbox and maybe your Spam folder."
+    },
+    "templates": {
+        "active": "Active",
+        "purpose": "Purpose",
+        "purpose_full": "Purpose of Email (describe the receiver)",
+        "to": "To",
+        "to_full": "Email of the receiver",
+        "from_full": "Email Accont to send from",
+        "subject": "Subject",
+        "text": "Text for validation email",
+        "add": "Add"
+    }
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index c176966..1ebdab3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,32 @@
 import './style.css'
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { createI18n } from 'vue-i18n'
 
-import App from './App.vue';
-import { router } from './router';
+import App from "./App.vue";
+import { router } from "./router";
+import en from './locales/en.json';
+import de from './locales/de.json';
 
+type MessageSchema = typeof en
+const config = {
+  legacy: false,
+  locale: "de",
+  fallbackLocale: "de",
+  availableLocales: ["de","en"],
+  messages: {
+    de,
+    en
+  },
+}
+
+const i18n = createI18n<[MessageSchema], 'en' | 'de'>(config);
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
+app.use(i18n);
 
+app.mount("#app");
 
-app.mount('#app');
\ No newline at end of file
+export default config.availableLocales
\ No newline at end of file
diff --git a/src/router.ts b/src/router.ts
index 317a5f1..7d2bb9a 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,5 +1,5 @@
 import { RouteLocation, createRouter, createWebHistory } from 'vue-router';
-
+import availableLocales from './main';
 import { useAuthStore } from './stores';
 import Login from './views/Login.vue';
 import Contact from './views/Contact.vue';
@@ -11,25 +11,43 @@ export const router = createRouter({
     linkActiveClass: 'active',
     routes: [
         { path: '/', component: Contact },
+        { path: '/en', component: Contact },
         { path: '/templates', component: Templates },
+        { path: '/en/templates', component: Templates },
         { path: '/message/:slug', component: EmailForm },
-        { path: '/login', component: Login }
+        { path: '/en/message/:slug', component: EmailForm },
+        { path: '/login', component: Login },
+        { path: '/en/login', component: Login }
     ]
 });
 
 router.beforeEach(async (to: RouteLocation) => {
-    // redirect to login page if not logged in and trying to access a restricted page
-    
+    var to_lang_part =   to.path.substring(1,3);
+    var to_compare_part =   to.path.substring(3);
+    if (availableLocales && availableLocales.includes(to_lang_part)) {
+        to_lang_part = "/" + to_lang_part
+    } else {
+        to_lang_part = ""
+        to_compare_part = to.path
+    }
+    if (to_compare_part=="") to_compare_part ="/"
+    console.log(to_lang_part)
+    console.log(to_compare_part)
+
+    // set the current language for vuex-i18n. note that translation data
+    // for the language might need to be loaded first
     const publicPages = ['/login', '/'];
     // http://localhost:5084/message/24A8B9942DCE9A125A7E3A7918BDED84D86A7CFDBD89A88EAA0157E1B8CDA43C
-    const isOneTimeToken = to.path.startsWith('/message') && to.path.length==73 // length of message + SHA256
-    const authRequired = !publicPages.includes(to.path) && !isOneTimeToken;
+    const isOneTimeToken = to_compare_part.startsWith('/message') && to_compare_part.length==73 // length of message + SHA256
+    const authRequired = !publicPages.includes(to_compare_part) && !isOneTimeToken;
+    // redirect to login page if not logged in and trying to access a restricted page
 
     const auth = useAuthStore();
     if (authRequired && !auth.user) {
         auth.returnUrl = to.fullPath;
-        return '/login';
+        return to_lang_part+'/login';
     }
+
 });
 
 
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index a61e141..74dda56 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -4,16 +4,12 @@ import { fetchWrapper, validateEmail } from "../services"
 import Header from "../components/Header.vue";
 import CleanContainer from "../components/CleanContainer.vue";
 import ButtonPrimary from "../components/ButtonPrimary.vue";
+import { useI18n } from "vue-i18n";
+
+const { t, locale } = useI18n()
+
 const email = ref("");
-const intro = ref(
-  `Our information on the internet is free from any privacy related functionality. 
-  It is not using cookies nor external embedded content nor tracking. 
-  But for the contact form we expect you to provide your email address first in order to
-  protect us and our staff. 
-  After you have entered your address you will receive an email with the link to the
-  web form, where you can send your message to us. We are looking forward to hear from you!
-  `
-);
+
 const thanks = ref(false)
 const options = ref([])
 const purpose = ref(0)
@@ -28,6 +24,7 @@ function submit() {
   fetchWrapper.postraw("/api/Validation", 
   {
     email: email.value,
+    language: (locale.value && locale.value!="de"?locale.value:""),
     purpose: options.value[purpose.value]
   }).then(()=> {
     thanks.value = true
@@ -37,12 +34,15 @@ function submit() {
 
 <template>
   <div>
-    <Header :title="'Send Email'" :intro="intro" />
+    <Header :title="(thanks?t('thankyou'):t('contactform.title'))" 
+    :intro="(thanks?t('contactform.check_your_email'):t('contactform.intro'))" />
     <CleanContainer>
     <div v-if="!thanks">
       <div class="flex flex-col">
         <div>
-            <label for="purpose" class="block mb-2 text-sm font-medium text-skin-muted">Who do you want to contact</label>
+            <label for="purpose" class="block mb-2 text-sm font-medium text-skin-muted">
+            {{t('contactform.who_to_contact')}} 
+              </label>
             <select id="purpose" class=" block w-full p-2.5" v-model="purpose">
                 <option v-for="(option, index) in options" :value="index">{{ option }}</option>
             </select>
@@ -51,34 +51,26 @@ function submit() {
           <label
             for="purpose"
             class="block mb-2 text-sm font-medium text-skin-muted"
-            >Your Email Address</label
+            >
+            {{t('contactform.your_email')}} 
+            </label
           >
           <input
             type="text"
             v-model="email"
             id="purpose"
             class="block w-full p-2.5"
-            placeholder="Email address"
             required
           />
         </div>
         <div class="flex mt-8 place-content-end">
-            <ButtonPrimary :disabled="!validated" @click="submit">Ok</ButtonPrimary>
+            <ButtonPrimary :disabled="!validated" @click="submit">
+              {{t('OK')}} 
+              </ButtonPrimary>
         </div>
       </div>
     </div>
-    <div v-else class="flex flex-col items-center justify-center md:mt-4">
-        <div class="leading-tight sm:px-2 menu-underline">
-            <h1 class="font-bold tracking-widest uppercase sm:text-xl md:text-2xl text-md">
-        T       hank you!
-            </h1>
-        </div>
-        <div class="w-3/5 mt-6">
-            <p class="md:leading-loose font-bold text-xs md:text-sm tracking-wider text-center text-[#888888]">
-                Please check your Inbox and maybe your Spam folder.
-            </p>
-         </div>
-    </div>
+
     </CleanContainer>
   </div>
 </template>
diff --git a/src/views/EmailForm.vue b/src/views/EmailForm.vue
index 0617353..655502d 100644
--- a/src/views/EmailForm.vue
+++ b/src/views/EmailForm.vue
@@ -1,26 +1,27 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, onBeforeMount } from "vue";
 import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
 import { fetchWrapper } from "../services"
 
 import Header from "../components/Header.vue";
 import CleanContainer from "../components/CleanContainer.vue";
 import ButtonPrimary from "../components/ButtonPrimary.vue";
+
 const route = useRoute()
+const { t } = useI18n();
 
-const intro = ref(`Our information on the internet is free from any privacy related functionality. 
-  It is not using cookies nor external embedded content nor tracking. 
-  But for the contact form we expect you to provide your email address first in order to
-  protect us and our staff. 
-  After you have entered your address you will receive an email with the link to the
-  web form, where you can send your message to us. We are looking forward to hear from you!
-  `
-);
 const thanks = ref(false)
 const error = ref("")
 const message = ref("")
 const subject = ref("")
 const valid = ref("")
+const title = computed(()=>
+        (error.value.length>0?t('error'):(thanks.value?t('thankyou'):t('emailform.title')))
+        )
+const intro = computed(()=>
+        (error.value.length>0?t('emailform.invalid'):(thanks.value?t('emailform.done'):t('emailform.intro')))
+        )
 const validated = computed(()=>{
     return message.value.length > 3 
 })
@@ -44,41 +45,34 @@ function submit() {
  }
  fetchWrapper.postraw("/api/message",data).then(()=>thanks.value=true)
 }
+
+onBeforeMount(()=>thanks.value=false)
 </script>
 
 <template>
     <div>
-        <Header :title="'Send Email'" :intro="intro" />
-        <CleanContainer>
-            <div v-if="error.length>0" class="flex flex-col w-full">
-                {{ error }}
-            </div>
-            <div v-else-if="!thanks" class="flex flex-col w-full">
+        <Header :title="title" 
+                :intro="intro" />
+
+        <CleanContainer v-if="error.length==0 && !thanks">
+            <div class="flex flex-col w-full">
                 <div>
-                    Your Email to {{ valid }}
+                    {{t('emailform.your_email_to') +": "+ valid }}
                 </div>
                 <div class="col-span-2">
-                    <label for="subject" class="block mb-2 text-sm font-medium text-skin-muted">Subject</label>
+                    <label for="subject" class="block mb-2 text-sm font-medium text-skin-muted">
+                        {{t('emailform.subject')}}
+                        </label>
                     <input type="text" v-model="subject" id="subject" class="block w-full p-2.5" placeholder="Subject" required />
                 </div>
                 <div class="col-span-2">
-                    <label for="html" class="block mb-2 text-sm font-medium text-skin-muted">Your Message</label>
+                    <label for="html" class="block mb-2 text-sm font-medium text-skin-muted">
+                        {{t('emailform.message')}}
+                        </label>
                     <textarea type="text" v-model="message" id="html" class="h-40  block w-full p-2.5" placeholder="Message text" required />
                 </div>
                 <div class="flex mt-8 place-content-end">
-                    <ButtonPrimary :disabled="!validated" @click="submit">Ok</ButtonPrimary>
-                </div>
-            </div>
-            <div v-else class="flex flex-col items-center justify-center md:mt-4">
-                <div class="leading-tight sm:px-2 menu-underline">
-                    <h1 class="font-bold tracking-widest uppercase sm:text-xl md:text-2xl text-md">
-                        Thank you!
-                    </h1>
-                </div>
-                <div class="w-3/5 mt-6">
-                    <p class="md:leading-loose font-bold text-xs md:text-sm tracking-wider text-center text-[#888888]">
-                        Please check your Inbox and maybe your Spam folder.
-                    </p>
+                    <ButtonPrimary :disabled="!validated" @click="submit">{{t('thankyou')}}</ButtonPrimary>
                 </div>
             </div>
         </CleanContainer>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index fb63708..1951814 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useAuthStore } from "../stores/auth.store";
+import { useI18n } from 'vue-i18n';
 import ButtonPrimary from "../components/ButtonPrimary.vue";
+import Header from "../components/Header.vue";
 
+const { t } = useI18n();
 const authStore = useAuthStore();
 //const { user: authUser } = storeToRefs(authStore);
 
@@ -15,13 +18,15 @@ async function submit() {
     try {
         await authStore.login(username.value, password.value);
     } catch (e) {
-        error.value = "Username or password not incorrect."
+        error.value = t('passerror')
         password.value = ""
     }
 }
 </script>
 
 <template>
+  <div>
+    <Header></Header>
   <div class="flex flex-col items-center w-full mt-12">
     <div class="w-1/3 bg-skin-light">
 
@@ -30,27 +35,23 @@ async function submit() {
         <label
           for="purpose"
           class="block mb-2 text-sm font-medium"
-          >Username</label
-        >
+          >{{ t('username') }}</label>
         <input
           type="text"
           v-model="username"
           id="purpose"
           class="block w-full p-2.5"
-          placeholder="Username"
           required
         />
       </div>
       <div class="col-span-2">
         <label for="to" class="block mb-2 text-sm font-medium"
-          >Password</label
-        >
+        >{{ t('password') }}</label>
         <input
           type="password"
           v-model="password"
           id="to"
           class="block w-full p-2.5"
-          placeholder="Password"
           required
         />
       </div>
@@ -61,8 +62,9 @@ async function submit() {
         </div>
     </div>
       <div class="flex justify-end mt-2">
-        <ButtonPrimary @click="submit">Ok</ButtonPrimary>
+        <ButtonPrimary @click="submit">{{ t('OK') }}</ButtonPrimary>
       </div>
     </div>
   </div>
+</div>
 </template>
diff --git a/src/views/Templates.vue b/src/views/Templates.vue
index 7933208..f692deb 100644
--- a/src/views/Templates.vue
+++ b/src/views/Templates.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { onBeforeMount, ref } from "vue";
+import { useI18n } from 'vue-i18n';
 import { useRouter } from "vue-router";
 import { useAuthStore } from '../stores/auth.store';
 import { fetchWrapper } from "../services"
+import Header from '../components/Header.vue';
 import ButtonPrimary from '../components/ButtonPrimary.vue';
 import ButtonSecondary from '../components/ButtonSecondary.vue';
 
+const { t } = useI18n();
+
 const isopen = ref(false);
 const openitem = ref({} as any);
 const list = ref([] as Array<any>);
@@ -66,25 +70,26 @@ function submit() {
 </script>
 
 <template>
-  <div class="w-screen h-full bg-white border-b">
+  <div class="w-screen h-full bg-white">
+    <Header :noimage="true"/>
     <div class="flex flex-col items-center mx-6 overflow-x-auto">
     <div class="flex items-center w-full h-12 place-content-end ">
-        <button @click="logout" class="px-2 text-skin-muted hover:text-skin-accent">Logout</button>
+        <button @click="logout" class="px-2 text-skin-muted hover:text-skin-accent">{{t('logout')}}</button>
     </div>
     <table class="w-full text-sm text-left text-skin-muted">
         <thead class="text-xs uppercase text-skin-base bg-skin-muted">
             <tr>
                 <th scope="col" class="px-6 py-3">
-                  Active
+                  {{t('templates.active')}}
                 </th>
                 <th scope="col" class="px-6 py-3">
-                  Purpose
+                  {{t('templates.purpose')}}  
                 </th>
                 <th scope="col" class="px-6 py-3">
-                  To
+                  {{t('templates.to')}}
                 </th>
                 <th scope="col" class="px-6 py-3">
-                  Subject
+                  {{t('templates.subject')}}
                 </th>
             </tr>
         </thead>
@@ -108,38 +113,38 @@ function submit() {
           <div class="grid gap-6 mt-10 columns-2">
           <div class="flex items-center mt-6">
             <input checked id="checked-checkbox" type="checkbox" v-model="openitem.acitve" class="w-8 h-8 text-skin-accent bg-skin-light border-skin-light focus:ring-skin-focus focus:ring-2">
-            <label for="checked-checkbox" class="ml-2 text-sm font-medium text-skin-muted ">Active</label>
+            <label for="checked-checkbox" class="ml-2 text-sm font-medium text-skin-muted ">{{t('templates.active')}}</label>
           </div>
           <div>
-            <label for="purpose" class="block mb-2 text-sm font-medium text-skin-muted">Purpose of Email</label>
+            <label for="purpose" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.purpose_full')}}</label>
             <input type="text" v-model="openitem.purpose" id="purpose" class="block w-full p-2.5" placeholder="Purpose" required>
           </div>
           <div class="col-span-2">
-            <label for="to" class="block mb-2 text-sm font-medium text-skin-muted">Send Email to</label>
+            <label for="to" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.to_full')}}</label>
             <input type="text" v-model="openitem.to" id="to" class="block w-full p-2.5" placeholder="To" required>
           </div>
           <div class="col-span-2">
-            <label for="from" class="block mb-2 text-sm font-medium text-skin-muted">Email from</label>
+            <label for="from" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.from_full')}}</label>
             <input type="text" v-model="openitem.from" id="from" class="block w-full p-2.5" placeholder="From" required>
           </div>
           <div class="col-span-2">
-            <label for="subject" class="block mb-2 text-sm font-medium text-skin-muted">Subject</label>
+            <label for="subject" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.subject')}}</label>
             <input type="text" v-model="openitem.subject" id="subject" class="block w-full p-2.5" placeholder="Subject" required>
           </div>
           <div class="col-span-2">
-            <label for="html" class="block mb-2 text-sm font-medium text-skin-muted">Text</label>
+            <label for="html" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.text')}}</label>
             <textarea type="text" v-model="openitem.html" id="html" class="h-40  block w-full p-2.5" placeholder="Message text" required />
           </div>
         <div class="flex justify-end col-span-2 mt-4">
-          <ButtonSecondary cancel @click="cancel">Cancel</ButtonSecondary>
-          <ButtonSecondary submit @click="remove">Delete</ButtonSecondary>
-          <ButtonPrimary submit @click="submit">Ok</ButtonPrimary>
+          <ButtonSecondary cancel @click="cancel">{{t('cancel')}}</ButtonSecondary>
+          <ButtonSecondary submit @click="remove">{{t('delete')}}</ButtonSecondary>
+          <ButtonPrimary submit @click="submit">{{t('OK')}}</ButtonPrimary>
         </div>
         </div>
       </from>
       </div>
     <div v-else class="flex justify-end w-2/3 mt-10">
-      <ButtonPrimary @click="add">Add</ButtonPrimary>
+      <ButtonPrimary @click="add">{{t('templates.add')}}</ButtonPrimary>
     </div>
     </div>
   </div>
diff --git a/tsconfig.json b/tsconfig.json
index 115b764..d095770 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false,
     "allowJs": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],