base struktur update

src/views/pages/Login.vue

@@ -1,3 +1,41 @@
+<script setup>
+import { reactive, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const route = useRoute()
+const authStore = useAuthStore()
+
+const form = reactive({
+  login: '',
+  password: '',
+})
+
+const isLoading = computed(() => authStore.loading)
+const errorMessage = computed(() => authStore.error)
+
+async function onSubmit() {
+  authStore.clearError()
+
+  try {
+    await authStore.login({
+      login: form.login,
+      password: form.password,
+    })
+
+    const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/dashboard'
+    await router.replace(redirect)
+  } catch (error) {
+    console.error('Login failed:', error)
+  }
+}
+
+function goToRegister() {
+  router.push('/pages/register')
+}
+</script>
+
 <template>
   <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
@@ -6,16 +44,24 @@
           <CCardGroup>
             <CCard class="p-4">
               <CCardBody>
-                <CForm>
-                  <h1>Login</h1>
-                  <p class="text-body-secondary">Sign In to your account</p>
+                <CForm @submit.prevent="onSubmit">
+                  <h1>Masuk</h1>
+                  <p class="text-body-secondary">Masuk ke akun anda</p>
+
+                  <CAlert v-if="errorMessage" color="danger" class="mb-3">
+                    {{ errorMessage }}
+                  </CAlert>
+
                   <CInputGroup class="mb-3">
                     <CInputGroupText>
                       <CIcon icon="cil-user" />
                     </CInputGroupText>
                     <CFormInput
-                      placeholder="Username"
+                      v-model="form.login"
+                      type="text"
+                      placeholder="Username atau Email"
                       autocomplete="username"
+                      required
                     />
                   </CInputGroup>
                   <CInputGroup class="mb-4">
@@ -23,19 +69,20 @@
                       <CIcon icon="cil-lock-locked" />
                     </CInputGroupText>
                     <CFormInput
+                      v-model="form.password"
                       type="password"
                       placeholder="Password"
                       autocomplete="current-password"
+                      required
                     />
                   </CInputGroup>
                   <CRow>
                     <CCol :xs="6">
-                      <CButton color="primary" class="px-4"> Login </CButton>
+                      <CButton color="primary" class="px-4" type="submit" :disabled="isLoading">
+                        {{ isLoading ? 'Loading...' : 'Masuk' }}
+                      </CButton>
                     </CCol>
                     <CCol :xs="6" class="text-right">
-                      <CButton color="link" class="px-0">
-                        Forgot password?
-                      </CButton>
                     </CCol>
                   </CRow>
                 </CForm>
@@ -44,14 +91,10 @@
             <CCard class="text-white bg-primary py-5" style="width: 44%">
               <CCardBody class="text-center">
                 <div>
-                  <h2>Sign up</h2>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-                    sed do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua.
-                  </p>
-                  <CButton color="light" variant="outline" class="mt-3">
-                    Register Now!
+                  <h2>Belum punya akun?</h2>
+                  <p>Silakan registrasi untuk membuat akun baru.</p>
+                  <CButton color="light" variant="outline" class="mt-3" @click="goToRegister">
+                    Registrasi Sekarang!
                   </CButton>
                 </div>
               </CCardBody>