mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
Authentication with Credentials is working and setup, same for OAuth with Google.
This commit is contained in:
charles-gauthereau
@@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import {Card, CardContent, CardHeader} from "@/components/ui/card";
|
||||
import {
|
||||
FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm
|
||||
} from "@/components/ui/form";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Form} from "@/components/ui/form"
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {toast} from "sonner";
|
||||
import {useMutation} from "@tanstack/react-query";
|
||||
import {TooltipProvider} from "@/components/ui/tooltip";
|
||||
import Link from "next/link";
|
||||
import {PasswordInput} from "@/components/wrappers/PaswordInput/password-input";
|
||||
import {LoginSchema, LoginType} from "@/components/wrappers/Auth/Login/LoginForm/login-form-schema";
|
||||
import {signInAction} from "@/features/auth/auth.action";
|
||||
import {SocialAuthButton} from "@/components/wrappers/Auth/Login/SocialAuth/SocialAuthButtons/SocialAuthButton";
|
||||
|
||||
export type loginFormProps = {
|
||||
defaultValues?: LoginType;
|
||||
}
|
||||
|
||||
export const LoginForm = (props: loginFormProps) => {
|
||||
const form = useZodForm({
|
||||
schema: LoginSchema,
|
||||
});
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (values: LoginType) => {
|
||||
const result = await signInAction("credentials", values)
|
||||
if(result?.error){
|
||||
toast.error(result.error)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="grid gap-2 text-center mb-2">
|
||||
<h1 className="text-3xl font-bold">Login</h1>
|
||||
<p className="text-balance text-muted-foreground">
|
||||
Enter your informations bellow to login
|
||||
</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form form={form}
|
||||
className="flex flex-col gap-4"
|
||||
onSubmit={async (values) => {
|
||||
await mutation.mutateAsync(values);
|
||||
}}
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="exemple@portabase.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
|
||||
<div className="flex items-center">
|
||||
<FormLabel>Password</FormLabel>
|
||||
<Link
|
||||
href="/forgot-password"
|
||||
className="ml-auto inline-block text-sm underline"
|
||||
>
|
||||
Forgot your password?
|
||||
</Link>
|
||||
</div>
|
||||
<FormControl>
|
||||
<PasswordInput placeholder="Your password" {...field}/>
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button>
|
||||
Sign in
|
||||
</Button>
|
||||
<div className="mt-4 text-center text-sm">
|
||||
Don't have an account?{" "}
|
||||
<Link href="/register" className="underline">
|
||||
Sign up
|
||||
</Link>
|
||||
</div>
|
||||
</Form>
|
||||
<SocialAuthButton/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import {z} from "zod";
|
||||
|
||||
|
||||
export const LoginSchema = z.object({
|
||||
email: z.string(),
|
||||
password: z.string(),
|
||||
});
|
||||
|
||||
export type LoginType = z.infer<typeof LoginSchema>;
|
||||
@@ -0,0 +1,22 @@
|
||||
"use client"
|
||||
import {signInAction} from "@/features/auth/auth.action";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import Image from "next/image";
|
||||
|
||||
export type SocialAuthButtonProps = {}
|
||||
|
||||
export const SocialAuthButton = (props: SocialAuthButtonProps) => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4 mt-5">
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
void signInAction("google")
|
||||
}}
|
||||
>
|
||||
<Image src="/google-icon.png" alt="Google OAuth" width={25} height={25}/>
|
||||
Sign in with google
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
|
||||
import {Card, CardContent, CardHeader} from "@/components/ui/card";
|
||||
import {
|
||||
FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useZodForm
|
||||
FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm
|
||||
} from "@/components/ui/form";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Form} from "@/components/ui/form"
|
||||
@@ -13,8 +13,6 @@ import {useMutation} from "@tanstack/react-query";
|
||||
import {TooltipProvider, TooltipTrigger, Tooltip, TooltipContent} from "@/components/ui/tooltip";
|
||||
import {RegisterSchema, RegisterType} from "@/components/wrappers/Auth/Register/RegisterForm/register-form.schema";
|
||||
import {registerUserAction} from "@/components/wrappers/Auth/Register/RegisterForm/register-form.action";
|
||||
import {Label} from "@/components/ui/label";
|
||||
import Link from "next/link";
|
||||
import {Info} from "lucide-react";
|
||||
import {PasswordInput} from "@/components/wrappers/PaswordInput/password-input";
|
||||
|
||||
@@ -27,9 +25,7 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
const form = useZodForm({
|
||||
schema: RegisterSchema,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (values: RegisterType) => {
|
||||
console.log(values)
|
||||
@@ -48,10 +44,8 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
||||
<div className="grid gap-2 text-center mb-2">
|
||||
<h1 className="text-3xl font-bold">Create an account</h1>
|
||||
<p className="text-balance text-muted-foreground">
|
||||
@@ -66,7 +60,6 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
await mutation.mutateAsync(values);
|
||||
}}
|
||||
>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
@@ -77,7 +70,6 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
<Input
|
||||
placeholder="Your name" {...field} />
|
||||
</FormControl>
|
||||
{/*<FormDescription>{t('tabs.general.data.name.description')}</FormDescription>*/}
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
@@ -92,7 +84,6 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
<Input
|
||||
placeholder="exemple@portabase.com" {...field} />
|
||||
</FormControl>
|
||||
{/*<FormDescription>{t('tabs.general.data.name.description')}</FormDescription>*/}
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
@@ -102,7 +93,6 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
name="password"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
|
||||
<FormLabel className="flex">Password
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
@@ -115,18 +105,6 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</FormLabel>
|
||||
|
||||
{/*<div className="flex items-center">*/}
|
||||
{/* <FormLabel>Password</FormLabel>*/}
|
||||
{/* <Link*/}
|
||||
{/* href="/forgot-password"*/}
|
||||
{/* className="ml-auto inline-block text-sm underline"*/}
|
||||
{/* >*/}
|
||||
{/* Forgot your password?*/}
|
||||
{/* </Link>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
|
||||
<FormControl>
|
||||
<PasswordInput placeholder="Your password" {...field}/>
|
||||
</FormControl>
|
||||
@@ -139,25 +117,11 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
name="confirmPassword"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
|
||||
<FormLabel>Password Confirmation</FormLabel>
|
||||
|
||||
{/*<div className="flex items-center">*/}
|
||||
{/* <FormLabel>Password</FormLabel>*/}
|
||||
{/* <Link*/}
|
||||
{/* href="/forgot-password"*/}
|
||||
{/* className="ml-auto inline-block text-sm underline"*/}
|
||||
{/* >*/}
|
||||
{/* Forgot your password?*/}
|
||||
{/* </Link>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
|
||||
<FormControl>
|
||||
<PasswordInput
|
||||
placeholder="Conform your password" {...field} />
|
||||
</FormControl>
|
||||
{/*<FormDescription>{t('tabs.general.data.name.description')}</FormDescription>*/}
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
@@ -165,14 +129,7 @@ export const RegisterForm = (props: registerFormProps) => {
|
||||
<Button>
|
||||
Sign up
|
||||
</Button>
|
||||
{/*<div className="mt-4 text-center text-sm">*/}
|
||||
{/* Don't have an account?{" "}*/}
|
||||
{/* /!*<Link to="#" className="underline">*!/*/}
|
||||
{/* /!* Sign up*!/*/}
|
||||
{/* /!*</Link>*!/*/}
|
||||
{/*</div>*/}
|
||||
</Form>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TooltipProvider>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import {z} from "zod";
|
||||
|
||||
|
||||
// Minimum 8 characters, at least one uppercase letter, one lowercase letter, one number and one special character
|
||||
const passwordValidation = new RegExp(
|
||||
/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
|
||||
import * as React from 'react'
|
||||
import { EyeIcon, EyeOffIcon } from 'lucide-react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input, type InputProps } from '@/components/ui/input'
|
||||
import { cn } from '@/lib/utils'
|
||||
@@ -34,8 +33,6 @@ const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(({ classNam
|
||||
)}
|
||||
<span className="sr-only">{showPassword ? 'Hide password' : 'Show password'}</span>
|
||||
</Button>
|
||||
|
||||
{/* hides browsers password toggles */}
|
||||
<style>{`
|
||||
.hide-password-toggle::-ms-reveal,
|
||||
.hide-password-toggle::-ms-clear {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
|
||||
@@ -9,9 +11,8 @@ import {
|
||||
} from "@/components/ui/sidebar"
|
||||
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
|
||||
import {Calendar, ChevronDown, ChevronUp, Home, Inbox, Search, Settings, User2} from "lucide-react";
|
||||
import {Separator} from "@radix-ui/react-menu";
|
||||
import {Breadcrumb} from "@/components/ui/breadcrumb";
|
||||
import Link from "next/link";
|
||||
import {signOutAction} from "@/features/auth/auth.action";
|
||||
|
||||
export function AppSidebar() {
|
||||
|
||||
@@ -46,10 +47,6 @@ export function AppSidebar() {
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Sidebar collapsible="icon">
|
||||
<SidebarHeader>
|
||||
@@ -113,7 +110,9 @@ export function AppSidebar() {
|
||||
<DropdownMenuItem>
|
||||
<span>Billing</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => {
|
||||
signOutAction()
|
||||
}}>
|
||||
<span>Sign out</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
|
||||
Reference in New Issue
Block a user