direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-05 16:02:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add two factor (#632)

Browse Source
This commit is contained in:
Saeed Vaziry
2025-06-27 01:07:33 +02:00
committed by GitHub
parent 73c836bfe7
commit 194143d7ef
12 changed files with 388 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
resources/js/layouts/app/layout.tsx
View File

@ -1,7 +1,7 @@
import { AppSidebar } from '@/components/app-sidebar';
import { AppHeader } from '@/components/app-header';
import { type BreadcrumbItem, NavItem, SharedData } from '@/types';
import { type PropsWithChildren } from 'react';
import { type PropsWithChildren, useEffect } from 'react';
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
import { usePage } from '@inertiajs/react';
import { Toaster } from '@/components/ui/sonner';
@ -20,38 +20,40 @@ export default function Layout({
}>) {
const page = usePage<SharedData>();
if (page.props.flash && page.props.flash.success) {
toast(
<div className="flex items-center gap-2">
<CheckCircle2Icon className="text-success size-5" />
{page.props.flash.success}
</div>,
);
}
if (page.props.flash && page.props.flash.error) {
toast(
<div className="flex items-center gap-2">
<CircleXIcon className="text-destructive size-5" />
{page.props.flash.error}
</div>,
);
}
if (page.props.flash && page.props.flash.warning) {
toast(
<div className="flex items-center gap-2">
<TriangleAlertIcon className="text-warning size-5" />
{page.props.flash.warning}
</div>,
);
}
if (page.props.flash && page.props.flash.info) {
toast(
<div className="flex items-center gap-2">
<InfoIcon className="text-info size-5" />
{page.props.flash.info}
</div>,
);
}
useEffect(() => {
if (page.props.flash && page.props.flash.success) {
toast(
<div className="flex items-center gap-2">
<CheckCircle2Icon className="text-success size-5" />
{page.props.flash.success}
</div>,
);
}
if (page.props.flash && page.props.flash.error) {
toast(
<div className="flex items-center gap-2">
<CircleXIcon className="text-destructive size-5" />
{page.props.flash.error}
</div>,
);
}
if (page.props.flash && page.props.flash.warning) {
toast(
<div className="flex items-center gap-2">
<TriangleAlertIcon className="text-warning size-5" />
{page.props.flash.warning}
</div>,
);
}
if (page.props.flash && page.props.flash.info) {
toast(
<div className="flex items-center gap-2">
<InfoIcon className="text-info size-5" />
{page.props.flash.info}
</div>,
);
}
}, [page.props.flash]);
const queryClient = new QueryClient();

76
resources/js/pages/auth/two-factor.tsx Normal file
View File

@ -0,0 +1,76 @@
import { Head, Link, useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react';
import InputError from '@/components/ui/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AuthLayout from '@/layouts/auth/layout';
import { Form, FormField, FormFields } from '@/components/ui/form';
export default function TwoFactor() {
const form = useForm<Required<{ code: string; recovery_code: string }>>({
code: '',
recovery_code: '',
});
const submit: FormEventHandler = (e) => {
e.preventDefault();
form.post(route('two-factor.store'), {
onFinish: () => form.reset(),
});
};
return (
<AuthLayout title="Two factor challenge" description="Please enter the two-factor authentication code to continue.">
<Head title="Confirm password" />
<Form onSubmit={submit}>
<FormFields>
<FormField>
<Label htmlFor="code">Code</Label>
<Input
id="code"
type="text"
name="code"
placeholder="Two factor code"
value={form.data.code}
autoFocus
onChange={(e) => form.setData('code', e.target.value)}
/>
<InputError message={form.errors.code} />
</FormField>
<FormField>
<Label htmlFor="recovery_code">Recovery Code</Label>
<Input
id="recovery_code"
type="text"
name="recovery_code"
placeholder="Or enter your recovery code"
value={form.data.recovery_code}
onChange={(e) => form.setData('recovery_code', e.target.value)}
/>
<InputError message={form.errors.recovery_code} />
</FormField>
<div className="space-y-2">
<Button className="w-full" disabled={form.processing}>
{form.processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
Confirm
</Button>
<Button variant="ghost" asChild>
<Link className="block w-full" method="post" href={route('logout')}>
Back to login
</Link>
</Button>
</div>
</FormFields>
</Form>
</AuthLayout>
);
}

139
resources/js/pages/profile/components/two-factor.tsx Normal file
View File

@ -0,0 +1,139 @@
import { useForm, usePage } from '@inertiajs/react';
import type { SharedData } from '@/types';
import { FormEventHandler, ReactNode, useState } from 'react';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { CheckCircle2Icon, LoaderCircleIcon, XCircleIcon } from 'lucide-react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { FormField, FormFields } from '@/components/ui/form';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Alert, AlertDescription } from '@/components/ui/alert';
function Disable(): ReactNode {
const [open, setOpen] = useState(false);
const form = useForm();
const submit = () => {
form.post(route('profile.disable-two-factor'), {
preserveScroll: true,
onSuccess: () => setOpen(false),
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="destructive">Disable Two Factor</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Disable two factor</DialogTitle>
<DialogDescription className="sr-only">Disable two factor</DialogDescription>
</DialogHeader>
<p className="p-4">Are you sure you want to enable two factor authentication?</p>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button onClick={submit} variant="destructive" disabled={form.processing}>
{form.processing && <LoaderCircleIcon className="animate-spin" />}
Disable
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
function Enable() {
const form = useForm();
const submit: FormEventHandler = (e) => {
e.preventDefault();
form.post(route('profile.enable-two-factor'));
};
return (
<Button onClick={submit} disabled={form.processing}>
{form.processing && <LoaderCircleIcon className="animate-spin" />}
Enable Two Factor
</Button>
);
}
export default function TwoFactor() {
const page = usePage<
SharedData & {
flash: {
data?: {
qr_code?: string;
qr_code_url?: string;
recovery_codes?: string[];
};
};
}
>();
return (
<Card>
<CardHeader>
<CardTitle>Two factor authentication</CardTitle>
<CardDescription>Enable or Disable two factor authentication</CardDescription>
</CardHeader>
<CardContent className="space-y-2 p-4">
{page.props.flash.data?.qr_code && (
<FormFields>
<FormField>
<Label htmlFor="qr-code">Scan this QR code with your authenticator app</Label>
<div className="flex max-h-[400px] items-center">
<div dangerouslySetInnerHTML={{ __html: page.props.flash.data.qr_code }}></div>
</div>
</FormField>
<FormField>
<Label htmlFor="qr-code-url">QR Code URL</Label>
<Input id="qr-code-url" value={page.props.flash.data.qr_code_url} disabled />
</FormField>
<FormField>
<Label htmlFor="recovery-codes">Recovery Codes</Label>
<Textarea id="recovery-codes" value={page.props.flash.data.recovery_codes?.join('\n') || ''} disabled rows={5} />
</FormField>
</FormFields>
)}
{page.props.auth.user.two_factor_enabled ? (
<Alert>
<AlertDescription>
<div className="flex items-center gap-2">
<CheckCircle2Icon className="text-success size-4" />
<p>Two factor authentication is enabled</p>
</div>
</AlertDescription>
</Alert>
) : (
<Alert>
<AlertDescription>
<div className="flex items-center gap-2">
<XCircleIcon className="text-danger size-4" />
Two factor authentication is <strong>not</strong> enabled
</div>
</AlertDescription>
</Alert>
)}
</CardContent>
<CardFooter className="gap-2">
{!page.props.auth.user.two_factor_enabled && <Enable />}
{page.props.auth.user.two_factor_enabled && <Disable />}
</CardFooter>
</Card>
);
}

23
resources/js/pages/profile/index.tsx
View File

@ -4,15 +4,34 @@ import Container from '@/components/container';
import UpdatePassword from '@/pages/profile/components/update-password';
import UpdateProfile from '@/pages/profile/components/update-profile';
import Heading from '@/components/heading';
import TwoFactor from '@/pages/profile/components/two-factor';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useState } from 'react';
export default function Profile() {
const [tab, setTab] = useState('info');
return (
<SettingsLayout>
<Head title="Profile settings" />
<Container className="max-w-5xl">
<Heading title="Profile settings" description="Manage your profile settings." />
<UpdateProfile />
<UpdatePassword />
<Tabs defaultValue={tab} onValueChange={setTab}>
<TabsList>
<TabsTrigger value="info">Info</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="two_factor">Two Factor</TabsTrigger>
</TabsList>
<TabsContent value="info">
<UpdateProfile />
</TabsContent>
<TabsContent value="password">
<UpdatePassword />
</TabsContent>
<TabsContent value="two_factor">
<TwoFactor />
</TabsContent>
</Tabs>
</Container>
</SettingsLayout>
);

10
resources/js/pages/site-features/index.tsx
View File

@ -5,7 +5,7 @@ import HeaderContainer from '@/components/header-container';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import ServerLayout from '@/layouts/server/layout';
import { BookOpenIcon, MoreVerticalIcon } from 'lucide-react';
import { MoreVerticalIcon } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardRow, CardTitle } from '@/components/ui/card';
import React from 'react';
import { Site, SiteFeature } from '@/types/site';
@ -29,14 +29,6 @@ export default function SiteFeatures() {
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title="Features" description="Your site has some features enabled by Vito or other plugins" />
<div className="flex items-center gap-2">
<a href="https://vitodeploy.com/docs/sites/features" target="_blank">
<Button variant="outline">
<BookOpenIcon />
<span className="hidden lg:block">Docs</span>
</Button>
</a>
</div>
</HeaderContainer>
<Card>

1
resources/js/types/user.d.ts vendored
View File

@ -10,6 +10,7 @@ export interface User {
updated_at: string;
timezone: string;
projects?: Project[];
two_factor_enabled: boolean;
role: string;
[key: string]: unknown; // This allows for additional properties...
}