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

fix-#427: Login Page. #434

Closed
wants to merge 1 commit into from
Closed

fix-#427: Login Page. #434

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
62 changes: 36 additions & 26 deletions frontend/src/pages/signup-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { Link, useNavigate } from 'react-router-dom';
// import AddGoogleIcon from '@/assets/svg/google-color-icon.svg';
// import AddGithubIcon from '@/assets/svg/github-icon.svg';
import { useForm } from 'react-hook-form';
import type { FieldValues } from 'react-hook-form';
import { TSignUpSchema, signUpSchema } from '@/lib/types';
Expand All @@ -11,7 +9,11 @@ import { AxiosError, isAxiosError } from 'axios';
import axiosInstance from '@/helpers/axios-instance';
import userState from '@/utils/user-state';
import ThemeToggle from '@/components/theme-toggle-button';
function signup() {
import { useState } from 'react';
import EyeIcon from '@/assets/svg/eye.svg';
import EyeOffIcon from '@/assets/svg/eye-off.svg';

function Signup() {
const navigate = useNavigate();
const {
register,
Expand All @@ -21,6 +23,7 @@ function signup() {
setError,
} = useForm<TSignUpSchema>({ resolver: zodResolver(signUpSchema) });

const [passwordVisible, setPasswordVisible] = useState(false);
const onSubmit = async (data: FieldValues) => {
try {
const res = axiosInstance.post('/api/auth/email-password/signup', data);
Expand Down Expand Up @@ -106,24 +109,49 @@ function signup() {
<p className="p-3 text-xs text-red-500">{`${errors.email.message}`}</p>
)}
</div>
<div className="mb-2">

{/*password*/}
<div className="relative mb-2">
<input
{...register('password')}
type="password"
type={passwordVisible ? 'text' : 'password'}
placeholder="Password"
className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
/>
<button
type="button"
onClick={() => setPasswordVisible(!passwordVisible)}
className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm leading-5"
>
<img
src={passwordVisible ? EyeOffIcon : EyeIcon}
alt="Toggle Password Visibility"
className="h-5 w-5"
/>
</button>
{errors.password && (
<p className="p-3 text-xs text-red-500">{`${errors.password.message}`}</p>
)}
</div>
<div className="mb-4">

<div className="relative mb-4">
<input
{...register('confirmPassword')}
type="password"
type={passwordVisible ? 'text' : 'password'}
placeholder="Confirm Password"
className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
/>
<button
type="button"
onClick={() => setPasswordVisible(!passwordVisible)}
className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm leading-5"
>
<img
src={passwordVisible ? EyeOffIcon : EyeIcon}
alt="Toggle Confirm Password Visibility"
className="h-5 w-5"
/>
</button>
{errors.confirmPassword && (
<p className="p-3 text-xs text-red-500">{`${errors.confirmPassword.message}`}</p>
)}
Expand All @@ -144,28 +172,10 @@ function signup() {
Log in now
</Link>
</p>

{/* <span>OR</span> */}
</div>

{/* <Link
to={'/google-auth'}
className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 dark:border-gray-700 dark:text-dark-primary dark:hover:bg-gray-700 md:w-3/4 lg:w-2/5"
>
<img className="h-4 w-6 pl-1 sm:h-5 sm:w-10" src={AddGoogleIcon} />
<span className="text-sm sm:text-base">Continue with Google</span>
</Link>

<Link
to={'/github-auth'}
className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 dark:border-gray-700 dark:text-dark-primary dark:hover:bg-gray-700 md:w-3/4 lg:w-2/5"
>
<img className="h-4 w-6 sm:h-5 sm:w-10" src={AddGithubIcon} />
<span className="text-sm sm:text-base">Continue with Github</span>
</Link> */}
</div>
</div>
);
}

export default signup;
export default Signup;
Loading