dredgy/DredgeTours
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Installed Laravel

Browse Source
This commit is contained in:
Josh
2025-09-13 22:32:19 +10:00
parent 9ef6cd69b7
commit 5ad54abff2
269 changed files with 25065 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
resources/js/pages/auth/TwoFactorChallenge.vue Normal file
View File

@@ -0,0 +1,97 @@
<script setup lang="ts">
import InputError from '@/components/InputError.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input';
import AuthLayout from '@/layouts/AuthLayout.vue';
import { store } from '@/routes/two-factor/login';
import { Form, Head } from '@inertiajs/vue3';
import { computed, ref } from 'vue';
interface AuthConfigContent {
title: string;
description: string;
toggleText: string;
}
const authConfigContent = computed<AuthConfigContent>(() => {
if (showRecoveryInput.value) {
return {
title: 'Recovery Code',
description: 'Please confirm access to your account by entering one of your emergency recovery codes.',
toggleText: 'login using an authentication code',
};
}
return {
title: 'Authentication Code',
description: 'Enter the authentication code provided by your authenticator application.',
toggleText: 'login using a recovery code',
};
});
const showRecoveryInput = ref<boolean>(false);
const toggleRecoveryMode = (clearErrors: () => void): void => {
showRecoveryInput.value = !showRecoveryInput.value;
clearErrors();
code.value = [];
};
const code = ref<number[]>([]);
const codeValue = computed<string>(() => code.value.join(''));
</script>
<template>
<AuthLayout :title="authConfigContent.title" :description="authConfigContent.description">
<Head title="Two-Factor Authentication" />
<div class="space-y-6">
<template v-if="!showRecoveryInput">
<Form v-bind="store.form()" class="space-y-4" reset-on-error @error="code = []" #default="{ errors, processing, clearErrors }">
<input type="hidden" name="code" :value="codeValue" />
<div class="flex flex-col items-center justify-center space-y-3 text-center">
<div class="flex w-full items-center justify-center">
<PinInput id="otp" placeholder="○" v-model="code" type="number" otp>
<PinInputGroup>
<PinInputSlot v-for="(id, index) in 6" :key="id" :index="index" :disabled="processing" autofocus />
</PinInputGroup>
</PinInput>
</div>
<InputError :message="errors.code" />
</div>
<Button type="submit" class="w-full" :disabled="processing">Continue</Button>
<div class="text-center text-sm text-muted-foreground">
<span>or you can </span>
<button
type="button"
class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
@click="() => toggleRecoveryMode(clearErrors)"
>
{{ authConfigContent.toggleText }}
</button>
</div>
</Form>
</template>
<template v-else>
<Form v-bind="store.form()" class="space-y-4" reset-on-error #default="{ errors, processing, clearErrors }">
<Input name="recovery_code" type="text" placeholder="Enter recovery code" :autofocus="showRecoveryInput" required />
<InputError :message="errors.recovery_code" />
<Button type="submit" class="w-full" :disabled="processing">Continue</Button>
<div class="text-center text-sm text-muted-foreground">
<span>or you can </span>
<button
type="button"
class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
@click="() => toggleRecoveryMode(clearErrors)"
>
{{ authConfigContent.toggleText }}
</button>
</div>
</Form>
</template>
</div>
</AuthLayout>
</template>