Initial commit

2025-04-28 13:51:59 +07:00
commit 7f02e92304
113 changed files with 11808 additions and 0 deletions
--- a/.laravel-guide/resources/js/Pages/Auth/TwoFactorChallenge.vue
+++ b/.laravel-guide/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -0,0 +1,126 @@
+<script setup>
+import { useForm, Head } from '@inertiajs/vue3'
+import { nextTick, ref } from 'vue'
+import LayoutGuest from '@/layouts/LayoutGuest.vue'
+import SectionFullScreen from '@/components/SectionFullScreen.vue'
+import CardBox from '@/components/CardBox.vue'
+import FormControl from '@/components/FormControl.vue'
+import FormField from '@/components/FormField.vue'
+import BaseDivider from '@/components/BaseDivider.vue'
+import BaseButton from '@/components/BaseButton.vue'
+import FormValidationErrors from '@/components/FormValidationErrors.vue'
+import BaseLevel from '@/components/BaseLevel.vue'
+
+const recovery = ref(false)
+
+const form = useForm({
+  code: '',
+  recovery_code: ''
+})
+
+const recoveryCodeInput = ref(null)
+const codeInput = ref(null)
+
+const toggleRecovery = async () => {
+  recovery.value ^= true
+
+  await nextTick()
+
+  if (recovery.value) {
+    recoveryCodeInput.value?.focus()
+    form.code = ''
+  } else {
+    codeInput.value?.focus()
+    form.recovery_code = ''
+  }
+}
+
+const submit = () => {
+  form.post(route('two-factor.login'))
+}
+</script>
+
+<template>
+  <LayoutGuest>
+    <Head title="Two-factor Confirmation" />
+
+    <SectionFullScreen
+      v-slot="{ cardClass }"
+      bg="purplePink"
+    >
+      <CardBox
+        :class="cardClass"
+        is-form
+        @submit.prevent="submit"
+      >
+        <FormValidationErrors />
+
+        <FormField>
+          <div class="mb-4 text-sm text-gray-600">
+            <template v-if="! recovery">
+              Please confirm access to your account by entering the authentication code provided by your authenticator application.
+            </template>
+
+            <template v-else>
+              Please confirm access to your account by entering one of your emergency recovery codes.
+            </template>
+          </div>
+        </FormField>
+
+        <FormField
+          v-if="!recovery"
+          label="Code"
+          label-for="code"
+          help="Please enter one-time code"
+        >
+          <FormControl
+            id="code"
+            @set-ref="codeInput = $event"
+            v-model="form.code"
+            type="text"
+            inputmode="numeric"
+            autofocus
+            autocomplete="one-time-code"
+          />
+        </FormField>
+
+        <FormField
+          v-else
+          label="Recovery Code"
+          label-for="recovery_code"
+          help="Please enter recovery code"
+        >
+          <FormControl
+            id="recovery_code"
+            @set-ref="recoveryCodeInput = $event"
+            v-model="form.recovery_code"
+            type="text"
+            class="mt-1 block w-full"
+            autocomplete="one-time-code"
+          />
+        </FormField>
+
+        <BaseDivider />
+
+        <BaseLevel>
+          <BaseButton
+            type="submit"
+            color="info"
+            label="Log in"
+            :class="{ 'opacity-25': form.processing }"
+            :disabled="form.processing"
+          />
+          <button @click.prevent="toggleRecovery">
+            <template v-if="!recovery">
+              Use a recovery code
+            </template>
+
+            <template v-else>
+              Use an authentication code
+            </template>
+          </button>
+        </BaseLevel>
+      </CardBox>
+    </SectionFullScreen>
+  </LayoutGuest>
+</template>