diff --git a/src/components/Onboarding/onboarding-steps.tsx b/src/components/Onboarding/onboarding-steps.tsx index c475aa14f..036f4fb31 100644 --- a/src/components/Onboarding/onboarding-steps.tsx +++ b/src/components/Onboarding/onboarding-steps.tsx @@ -1,11 +1,11 @@ import { Stack, Stepper } from '@mantine/core'; import { useState } from 'react'; -import { StepUpdatePathMappings } from './step-update-path-mappings'; import { StepCreateAccount } from './step-create-account'; -import { StepOnboardingFinished } from './step-onboarding-finished'; import { StepDockerImport } from './step-docker-import'; import { StepDocumentation } from './step-documentation'; +import { StepOnboardingFinished } from './step-onboarding-finished'; +import { StepUpdatePathMappings } from './step-update-path-mappings'; export const OnboardingSteps = ({ isUpdate }: { isUpdate: boolean }) => { const [currentStep, setCurrentStep] = useState(0); @@ -14,7 +14,12 @@ export const OnboardingSteps = ({ isUpdate }: { isUpdate: boolean }) => { return ( - + {isUpdate && ( void }) => { {dockerComposeCommand} + Run docker compose up. + Refresh this page and click on "continue" @@ -168,6 +170,8 @@ export const StepUpdatePathMappings = ({ next }: { next: () => void }) => { innermost directory should be different, than your existing mounting points (eg.{' '} /mnt/user/appdata/homarr/data) + Click "Apply" and wait for the container to be restarted. + Refresh this page and click on "continue" diff --git a/src/pages/onboard.tsx b/src/pages/onboard.tsx index 13effaced..c93ceb93b 100644 --- a/src/pages/onboard.tsx +++ b/src/pages/onboard.tsx @@ -1,41 +1,13 @@ -import { - Box, - Button, - Card, - Center, - Divider, - Flex, - Grid, - Group, - Image, - PasswordInput, - Stack, - Stepper, - Text, - TextInput, - Title, - UnstyledButton, - createStyles, - useMantineTheme, -} from '@mantine/core'; -import { useForm } from '@mantine/form'; -import { useDisclosure, useMediaQuery } from '@mantine/hooks'; -import { IconLayoutDashboard, IconUserCog } from '@tabler/icons-react'; -import { IconArrowRight, IconBook2, IconUserPlus } from '@tabler/icons-react'; +import { Box, Button, Center, Image, Stack, Text, Title, useMantineTheme } from '@mantine/core'; +import { useDisclosure } from '@mantine/hooks'; +import { IconArrowRight } from '@tabler/icons-react'; import fs from 'fs'; -import { GetServerSideProps, GetServerSidePropsResult, InferGetServerSidePropsType } from 'next'; -import { signIn } from 'next-auth/react'; +import { GetServerSideProps, InferGetServerSidePropsType } from 'next'; import Head from 'next/head'; -import Link from 'next/link'; -import { ReactNode, useMemo, useState } from 'react'; -import { z } from 'zod'; import { OnboardingSteps } from '~/components/Onboarding/onboarding-steps'; import { prisma } from '~/server/db'; import { getConfig } from '~/tools/config/getConfig'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; -import { api } from '~/utils/api'; -import { useI18nZodResolver } from '~/utils/i18n-zod-resolver'; -import { signUpFormSchema } from '~/validations/user'; export default function OnboardPage({ configSchemaVersions, @@ -54,7 +26,11 @@ export default function OnboardPage({ -
+
Homarr Logo
@@ -89,154 +65,6 @@ export default function OnboardPage({ ); } -type StepContentComponent = (props: { isMobile: boolean; next: () => void }) => ReactNode; - -const FirstStepContent: StepContentComponent = ({ isMobile, next }) => { - return ( - - - Hi there! - Welcome to Homarr! 👋 - - - Before you can use Homarr, you need to configure a few things. - - - - ); -}; - -const SecondStepContent: StepContentComponent = ({ isMobile, next }) => { - const [isSigninIn, setIsSigninIn] = useState(false); - const { mutateAsync } = api.user.createOwnerAccount.useMutation(); - const { i18nZodResolver } = useI18nZodResolver(); - - const form = useForm>({ - validate: i18nZodResolver(signUpFormSchema), - validateInputOnBlur: true, - }); - const handleSubmit = (values: z.infer) => { - setIsSigninIn(true); - void mutateAsync(values, { - onSuccess: () => { - signIn('credentials', { - redirect: false, - name: values.username, - password: values.password, - callbackUrl: '/', - }).then((response) => { - if (!response?.ok) { - setIsSigninIn(false); - return; - } - next(); - }); - }, - }); - }; - - return ( - - Configure your credentials -
- - - - - - - - -
-
- ); -}; - -const firstActions = [ - { - icon: IconBook2, - label: 'Read the documentation', - href: 'https://homarr.dev/docs/introduction/after-the-installation', - }, - { - icon: IconUserPlus, - label: 'Invite an user', - href: '/manage/users/invites', - }, - { - icon: IconLayoutDashboard, - label: 'Setup your board', - href: '/board', - }, - { - icon: IconUserCog, - label: 'Configure your profile', - href: '/user/preferences', - }, -]; - -const ThirdStepContent: StepContentComponent = ({ isMobile, next }) => { - const { breakpoints } = useMantineTheme(); - const { classes } = useStyles(); - - return ( - - Get started! 🚀 - - {firstActions.map((action) => ( - - - - - - - {action.label} - - - - - - - - ))} - - - ); -}; - -const useStyles = createStyles((theme) => ({ - button: { - '&:hover': { - backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1], - }, - }, -})); - export const getServerSideProps: GetServerSideProps = async (ctx) => { const userCount = await prisma.user.count(); if (userCount >= 1) {