ResetPassword.vue 2.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <script setup>
  2. import { Head, useForm } from '@inertiajs/inertia-vue3'
  3. import AuthValidationErrors from '@/components/AuthValidationErrors.vue'
  4. import AppButtonCreate from '@/components/AppButtonCreate.vue'
  5. import logoNegative from '@/assets/brand/logoNegative'
  6. const props = defineProps({
  7. token: String,
  8. email: String,
  9. })
  10. const form = useForm({
  11. token: props.token,
  12. email: props.email,
  13. password: '',
  14. password_confirmation: '',
  15. })
  16. const submit = () => {
  17. form.post(route('password.update'), {
  18. onFinish: () => form.reset('password', 'password_confirmation'),
  19. })
  20. }
  21. </script>
  22. <template>
  23. <Head title="Reset Password" />
  24. <div class="bg-light min-vh-100 d-flex align-items-center">
  25. <CContainer>
  26. <AuthValidationErrors />
  27. <CRow class="justify-content-center">
  28. <CCol md="8">
  29. <CCardGroup>
  30. <CCard class="p-4">
  31. <CCardBody>
  32. <CForm @submit.prevent="submit">
  33. <h1>Reset Password</h1>
  34. <p class="text-medium-emphasis">Tulis Password baru untuk login</p>
  35. <CInputGroup class="mb-3">
  36. <CInputGroupText>
  37. <CIcon icon="cil-user" />
  38. </CInputGroupText>
  39. <CFormInput placeholder="email" v-model="form.email" />
  40. </CInputGroup>
  41. <CInputGroup class="mb-4">
  42. <CInputGroupText>
  43. <CIcon icon="cil-lock-locked" />
  44. </CInputGroupText>
  45. <CFormInput type="password" placeholder="password" v-model="form.password" />
  46. </CInputGroup>
  47. <CInputGroup class="mb-4">
  48. <CInputGroupText>
  49. <CIcon icon="cil-lock-locked" />
  50. </CInputGroupText>
  51. <CFormInput
  52. type="password"
  53. placeholder="konfirmasi password"
  54. v-model="form.password_confirmation"
  55. />
  56. </CInputGroup>
  57. <CRow>
  58. <CCol>
  59. <div class="d-grid">
  60. <AppButtonCreate :disabled="form.processing">Reset Password</AppButtonCreate>
  61. </div>
  62. </CCol>
  63. </CRow>
  64. </CForm>
  65. </CCardBody>
  66. </CCard>
  67. <CCard class="text-white bg-primary py-5">
  68. <CCardBody class="text-center">
  69. <CRow class="align-items-center" style="height: 100%">
  70. <CCol>
  71. <CIcon :icon="logoNegative" height="35" />
  72. </CCol>
  73. </CRow>
  74. </CCardBody>
  75. </CCard>
  76. </CCardGroup>
  77. </CCol>
  78. </CRow>
  79. </CContainer>
  80. </div>
  81. </template>