add auth

components/admin/LoginPage.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="login">
+    <div class="login__header">
+      <h1 class="login__title">Login</h1>
+    </div>
+    <form @submit.prevent="handleLogin" class="login__form">
+      <div class="login__input-group">
+        <label for="username" class="login__label">Username</label>
+        <input
+          id="username"
+          type="username"
+          v-model="username"
+          placeholder="Enter your username"
+          class="login__input"
+          required
+        />
+      </div>
+      <div class="login__input-group">
+        <label for="password" class="login__label">Password</label>
+        <input
+          id="password"
+          type="password"
+          v-model="password"
+          placeholder="Enter your password"
+          class="login__input"
+          required
+        />
+      </div>
+      <button type="submit" class="login__submit">Login</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { useFetch } from 'nuxt/app'
+
+export default {
+  name: 'LoginPage',
+  data() {
+    return {
+      username: '',
+      password: '',
+    }
+  },
+  methods: {
+    async handleLogin() {
+      try {
+        const { data, error } = await useFetch('/api/login', {
+          method: 'POST',
+          body: { username: this.username, password: this.password },
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
+
+        if (error.value) {
+          this.errorMessage = 'Invalid login credentials. Please try again.'
+          return
+        }
+
+        // Redirect to another page or store user data, etc.
+      } catch (err) {
+        this.errorMessage = 'Something went wrong. Please try again later.'
+        console.error(err)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.login {
+  &__header {
+    margin-bottom: $shortMargin;
+    text-align: center;
+  }
+
+  &__title {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: $halfShortMargin;
+  }
+
+  &__form {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid rgb(231, 226, 222);
+    border-radius: 8px;
+    background-color: #fff;
+  }
+
+  &__input-group {
+    margin-bottom: $halfShortMargin;
+
+    @media (min-width: 1023px) {
+      margin-bottom: $shortMargin;
+    }
+  }
+
+  &__label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
+
+  &__input {
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  &__submit {
+    width: 100%;
+    padding: 12px;
+    background-color: $colorMain;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: bold;
+    transition: background-color $defaultAnimTime;
+
+    &:hover {
+      background-color: $colorHover;
+    }
+  }
+}
+</style>

pages/admin/login.vue

@@ -0,0 +1,32 @@
+<template>
+  <main class="wrapper">
+    <LoginPage />
+  </main>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { useHead } from 'nuxt/app'
+
+import LoginPage from '~~/components/admin/LoginPage.vue'
+
+export default defineComponent({
+  name: 'LoginPageWrapper',
+  components: { LoginPage },
+
+  setup() {
+    // Optionally, you can set meta tags or SEO related content.
+    useHead({
+      meta: [{ name: 'robots', content: 'noindex, nofollow' }]
+    })
+
+    return {}
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  @include defaultWrapper;
+}
+</style>

server/api/login.post.js

@@ -5,6 +5,8 @@ export default defineEventHandler(async (event) => {
     const body = await readBody(event)
     const { username, password } = body
 
+    console.log('username:', username)
+
     const { sessionId, expiresAt, error } = await addSessionToUser(
         username,
         password

server/api/service.get.js

@@ -1,12 +1,14 @@
 import { defineEventHandler } from 'h3'
 import { db } from '~/server/utils/mongo'
 
-export default defineEventHandler(async () => {
+export default defineEventHandler(async (event) => {
     const response = {}
     if (!db) {
         response.isDbConnected = false
     } else {
         response.isDbConnected = true
     }
+    const safeUsername = event.context?.auth?.username || 'User not logged in'
+    response.username = safeUsername
     return response
 })

server/middleware/auth.js

@@ -0,0 +1,13 @@
+import { defineEventHandler, parseCookies } from 'h3'
+import { getUserBySessionId } from '~/server/utils/user'
+
+export default defineEventHandler(async (event) => {
+    const cookie = parseCookies(event)
+    const sessionId = cookie.sessionId
+    const user = await getUserBySessionId(sessionId)
+
+    if (user) {
+        event.context.auth = { username: user.username }
+    }
+})
+