Login.vue 2.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <script setup>
  2. import { Head, Link, useForm } from '@inertiajs/inertia-vue3'
  3. import AuthValidationErrors from '@/components/AuthValidationErrors.vue'
  4. import AuthSessionSuccess from '@/components/AuthSessionSuccess.vue'
  5. import AppButtonCreate from '@/components/AppButtonCreate.vue'
  6. import logoNegative from '@/assets/brand/logoNegative'
  7. const form = useForm({
  8. email: 'admin@laundry.com',
  9. password: 'admin',
  10. remember: false,
  11. })
  12. const submit = () => {
  13. form.post(route('login'), {
  14. onFinish: () => form.reset('password'),
  15. })
  16. }
  17. </script>
  18. <template>
  19. <Head title="Log in" />
  20. <div class="bg-light min-vh-100 d-flex align-items-center">
  21. <CContainer>
  22. <AuthValidationErrors />
  23. <AuthSessionSuccess />
  24. <CRow class="justify-content-center">
  25. <CCol md="8">
  26. <CCardGroup>
  27. <CCard class="p-4">
  28. <CCardBody>
  29. <CForm @submit.prevent="submit">
  30. <h1>Login</h1>
  31. <p class="text-medium-emphasis">Masuk ke akun anda</p>
  32. <CInputGroup class="mb-3">
  33. <CInputGroupText>
  34. <CIcon icon="cil-user" />
  35. </CInputGroupText>
  36. <CFormInput placeholder="email" v-model="form.email" />
  37. </CInputGroup>
  38. <CInputGroup class="mb-4">
  39. <CInputGroupText>
  40. <CIcon icon="cil-lock-locked" />
  41. </CInputGroupText>
  42. <CFormInput type="password" placeholder="password" v-model="form.password" />
  43. </CInputGroup>
  44. <CRow>
  45. <CCol xs="12" lg="6">
  46. <AppButtonCreate :disabled="form.processing">Login</AppButtonCreate>
  47. </CCol>
  48. <CCol xs="12" lg="6" class="text-start">
  49. <Link :href="route('password.request')">Lupa Password?</Link>
  50. </CCol>
  51. </CRow>
  52. </CForm>
  53. </CCardBody>
  54. </CCard>
  55. <CCard class="text-white bg-primary py-5">
  56. <CCardBody class="text-center">
  57. <CRow class="align-items-center" style="height: 100%">
  58. <CCol>
  59. <CIcon :icon="logoNegative" height="35" />
  60. </CCol>
  61. </CRow>
  62. </CCardBody>
  63. </CCard>
  64. </CCardGroup>
  65. </CCol>
  66. </CRow>
  67. </CContainer>
  68. </div>
  69. </template>