ForgotPassword.vue 2.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <script setup>
  2. import { Head, 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: '',
  9. })
  10. const submit = () => {
  11. form.post(route('password.email'))
  12. }
  13. </script>
  14. <template>
  15. <Head title="Lupa Password" />
  16. <div class="bg-light min-vh-100 d-flex align-items-center">
  17. <CContainer>
  18. <AuthValidationErrors />
  19. <AuthSessionSuccess />
  20. <CRow class="justify-content-center">
  21. <CCol md="8">
  22. <CCardGroup>
  23. <CCard class="p-4">
  24. <CCardBody>
  25. <CForm @submit.prevent="submit">
  26. <h1>Lupa Password</h1>
  27. <p class="text-medium-emphasis">Tulis Email anda untuk mereset Password.</p>
  28. <CInputGroup class="mb-3">
  29. <CInputGroupText>
  30. <CIcon icon="cil-at" />
  31. </CInputGroupText>
  32. <CFormInput type="email" placeholder="email" v-model="form.email" />
  33. </CInputGroup>
  34. <CRow>
  35. <CCol>
  36. <div class="d-grid">
  37. <AppButtonCreate :disabled="form.processing">Permintaan Password baru</AppButtonCreate>
  38. </div>
  39. </CCol>
  40. </CRow>
  41. </CForm>
  42. </CCardBody>
  43. </CCard>
  44. <CCard class="text-white bg-primary py-5">
  45. <CCardBody class="text-center">
  46. <CRow class="align-items-center" style="height: 100%">
  47. <CCol>
  48. <CIcon :icon="logoNegative" height="35" />
  49. </CCol>
  50. </CRow>
  51. </CCardBody>
  52. </CCard>
  53. </CCardGroup>
  54. </CCol>
  55. </CRow>
  56. </CContainer>
  57. </div>
  58. </template>