added oauth Route

This commit is contained in:
PxlLoewe
2025-02-02 19:42:42 +01:00
parent 29f9cd7941
commit edcad748fb
23 changed files with 799 additions and 161 deletions

View File

@@ -7,13 +7,12 @@ import { useForm } from 'react-hook-form';
import { Toaster, toast } from 'react-hot-toast';
import { z } from 'zod';
export const Login = () => {
const [isLoading, setIsLoading] = useState(false);
const schema = z.object({
email: z.string().email(),
password: z.string().min(6),
password: z.string(),
});
type schemaType = z.infer<typeof schema>;
@@ -28,29 +27,25 @@ export const Login = () => {
onSubmit={form.handleSubmit(async () => {
setIsLoading(true);
const data = await signIn('credentials', {
redirect: false,
callbackUrl: '/',
email: form.getValues('email'),
password: form.getValues('password'),
});
if (!data || data.error) {
toast.error("E-Mail / Passwort ist falsch!",
{
style: {
background: 'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))',
color: 'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))'
}
}
)
toast.error('E-Mail / Passwort ist falsch!', {
style: {
background:
'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))',
color:
'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
},
});
}
console.log(data);
setIsLoading(false);
})}
>
<div>
<Toaster
position="top-center"
reverseOrder={false}
/>
<Toaster position="top-center" reverseOrder={false} />
</div>
<h1 className="text-3xl font-bold">Login</h1>
<span className="text-sm font-medium">
@@ -60,55 +55,60 @@ export const Login = () => {
</Link>
</span>
<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"
/>
<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"
<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"
/>
</label>
</svg>
<input
autoComplete="current-password"
type="password"
{...form.register('password')}
placeholder="Passwort"
className="grow"
/>
</label>
<div className="form-control mt-6">
<button
className="btn btn-primary"
name="loginBtn"
disabled={isLoading}
>
{isLoading && (
<span className="loading loading-spinner loading-sm"></span>
)}
Login{isLoading && '...'}
</button>
</div>
<button
className="btn btn-primary"
name="loginBtn"
disabled={isLoading}
>
{isLoading && (
<span className="loading loading-spinner loading-sm"></span>
)}
Login{isLoading && '...'}
</button>
</div>
</form>
);
};