✨ Add working sign-in / sign-out, add working registration with token

2023-07-29 10:05:05 +02:00
parent 326395730e
commit d8562e2990
19 changed files with 506 additions and 147 deletions
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -9,12 +9,15 @@ import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client
 import Consola from 'consola';
 import { getCookie } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
+import { Session } from 'next-auth';
+import { SessionProvider, getSession } from 'next-auth/react';
 import { appWithTranslation } from 'next-i18next';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useEffect, useState } from 'react';
 import 'video.js/dist/video-js.css';
 import { env } from '~/env.js';
+import { ConfigType } from '~/types/config';
 import { api } from '~/utils/api';

 import nextI18nextConfig from '../../next-i18next.config.js';
@@ -36,7 +39,6 @@ import {
  getServiceSidePackageAttributes,
 } from '../tools/server/getPackageVersion';
 import { theme } from '../tools/server/theme/theme';
-import { ConfigType } from '~/types/config';

 function App(
  this: any,
@@ -47,13 +49,20 @@ function App(
    defaultColorScheme: ColorScheme;
    config?: ConfigType;
    configName?: string;
+    session: Session;
  }>
 ) {
  const { Component, pageProps } = props;

-  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(props.pageProps.config?.settings.customization.colors.primary || 'red');
-  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>(props.pageProps.config?.settings.customization.colors.secondary || 'orange');
-  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(props.pageProps.config?.settings.customization.colors.shade || 6);
+  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(
+    props.pageProps.config?.settings.customization.colors.primary || 'red'
+  );
+  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>(
+    props.pageProps.config?.settings.customization.colors.secondary || 'orange'
+  );
+  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(
+    props.pageProps.config?.settings.customization.colors.shade || 6
+  );
  const colorTheme = {
    primaryColor,
    secondaryColor,
@@ -97,62 +106,64 @@ function App(
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      </Head>
-      <PersistQueryClientProvider
-        client={queryClient}
-        persistOptions={{ persister: asyncStoragePersister }}
-      >
-        <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-          <ColorTheme.Provider value={colorTheme}>
-            <MantineProvider
-              theme={{
-                ...theme,
-                components: {
-                  Checkbox: {
-                    styles: {
-                      input: { cursor: 'pointer' },
-                      label: { cursor: 'pointer' },
+      <SessionProvider session={pageProps.session}>
+        <PersistQueryClientProvider
+          client={queryClient}
+          persistOptions={{ persister: asyncStoragePersister }}
+        >
+          <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+            <ColorTheme.Provider value={colorTheme}>
+              <MantineProvider
+                theme={{
+                  ...theme,
+                  components: {
+                    Checkbox: {
+                      styles: {
+                        input: { cursor: 'pointer' },
+                        label: { cursor: 'pointer' },
+                      },
+                    },
+                    Switch: {
+                      styles: {
+                        input: { cursor: 'pointer' },
+                        label: { cursor: 'pointer' },
+                      },
                    },
                  },
-                  Switch: {
-                    styles: {
-                      input: { cursor: 'pointer' },
-                      label: { cursor: 'pointer' },
-                    },
-                  },
-                },
-                primaryColor,
-                primaryShade,
-                colorScheme,
-              }}
-              withGlobalStyles
-              withNormalizeCSS
-            >
-              <ConfigProvider {...props.pageProps}>
-                <Notifications limit={4} position="bottom-left" />
-                <ModalsProvider
-                  modals={{
-                    editApp: EditAppModal,
-                    selectElement: SelectElementModal,
-                    integrationOptions: WidgetsEditModal,
-                    integrationRemove: WidgetsRemoveModal,
-                    categoryEditModal: CategoryEditModal,
-                    changeAppPositionModal: ChangeAppPositionModal,
-                    changeIntegrationPositionModal: ChangeWidgetPositionModal,
-                  }}
-                >
-                  <Component {...pageProps} />
-                </ModalsProvider>
-              </ConfigProvider>
-            </MantineProvider>
-          </ColorTheme.Provider>
-        </ColorSchemeProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
-      </PersistQueryClientProvider>
+                  primaryColor,
+                  primaryShade,
+                  colorScheme,
+                }}
+                withGlobalStyles
+                withNormalizeCSS
+              >
+                <ConfigProvider {...props.pageProps}>
+                  <Notifications limit={4} position="bottom-left" />
+                  <ModalsProvider
+                    modals={{
+                      editApp: EditAppModal,
+                      selectElement: SelectElementModal,
+                      integrationOptions: WidgetsEditModal,
+                      integrationRemove: WidgetsRemoveModal,
+                      categoryEditModal: CategoryEditModal,
+                      changeAppPositionModal: ChangeAppPositionModal,
+                      changeIntegrationPositionModal: ChangeWidgetPositionModal,
+                    }}
+                  >
+                    <Component {...pageProps} />
+                  </ModalsProvider>
+                </ConfigProvider>
+              </MantineProvider>
+            </ColorTheme.Provider>
+          </ColorSchemeProvider>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </PersistQueryClientProvider>
+      </SessionProvider>
    </>
  );
 }

-App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => {
+App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
  if (process.env.DISABLE_EDIT_MODE === 'true') {
    Consola.warn(
      'EXPERIMENTAL: You have disabled the edit mode. Modifications are no longer possible and any requests on the API will be dropped. If you want to disable this, unset the DISABLE_EDIT_MODE environment variable. This behaviour may be removed in future versions of Homarr'
@@ -163,12 +174,15 @@ App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => {
    Consola.debug(`Overriding the default color scheme with ${env.DEFAULT_COLOR_SCHEME}`);
  }

+  const session = await getSession(ctx);
+
  return {
    pageProps: {
      colorScheme: getCookie('color-scheme', ctx) || 'light',
      packageAttributes: getServiceSidePackageAttributes(),
      editModeEnabled: process.env.DISABLE_EDIT_MODE !== 'true',
      defaultColorScheme: env.DEFAULT_COLOR_SCHEME,
+      session,
    },
  };
 };
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -24,7 +24,7 @@ import { signInSchema } from '~/validations/user';
 import { loginNamespaces } from '../tools/server/translation-namespaces';

 export default function LoginPage() {
-  const { t } = useTranslation('authentication/login');
+  const { t } = useTranslation(['authentication/login']);
  const queryParams = useRouter().query as { error?: 'CredentialsSignin' | (string & {}) };

  const form = useForm<z.infer<typeof signInSchema>>({
@@ -63,7 +63,6 @@ export default function LoginPage() {
            />

            <PasswordInput
-              id="password"
              variant="filled"
              label={t('form.fields.password.label')}
              withAsterisk
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -0,0 +1,140 @@
+import { Button, Card, Flex, PasswordInput, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useForm, zodResolver } from '@mantine/form';
+import { showNotification, updateNotification } from '@mantine/notifications';
+import { IconCheck, IconX } from '@tabler/icons-react';
+import { GetServerSideProps } from 'next';
+import { useTranslation } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useRouter } from 'next/router';
+import { z } from 'zod';
+import { prisma } from '~/server/db';
+import { api } from '~/utils/api';
+import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
+import { signUpFormSchema } from '~/validations/user';
+
+import { registerNamespaces } from '../tools/server/translation-namespaces';
+
+export default function LoginPage() {
+  const { t } = useTranslation('authentication/register');
+  const { i18nZodResolver } = useI18nZodResolver();
+  const router = useRouter();
+  const query = router.query as { token: string };
+  const { mutateAsync } = api.user.register.useMutation();
+
+  const form = useForm<z.infer<typeof signUpFormSchema>>({
+    validateInputOnChange: true,
+    validateInputOnBlur: true,
+    validate: i18nZodResolver(signUpFormSchema),
+  });
+
+  const handleSubmit = (values: z.infer<typeof signUpFormSchema>) => {
+    const notificationId = 'register';
+    showNotification({
+      id: notificationId,
+      title: 'Registering...',
+      message: 'Please wait...',
+      loading: true,
+    });
+    void mutateAsync(
+      {
+        ...values,
+        registerToken: query.token,
+      },
+      {
+        onSuccess() {
+          updateNotification({
+            id: notificationId,
+            title: 'Account created',
+            message: 'Your account has been created successfully',
+            color: 'teal',
+            icon: <IconCheck />,
+          });
+          router.push('/login');
+        },
+        onError() {
+          updateNotification({
+            id: notificationId,
+            title: 'Error',
+            message: 'Something went wrong',
+            color: 'red',
+            icon: <IconX />,
+          });
+        },
+      }
+    );
+  };
+
+  return (
+    <Flex h="100dvh" display="flex" w="100%" direction="column" align="center" justify="center">
+      <Card withBorder shadow="md" p="xl" radius="md" w="90%" maw={420}>
+        <Title align="center" weight={900}>
+          {t('title')}
+        </Title>
+
+        <Text color="dimmed" size="sm" align="center" mt={5} mb="md">
+          {t('text')}
+        </Text>
+
+        <form onSubmit={form.onSubmit(handleSubmit)}>
+          <Stack>
+            <TextInput
+              variant="filled"
+              label={t('form.fields.username.label')}
+              withAsterisk
+              {...form.getInputProps('username')}
+            />
+
+            <PasswordInput
+              variant="filled"
+              label={t('form.fields.password.label')}
+              withAsterisk
+              {...form.getInputProps('password')}
+            />
+
+            <PasswordInput
+              variant="filled"
+              label={t('form.fields.passwordConfirmation.label')}
+              withAsterisk
+              {...form.getInputProps('passwordConfirmation')}
+            />
+
+            <Button fullWidth type="submit">
+              {t('form.buttons.submit')}
+            </Button>
+          </Stack>
+        </form>
+      </Card>
+    </Flex>
+  );
+}
+
+const queryParamsSchema = z.object({
+  token: z.string(),
+});
+
+export const getServerSideProps: GetServerSideProps = async ({ locale, query }) => {
+  const result = queryParamsSchema.safeParse(query);
+  if (!result.success) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const token = await prisma.registrationToken.findUnique({
+    where: {
+      token: result.data.token,
+    },
+  });
+
+  if (!token || token.expires < new Date()) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      ...(await serverSideTranslations(locale ?? '', registerNamespaces)),
+    },
+  };
+};