jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

♻️ Add direct sign in after onboarding

Browse Source
This commit is contained in:
Meier Lukas
2023-08-06 15:49:24 +02:00
parent 3ef12cfe12
commit 65cd15aba5
1 changed files with 43 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/pages/onboard.tsx
View File

@@ -21,6 +21,8 @@ import { useMediaQuery } from '@mantine/hooks';
import { IconLayoutDashboard, IconUserCog } from '@tabler/icons-react'; import { IconLayoutDashboard, IconUserCog } from '@tabler/icons-react';
import { IconArrowRight, IconBook2, IconUserPlus } from '@tabler/icons-react'; import { IconArrowRight, IconBook2, IconUserPlus } from '@tabler/icons-react';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { signIn } from 'next-auth/react';
import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
import { ReactNode, useMemo, useState } from 'react'; import { ReactNode, useMemo, useState } from 'react';
import { z } from 'zod'; import { z } from 'zod';
@@ -42,26 +44,32 @@ export default function OnboardPage() {
const background = colorScheme === 'dark' ? 'dark.6' : 'gray.1'; const background = colorScheme === 'dark' ? 'dark.6' : 'gray.1';
return ( return (
<Stack h="100dvh" bg={background} spacing={0}> <>
<Center bg={fn.linearGradient(145, colors.red[7], colors.red[5])} h="35%"> <Head>
<Center bg={background} w={128} h={128} style={{ borderRadius: 64 }}> <title>Onboard • Homarr</title>
<Image width={96} src="/imgs/logo/logo-color.svg" alt="Homarr Logo" /> </Head>
<Stack h="100dvh" bg={background} spacing={0}>
<Center bg={fn.linearGradient(145, colors.red[7], colors.red[5])} h="35%">
<Center bg={background} w={128} h={128} style={{ borderRadius: 64 }}>
<Image width={96} src="/imgs/logo/logo-color.svg" alt="Homarr Logo" />
</Center>
</Center> </Center>
</Center> <Stack spacing="xl" p="md" align="center">
<Stack spacing="xl" p="md" align="center"> <Group>
<Group> {stepContents.map((_, index) => (
{stepContents.map((_, index) => ( <Step
<Step key={index}
key={index} isCurrent={currentStep === index}
isCurrent={currentStep === index} isMobile={isSmallerThanMd}
isMobile={isSmallerThanMd} isDark={colorScheme === 'dark'}
isDark={colorScheme === 'dark'} />
/> ))}
))} </Group>
</Group> <CurrentStepComponent isMobile={isSmallerThanMd} next={next} />
<CurrentStepComponent isMobile={isSmallerThanMd} next={next} /> </Stack>
</Stack> </Stack>
</Stack> </>
); );
} }
@@ -101,7 +109,8 @@ const FirstStepContent: StepContentComponent = ({ isMobile, next }) => {
}; };
const SecondStepContent: StepContentComponent = ({ isMobile, next }) => { const SecondStepContent: StepContentComponent = ({ isMobile, next }) => {
const { mutateAsync, isLoading } = api.user.createAdminAccount.useMutation(); const [isSigninIn, setIsSigninIn] = useState(false);
const { mutateAsync } = api.user.createAdminAccount.useMutation();
const { i18nZodResolver } = useI18nZodResolver(); const { i18nZodResolver } = useI18nZodResolver();
const form = useForm<z.infer<typeof signUpFormSchema>>({ const form = useForm<z.infer<typeof signUpFormSchema>>({
@@ -109,9 +118,21 @@ const SecondStepContent: StepContentComponent = ({ isMobile, next }) => {
validateInputOnBlur: true, validateInputOnBlur: true,
}); });
const handleSubmit = (values: z.infer<typeof signUpFormSchema>) => { const handleSubmit = (values: z.infer<typeof signUpFormSchema>) => {
setIsSigninIn(true);
void mutateAsync(values, { void mutateAsync(values, {
onSuccess: () => { onSuccess: () => {
next(); signIn('credentials', {
redirect: false,
name: values.username,
password: values.password,
callbackUrl: '/',
}).then((response) => {
if (!response?.ok) {
setIsSigninIn(false);
return;
}
next();
});
}, },
}); });
}; };
@@ -147,7 +168,7 @@ const SecondStepContent: StepContentComponent = ({ isMobile, next }) => {
withAsterisk withAsterisk
{...form.getInputProps('passwordConfirmation')} {...form.getInputProps('passwordConfirmation')}
/> />
<Button mt="sm" fullWidth type="submit" loading={isLoading}> <Button mt="sm" fullWidth type="submit" loading={isSigninIn}>
Continue Continue
</Button> </Button>
</Stack> </Stack>
@@ -165,7 +186,7 @@ const firstActions = [
{ {
icon: IconUserPlus, icon: IconUserPlus,
label: 'Invite an user', label: 'Invite an user',
href: '/users/invite', href: '/manage/users/invites',
}, },
{ {
icon: IconLayoutDashboard, icon: IconLayoutDashboard,