manja_dev_ui/src/views/pages/Login.vue

<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>
      <CRow class="justify-content-center">
        <CCol :md="8">
          <CCardGroup>
            <CCard class="p-4">
              <CCardBody>
                <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
                      v-model="form.login"
                      type="text"
                      placeholder="Username atau Email"
                      autocomplete="username"
                      required
                    />
                  </CInputGroup>
                  <CInputGroup class="mb-4">
                    <CInputGroupText>
                      <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" type="submit" :disabled="isLoading">
                        {{ isLoading ? 'Loading...' : 'Masuk' }}
                      </CButton>
                    </CCol>
                    <CCol :xs="6" class="text-right">
                    </CCol>
                  </CRow>
                </CForm>
              </CCardBody>
            </CCard>
            <CCard class="text-white bg-primary py-5" style="width: 44%">
              <CCardBody class="text-center">
                <div>
                  <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>
            </CCard>
          </CCardGroup>
        </CCol>
      </CRow>
    </CContainer>
  </div>
</template>