feat: created the login page with email password login

frontend/src/App.vue

@@ -1,9 +1,11 @@
 <template>
-  <DesktopLayout>
+  <router-view v-if="$route.name == 'Login'" />
+  <DesktopLayout v-else-if="session().isLoggedIn">
     <router-view />
   </DesktopLayout>
 </template>
 
 <script setup>
 import DesktopLayout from '@/components/DesktopLayout.vue'
+import { sessionStore as session } from '@/stores/session';
 </script>

frontend/src/pages/Login.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex h-screen w-screen justify-center bg-gray-100">
+    <div class="mt-32 w-full px-4">
+      <div class="mx-auto mt-6 w-full px-4 sm:w-96">
+        <form method="POST" action="/api/method/login" @submit.prevent="submit">
+          <div>
+            <FormControl
+              variant="outline"
+              size="md"
+              :type="
+                (email || '').toLowerCase() === 'administrator'
+                  ? 'text'
+                  : 'email'
+              "
+              label="Email"
+              v-model="email"
+              placeholder="jane@example.com"
+              :disabled="session.login.loading"
+            />
+          </div>
+          <div class="mt-4">
+            <FormControl
+              variant="outline"
+              size="md"
+              label="Password"
+              v-model="password"
+              placeholder="••••••"
+              :disabled="session.login.loading"
+              type="password"
+            />
+          </div>
+          <ErrorMessage class="mt-2" :message="session.login.error" />
+          <Button
+            variant="solid"
+            class="mt-6 w-full"
+            :loading="session.login.loading"
+          >
+            Login
+          </Button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { FormControl, ErrorMessage } from 'frappe-ui'
+import { sessionStore } from '@/stores/session'
+
+const session = sessionStore()
+let email = ref('')
+let password = ref('')
+
+function submit() {
+  session.login.submit({
+    usr: email.value,
+    pwd: password.value,
+  })
+}
+</script>

frontend/src/router.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { sessionStore } from '@/stores/session'
 
 const routes = [
   {
@@ -25,6 +26,11 @@ const routes = [
     name: 'Dashboard',
     component: () => import('@/pages/Dashboard.vue'),
   },
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/pages/Login.vue'),
+  },
 ]
 
 let router = createRouter({
@@ -32,4 +38,19 @@ let router = createRouter({
   routes,
 })
 
+router.beforeEach(async (to, from, next) => {
+  const session = sessionStore()
+
+  // Initialize session
+  await session.init()
+
+  if (to.name === 'Login' && session.isLoggedIn) {
+    next({ name: 'Leads' })
+  } else if (to.name !== 'Login' && !session.isLoggedIn) {
+    next({ name: 'Login' })
+  } else {
+    next()
+  }
+})
+
 export default router