Work on login

vue/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="is-flex">
-    <Sidebar />
+    <Sidebar v-if="isLogedIn"/>
     <main class="p-5 is-flex-grow-1">
       <RouterView />
     </main>
@@ -8,11 +8,10 @@
 </template>
 
 <script setup>
-import { useI18n } from 'vue-i18n'
 import { applyTheme } from '@/components/theme';
 import Sidebar from '@/components/Sidebar.vue';
+import { isLogedIn } from './global';
 
 applyTheme();
 
-const { t } = useI18n();
 </script>

vue/components/Sidebar.vue

@@ -23,6 +23,7 @@
         </RouterLink>
       </li>
     </ul>
+    <p class="menu-label" v-if="!collapsed">{{ displayName }}</p>
   </aside>
 </template>
 
@@ -30,6 +31,7 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { RouterLink } from 'vue-router';
+import { displayName } from '@/global.js';
 
 const { t } = useI18n()
 

vue/components/ThemeSwitcher.vue

@@ -2,16 +2,16 @@
   <div class="dropdown is-hoverable">
     <div class="dropdown-trigger">
       <button class="button">
-        <span>Barvna tema</span>
+        <span>{{ t('userSettings.themeSelect') }}</span>
       </button>
     </div>
     <div class="dropdown-menu">
       <div class="dropdown-content">
         <button class="dropdown-item" @click.prevent="setTheme('light')">
-          Svetlo
+          {{ t('userSettings.light') }}
         </button>
         <button class="dropdown-item" @click.prevent="setTheme('dark')">
-          Temno
+          {{ t('userSettings.dark') }}
         </button>
       </div>
     </div>
@@ -19,5 +19,7 @@
 </template>
 
 <script setup>
+import { useI18n } from 'vue-i18n';
 import { setTheme } from './theme';
+const {t} = useI18n();
 </script>

vue/global.js

@@ -0,0 +1,5 @@
+import { ref } from "vue";
+
+
+export const isLogedIn = ref(false);
+export const displayName = ref("");

vue/locales/en.json

@@ -1,4 +1,9 @@
 {
+  "userSettings":{
+    "themeSelect": "Select theme",
+    "light":"Light",
+    "dark":"Dark"
+  },
   "menu": {
     "settings": "Settings",
     "userSettings": "User settings",
@@ -18,8 +23,8 @@
     "search": "Search",
     "loading": "Loading..."
   },
-  "app": {
-    "hello": "HELLO",
-    "world": "WORLD"
+  "login": {
+    "username": "Username",
+    "password": "Password"
   }
 }

vue/locales/sl.json

@@ -1,9 +1,18 @@
 {
+  "userSettings": {
+    "themeSelect": "Izberi temo",
+    "light": "Svetlo",
+    "dark": "Temno"
+  },
   "menu": {
     "settings": "Nastavitve",
     "userSettings": "Uporabniške nastavitve",
     "dashboard": "Nadzorna plošča"
   },
+  "settings": {
+    "users": "Uporabni",
+    "groups": "Skupine"
+  },
   "common": {
     "save": "Shrani",
     "cancel": "Prekliči",
@@ -14,8 +23,8 @@
     "search": "Iskanje",
     "loading": "Nalaganje..."
   },
-  "app": {
-    "hello": "ZDRAVO",
-    "world": "SVET"
+  "login": {
+    "username": "Uporabniško ime",
+    "password": "Geslo"
   }
 }

vue/main.js

@@ -6,6 +6,7 @@ import { i18n, setLocale, initialLocale } from './i18n.js'
 import './css/all.css'
 
 import App from './app.vue'
+import { isLogedIn } from './global.js'
 
 await setLocale(initialLocale())
 
@@ -18,5 +19,12 @@ if (import.meta.hot) {
   handleHotUpdate(router)
 }
 
+router.beforeEach(async (to, from) => {
+  if (!isLogedIn.value && to.name != '/login' ) {
+    // redirect the user to the login page
+    return { name: '/login' }
+  }
+})
+
 createApp(App).use(router).use(i18n).mount('#app')
 

vue/routes/login.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="columns is-vcentered" style="height: 50rem;">
+    <div class="column is-2 is-offset-5">
+      <form @submit.prevent="logIn">
+        <div class="field">
+          <label class="label">{{ t('login.username') }}</label>
+          <div class="control">
+            <input class="input" type="text" v-model="userName">
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">{{ t('login.password') }}</label>
+          <div class="control">
+            <input class="input" type="password" v-model="password">
+          </div>
+        </div>
+        <div class="field">
+          <div class="control">
+            <button class="button is-primary">{{ t('common.confirm') }}</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { displayName, isLogedIn } from '../global';
+import { useRouter } from 'vue-router';
+const { t } = useI18n();
+const route = useRouter();
+
+const userName = ref();
+const password = ref();
+
+async function logIn(){
+  const mes = {
+    "username": userName.value,
+    "pass": password.value
+  }
+  const res = await fetch("/php/user/ldapLogin.php", {
+    "body": mes,
+    "method": "POST"
+  });
+  const body = await res.json();
+  isLogedIn.value = true;
+  displayName.value = body.displayname;
+  route.push("/");
+}
+
+</script>