PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Added register

Browse Source
This commit is contained in:
PxlLoewe
2025-01-27 01:45:03 +01:00
parent e30c28a66f
commit 239e9b8302
18 changed files with 602 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/hub/app/(auth)/login/_components/Login.tsx
View File

@@ -10,7 +10,9 @@ export const Login = () => {
password: z.string().min(6),
});
const form = useForm({
type schemaType = z.infer<typeof schema>;
const form = useForm<schemaType>({
resolver: zodResolver(schema),
});
console.log(form.formState.errors);

16
apps/hub/app/(auth)/logout/page.tsx Normal file
View File

@@ -0,0 +1,16 @@
'use client';
import { signOut } from 'next-auth/react';
import { useEffect } from 'react';
export default () => {
useEffect(() => {
signOut({
callbackUrl: '/login',
});
}, []);
return (
<div>
<h1 className="text-5xl">logging out...</h1>
</div>
);
};

211
apps/hub/app/(auth)/register/_components/Register.tsx Normal file
View File

@@ -0,0 +1,211 @@
'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { register } from '../action';
import { signIn } from 'next-auth/react';
import Link from 'next/link';
import { useState } from 'react';
import clsx, { ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export const Register = () => {
const schema = z
.object({
email: z.string().email({
message: 'Please enter a valid email',
}),
firstname: z.string().min(2).max(30),
lastname: z.string().min(2).max(30),
password: z.string().min(6),
passwordConfirm: z.string().min(6),
})
.superRefine(({ password, passwordConfirm }, ctx) => {
if (password !== passwordConfirm) {
ctx.addIssue({
code: 'custom',
message: 'Die Passwörter stimmen nicht überein',
path: ['confirmPassword'],
});
}
});
type IFormInput = z.infer<typeof schema>;
const [isLoading, setIsLoading] = useState(false);
const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs));
};
const form = useForm<IFormInput>({
resolver: zodResolver(schema),
defaultValues: {
email: '',
password: '',
passwordConfirm: '',
},
});
console.log(form.formState.errors);
return (
<form
className="card-body"
onSubmit={form.handleSubmit(async () => {
setIsLoading(true);
const values = form.getValues();
const user = await register({
email: form.getValues('email'),
password: form.getValues('password'),
firstname: form.getValues('firstname'),
lastname: form.getValues('lastname'),
});
await signIn('credentials', {
redirect: false,
email: user.email,
password: values.password,
});
setIsLoading(false);
})}
>
<h1 className="text-3xl font-bold">Registrierung</h1>
<span className="text-sm font-medium">
Zurück zum{' '}
<Link href="/login" className="link link-accent link-hover">
Login
</Link>
</span>
<div className="mt-5 mb-2">
<label className="input input-bordered flex items-center gap-2 mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
className="h-4 w-4 opacity-70"
>
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
</svg>
<input
type="text"
className="grow"
{...form.register('firstname')}
placeholder="Vorname"
/>
</label>
<p className="text-error">
{typeof form.formState.errors.firstname?.message === 'string'
? form.formState.errors.firstname.message
: ''}
</p>
<label className="input input-bordered flex items-center gap-2 mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
className="h-4 w-4 opacity-70"
>
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
</svg>
<input
type="text"
className="grow"
{...form.register('lastname')}
placeholder="Nachname"
/>
</label>
<p className="text-error">
{typeof form.formState.errors.lastname?.message === 'string'
? form.formState.errors.lastname.message
: ''}
</p>
<div className="divider divider-neutral">Account</div>
<label className="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
className="h-4 w-4 opacity-70"
>
<path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
<path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
</svg>
<input
type="text"
className="grow"
{...form.register('email')}
placeholder="Email"
/>
</label>
<p className="text-error">
{typeof form.formState.errors.email?.message === 'string'
? form.formState.errors.email.message
: ''}
</p>
<label className="input input-bordered flex items-center gap-2 mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
className="h-4 w-4 opacity-70"
>
<path
fillRule="evenodd"
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
clipRule="evenodd"
/>
</svg>
<input
type="password"
autoComplete="new-password"
{...form.register('password')}
placeholder="Passwort"
className="grow"
/>
</label>
<p className="text-error">
{typeof form.formState.errors.password?.message === 'string'
? form.formState.errors.password.message
: ''}
</p>
<label className="input input-bordered flex items-center gap-2 mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
className="h-4 w-4 opacity-70"
>
<path
fillRule="evenodd"
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
clipRule="evenodd"
/>
</svg>
<input
type="password"
autoComplete="new-password"
{...form.register('passwordConfirm')}
placeholder="Passwort bestätigen"
className="grow"
/>
</label>
<p className="text-error">
{typeof form.formState.errors.passwordConfirm?.message === 'string'
? form.formState.errors.passwordConfirm.message
: ''}
</p>
<div className="form-control mt-6">
<button
className="btn btn-primary"
name="registerBtn"
disabled={isLoading}
>
{isLoading && (
<span className="loading loading-spinner loading-sm"></span>
)}
Registrieren{isLoading && '...'}
</button>
</div>
</div>
</form>
);
};

17
apps/hub/app/(auth)/register/action.ts Normal file
View File

@@ -0,0 +1,17 @@
'use server';
import { prisma, Prisma } from '@repo/db';
import bcrypt from 'bcryptjs';
export const register = async ({
password,
...user
}: Prisma.UserCreateInput) => {
const hashedPassword = await bcrypt.hash(password, 15);
const newUser = prisma.user.create({
data: {
...user,
password: hashedPassword,
},
});
return newUser;
};

24
apps/hub/app/(auth)/register/page.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { Register } from './_components/Register';
export default () => {
return (
<>
<div
className="hero min-h-screen"
style={{
backgroundImage:
'url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)',
}}
>
<div className="hero-overlay bg-opacity-60"></div>
<div className="hero-content text-neutral-content text-center ">
<div className="max-w-lg">
<div className="card bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
<Register />
</div>
</div>
</div>
</div>
</>
);
};

24
apps/hub/app/_components/ui/FormTextInput.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from 'react';
interface FormTextInputProps extends InputHTMLAttributes<HTMLInputElement> {
error: any;
Svg: ReactNode;
children?: ReactNode;
}
export const FormTextInput = ({
error,
Svg,
children,
...props
}: FormTextInputProps) => {
return (
<>
<label className="input input-bordered flex items-center gap-2">
{children}
<input {...props} />
</label>
<p className="text-error">{error}</p>
</>
);
};

27
apps/hub/app/api/auth/[...nextauth]/auth.ts
View File

@@ -1,10 +1,11 @@
import NextAuth, { AuthOptions } from 'next-auth';
import { AuthOptions } from 'next-auth';
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import Credentials from 'next-auth/providers/credentials';
import { prisma } from '@repo/db';
import { PrismaClient } from '@prisma/client';
import bcrypt from 'bcryptjs';
const prisma = new PrismaClient();
export const options = {
export const options: AuthOptions = {
providers: [
Credentials({
credentials: {
@@ -18,6 +19,7 @@ export const options = {
where: { email: credentials.email },
});
if (bcrypt.compareSync(credentials.password, user.password)) {
console.log('User found and password correct', user);
return user;
}
return null;
@@ -32,6 +34,7 @@ export const options = {
strategy: 'jwt',
maxAge: 30 * 24 * 60 * 60,
},
adapter: PrismaAdapter(prisma),
events: {
async signIn(message) {
@@ -44,6 +47,24 @@ export const options = {
console.log('User created!', { message });
},
},
callbacks: {
jwt: async ({ token, user }) => {
if (user) {
token.uid = user;
}
return token;
},
session: async ({ session, token }: any) => {
// here we put session.useData and put inside it whatever you want to be in the session
// here try to console.log(token) and see what it will have
// sometimes the user get stored in token.uid.userData
// sometimes the user data get stored in just token.uid
session.userData = token.uid.userData;
return session;
},
},
pages: {
signIn: '/login',
signOut: '/logout',

8
apps/hub/app/page.tsx
View File

@@ -1,13 +1,19 @@
'use client';
import { useSession } from 'next-auth/react';
import { useEffect } from 'react';
export default function Home() {
const { data: session, status } = useSession();
const { data: session, status, update } = useSession();
console.log(session, status);
useEffect(() => {
update();
}, []);
return (
<div>
<h1 className="text-5xl">Hub</h1>
{!session && <h2 className="text-error text-xl">Not signed in</h2>}
{session?.user?.firstname && <h1>Hi, {session?.user?.firstname}</h1>}
</div>
);
}

5
apps/hub/package.json
View File

@@ -13,11 +13,15 @@
"@next-auth/prisma-adapter": "^1.0.7",
"@repo/ui": "*",
"bcryptjs": "^2.4.3",
"clsx": "^2.1.1",
"lodash": "^4.17.21",
"lucide-react": "^0.474.0",
"next": "15.1.4",
"next-auth": "^4.24.11",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"tailwind-merge": "^2.6.0",
"zod": "^3.24.1"
},
"devDependencies": {
@@ -26,6 +30,7 @@
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"daisyui": "^4.12.23",
"eslint": "^9",
"eslint-config-next": "15.1.4",
"postcss": "^8",

14
apps/hub/tailwind.config.ts
View File

@@ -1,18 +1,18 @@
import type { Config } from "tailwindcss";
import type { Config } from 'tailwindcss';
export default {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
background: 'var(--background)',
foreground: 'var(--foreground)',
},
},
},
plugins: [],
plugins: [require('daisyui')],
} satisfies Config;

20
apps/hub/types/next-auth.d.ts vendored Normal file
View File

@@ -0,0 +1,20 @@
import NextAuth from 'next-auth';
import { User } from '@repo/db';
declare module 'next-auth' {
/**
* Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
*/
interface Session {
user: User;
}
type User = User;
}
declare module 'next-auth/jwt' {
interface JWT {
firstname: string;
lastname: string;
email: string;
}
}