Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(app): 82 change headlines #90

Merged
merged 1 commit into from
Feb 6, 2024
Merged

refactor(app): 82 change headlines #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 49 additions & 48 deletions src/app/(site)/(guest)/auth/log-in/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
'use client';
"use client";

import { useRouter } from 'next/navigation';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { SubmitHandler, useForm } from 'react-hook-form';
import Link from 'next/link';
import { PrimaryButton } from '@/components/ui/buttons/primary';
import { Input } from '@/components/ui/input';
import { Logo } from '@/components/ui/logo';
import { AuthFormAreas } from '../auth-form.models';
import { validateEmail } from '@/utils/validations/gmail';
import { useState } from 'react';
import { Alert } from '@/components/ui/alert';
import { useProtectRouteFromAuthUsers } from '@/utils/auth/client-side-validations';
import { useRouter } from "next/navigation";
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import { SubmitHandler, useForm } from "react-hook-form";
import Link from "next/link";
import { PrimaryButton } from "@/components/ui/buttons/primary";
import { Input } from "@/components/ui/input";
import { Logo } from "@/components/ui/logo";
import { AuthFormAreas } from "../auth-form.models";
import { validateEmail } from "@/utils/validations/gmail";
import { useState } from "react";
import { Alert } from "@/components/ui/alert";
import { useProtectRouteFromAuthUsers } from "@/utils/auth/client-side-validations";

export default function LogInPage() {
const [errorLogginIn, setErrorLogginIn] = useState<boolean>(false);
Expand All @@ -26,7 +26,7 @@ export default function LogInPage() {
register,
handleSubmit,
formState: { errors },
} = useForm<AuthFormAreas>({ mode: 'onTouched' });
} = useForm<AuthFormAreas>({ mode: "onTouched" });

const handleLogIn: SubmitHandler<AuthFormAreas> = async (data) => {
try {
Expand All @@ -49,90 +49,91 @@ export default function LogInPage() {
};

return (
<section className='flex flex-col gap-6 max-w-[530px]'>
<article className='flex flex-col gap-2'>
<div className='mb-2'>
<section className="flex flex-col gap-6 max-w-[530px]">
<article className="flex flex-col gap-2">
<div className="mb-2">
<Logo />
</div>
<h1 className='text-neutral-900 dark:text-neutral-50 text-3xl font-medium'>
<h1 className="text-neutral-900 dark:text-neutral-50 text-3xl font-medium">
Log In
</h1>
<p className='text-neutral-600 dark:text-neutral-400'>
Get acces to a pixel art feed, create your profile and interact!
<p className="text-neutral-600 dark:text-neutral-400">
build your colection of your favourite images, create your profile and
discover new images.
</p>
</article>
<form
className='flex flex-col gap-2'
className="flex flex-col gap-2"
onSubmit={handleSubmit(handleLogIn)}
>
<Input
type='text'
id='email'
label='Email'
placeholder='[email protected]'
type="text"
id="email"
label="Email"
placeholder="[email protected]"
register={register}
error={errors.email}
validationScheme={{
required: { value: true, message: 'email is required' },
required: { value: true, message: "email is required" },
validate: (value: string) => {
const isEmailCorrectFormat = validateEmail(value);

if (!isEmailCorrectFormat) return 'Invalid email format';
if (!isEmailCorrectFormat) return "Invalid email format";
else return true;
},
}}
/>
<Input
type='password'
id='password'
label='Password'
placeholder='*********'
type="password"
id="password"
label="Password"
placeholder="*********"
register={register}
error={errors.password}
validationScheme={{
required: { value: true, message: 'password is required' },
required: { value: true, message: "password is required" },
minLength: {
value: 8,
message: 'password must be at least 8 characters',
message: "password must be at least 8 characters",
},
}}
/>
<PrimaryButton
isDisabled={isLoading || errors.root?.message ? true : false}
isLoading={isLoading}
style={{ marginTop: '0.5rem' }}
style={{ marginTop: "0.5rem" }}
>
Log In
</PrimaryButton>
<div className='flex flex-col gap-2 mt-2'>
<span className='text-neutral-600 dark:text-neutral-400 text-center'>
Dont have an account yet?{' '}
<div className="flex flex-col gap-2 mt-2">
<span className="text-neutral-600 dark:text-neutral-400 text-center">
Dont have an account yet?{" "}
<Link
href='/auth/sign-up'
className='text-blue-500 dark:text-blue-400 font-bold hover:underline'
href="/auth/sign-up"
className="text-blue-500 dark:text-blue-400 font-bold hover:underline"
>
Sing Up
</Link>
</span>
<span className='flex md:flex-row flex-col items-center justify-center gap-1 text-neutral-600 dark:text-neutral-400 text-center'>
Forgot your password?{' '}
<span className="flex md:flex-row flex-col items-center justify-center gap-1 text-neutral-600 dark:text-neutral-400 text-center">
Forgot your password?{" "}
<Link
href='/auth/recuperate-password'
className='text-blue-500 dark:text-blue-400 font-bold hover:underline'
href="/auth/recuperate-password"
className="text-blue-500 dark:text-blue-400 font-bold hover:underline"
>
Recuperate Password
</Link>
</span>
</div>
{errorLogginIn && (
<Alert
type='error'
title='Error'
description='There has been an error trying to log in'
type="error"
title="Error"
description="There has been an error trying to log in"
onClose={() => setErrorLogginIn(false)}
>
<div className='flex flex-col text-neutral-900 dark:text-neutral-50'>
<span className='dark:text-red-500 text-red-600'>
<div className="flex flex-col text-neutral-900 dark:text-neutral-50">
<span className="dark:text-red-500 text-red-600">
For security reasons, we can not know why the attemp failed.
</span>
<span>Make sure that:</span>
Expand Down
3 changes: 2 additions & 1 deletion src/app/(site)/(guest)/auth/sign-up/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@ export default function SingUpPage() {
Sing Up
</h1>
<p className="text-neutral-600 dark:text-neutral-400">
Get acces to a pixel art feed, create your profile and interact!
build your colection of your favourite images, create your profile and
discover new images.
</p>
</article>
<form
Expand Down
Loading