travaux

apis/auth_endpoints.go

@@ -44,7 +44,7 @@ func authLogin(c *gin.Context) {
 		return
 	}
 
-	c.SetCookie("token", jwt, 3600, "/", "", true, true)
+	c.SetCookie("CLORTHO_AUTH", jwt, 3600, "/", "", true, true)
 	c.JSON(200, gin.H{"valid": true})
 }
 

cmd/server/main.go

@@ -14,7 +14,7 @@ func main() {
 		log.Fatal("Could not initialize connection to the DB", err)
 	}
 
-	adminPass, err := users.InitAdminUser(nil)
+	adminPass, err := users.InitAdminUser()
 	if err != nil {
 		log.Println(err)
 	} else {

frontend/src/layouts/default.vue

@@ -40,21 +40,20 @@
 
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import {ref, watch} from 'vue'
 import {useAppStore} from "@/stores/app";
 
 const drawer = ref(false)
 const appStore = useAppStore()
-const items = ref([])
+const items = ref<{ title: string; link: string }[]>([])
+initMenu()
+watch(() => appStore.user, initMenu)
 
-watch(appStore.user, () => {
+function initMenu() {
   if (appStore.user) {
-  items.value = [{
-    title: "Sign In", link: "/signin",
-  }]
+    items.value = [{title: "Log out", link: "/logout"}]
   } else {
-    items.value = []
+    items.value = [{title: "Sign In", link: "/signin"}]
+  }
 }
-})
-
 </script>

frontend/src/pages/signin.vue

@@ -0,0 +1,123 @@
+<template>
+  <v-container
+    class="fill-height"
+    fluid
+  >
+    <v-row
+      align="center"
+      justify="center"
+    >
+      <v-col
+        cols="12"
+        sm="8"
+        md="6"
+        lg="4"
+      >
+        <v-card class="elevation-12">
+          <v-toolbar
+            color="primary"
+            dark
+            flat
+          >
+            <v-toolbar-title>Login</v-toolbar-title>
+          </v-toolbar>
+          <v-card-text>
+            <v-form
+              ref="form"
+              v-model="valid"
+              @submit.prevent="login"
+            >
+              <v-text-field
+                v-model="username"
+                :rules="usernameRules"
+                label="Username"
+                prepend-icon="mdi-account"
+                required
+              />
+
+              <v-text-field
+                v-model="password"
+                :rules="passwordRules"
+                label="Password"
+                prepend-icon="mdi-lock"
+                :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+                :type="showPassword ? 'text' : 'password'"
+                required
+                @click:append="showPassword = !showPassword"
+              />
+            </v-form>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              color="primary"
+              :disabled="!valid"
+              @click="login"
+            >
+              Login
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+import {ref} from 'vue'
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
+const valid = ref(false)
+const username = ref('')
+const password = ref('')
+const showPassword = ref(false)
+
+const usernameRules = [
+  (v: string) => !!v || 'Username is required',
+]
+
+const passwordRules = [
+  (v: string) => !!v || 'Password is required',
+  (v: string) => v.length >= 5 || 'Password must be at least 5 characters',
+]
+
+async function login() {
+  // This is where you would typically handle authentication
+  try {
+    // Example authentication logic (replace with your actual authentication API)
+    // const response = await api.login(username.value, password.value)
+
+    // For now, we'll just simulate a successful login
+    console.log('Login attempted with:', {username: username.value, password: password.value})
+
+    const res = await fetch("/private/auth/login", {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        username: username.value, password: password.value
+      })
+    })
+    if (!res.ok) {
+      alert("error!!!")
+    }
+
+    console.log(await res.json())
+    // After successful login, you would typically:
+    // 1. Store auth token in localStorage or a state management store
+    // 2. Redirect to a protected page
+    router.push('/')
+  } catch (error) {
+    console.error('Login failed:', error)
+    // Handle login error - display message to user
+  }
+}
+</script>
+
+<style scoped>
+.fill-height {
+  height: 100%;
+}
+</style>

frontend/src/typed-router.d.ts

@@ -19,5 +19,6 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/signin': RouteRecordInfo<'/signin', '/signin', Record<never, never>, Record<never, never>>,
   }
 }

frontend/vite.config.mts

@@ -70,6 +70,9 @@ export default defineConfig({
   },
   server: {
     port: 3000,
+    proxy: {
+      '/private': 'http://localhost:8080',
+    }
   },
   css: {
     preprocessorOptions: {

users/users.go

@@ -2,6 +2,7 @@ package users
 
 import (
 	"clortho/db"
+	"clortho/utils"
 	"crypto/rand"
 	"errors"
 	"fmt"
@@ -78,7 +79,12 @@ func InitAdminUser() (*string, error) {
 		return nil, errors.New("Admin user already exists")
 	}
 
-	pass, _ := GenerateSecurePassword(32)
+	var pass string
+	if utils.IsDev() {
+		pass = "admin"
+	} else {
+		pass, _ = GenerateSecurePassword(32)
+	}
 	hash, _ := HashPassword(pass)
 	admin := db.User{Username: username, DisplayName: &username, Admin: true, PasswordHash: &hash}
 	result := db.Connection.Create(&admin)

utils/utils.go

@@ -1,5 +1,15 @@
 package utils
 
+import "os"
+
 func Ptr(s string) *string {
 	return &s
 }
+
+func IsDev() bool {
+	strDev := os.Getenv("CLORTHO_DEV")
+	if strDev == "true" {
+		return true
+	}
+	return false
+}