feat: implemented login page

package.json

@@ -16,6 +16,12 @@
     "@commitlint/cli": "^18.0.0",
     "@commitlint/config-conventional": "^18.0.0",
     "@fontsource/poppins": "^5.0.8",
+    "@fortawesome/free-regular-svg-icons": "github:nethesis/Font-Awesome#regular",
+    "@fortawesome/free-solid-svg-icons": "github:nethesis/Font-Awesome#solid",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@headlessui/vue": "^1.7.16",
+    "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
+    "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
     "@nethserver/vue-tailwind-lib": "^0.0.86",
     "@rushstack/eslint-patch": "^1.3.3",
     "@tailwindcss/forms": "^0.5.6",
@@ -27,6 +33,7 @@
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.16",
+    "axios": "^1.5.1",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.0",

src/components/LandingPage.vue

@@ -1,3 +1,3 @@
 <template>
-  <img class="animate-pulse" src="@/assets/logo.png" alt="NethServer 8 Logo" />
+  <img alt="NethServer 8 Logo" class="animate-pulse" src="@/assets/logo.png" />
 </template>

src/composables/useAuth.ts

@@ -0,0 +1,53 @@
+import { computed } from 'vue'
+import axios from 'axios'
+
+interface LoginResponse {
+  token: string
+  expire: string
+}
+
+const TOKEN_KEY = 'token'
+const EXPIRE_KEY = 'expire'
+
+export function useAuth() {
+  /**
+   * Token from localStorage
+   */
+  const token = computed((): string | null => localStorage.getItem(TOKEN_KEY))
+
+  /**
+   * Expire date from localStorage
+   */
+  const expire = computed((): string | null => localStorage.getItem(EXPIRE_KEY))
+
+  /**
+   * Whether the user has previously logged in or not
+   */
+  const previouslyLogged = computed((): boolean => {
+    return token.value != null && expire.value != null
+  })
+
+  /**
+   * Login to the API, saving the token and expire date to localStorage
+   * @param username
+   * @param password
+   */
+  async function login(username: string, password: string) {
+    const response = await axios.post<LoginResponse>('/api/login', {
+      username: username,
+      password: password
+    })
+    localStorage.setItem(TOKEN_KEY, response.data.token)
+    localStorage.setItem(EXPIRE_KEY, response.data.expire)
+  }
+
+  /**
+   * Removes authorization data from localStorage.
+   */
+  function logout() {
+    localStorage.removeItem(TOKEN_KEY)
+    localStorage.removeItem(EXPIRE_KEY)
+  }
+
+  return { token, expire, previouslyLogged, login, logout }
+}

src/i18n/en-US.json

@@ -1,10 +1,18 @@
 {
+  "errors": {
+    "connection_aborted": "Couldn't connect to the server",
+    "network": "Network error"
+  },
+  "base_template": {
+    "logout": "Logout"
+  },
   "login_form": {
     "welcome": "Welcome",
     "sign_in_description": "Sign in to access your account settings",
     "username": "Username",
     "password": "Password",
     "remember_me": "Remember me",
-    "sign_in": "Sign in"
+    "sign_in": "Sign in",
+    "invalid_credentials": "Invalid credentials"
   }
-}
+}