Skip to content

Commit

Permalink
[Feature][Ted] added signup functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@caspted
caspted committed Dec 28, 2023
1 parent 5772f93 commit 580ee54
Show file tree
Hide file tree
Showing 6 changed files with 937 additions and 157 deletions.
8 changes: 8 additions & 0 deletions client/pages/landing.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from "react";
import Image from 'next/image'

export default function Landing() {
return (
<main></main>
)
}
91 changes: 47 additions & 44 deletions client/pages/login.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,59 @@
import React from 'react';
import Image from 'next/image';

function Login() {
return (
<div className="w-full bg-[#07063d] flex items-center justify-center min-h-screen">
<div className="w-full lg:w-1/2 p-8 ">
<div className="justify-center flex items-center">
<Image
className="justify-center"
src={require('../public/gdsc_logo.png')}
alt="GDSC Logo"
width={150}
height={150}
/>
</div>
<div className="text-white flex items-center justify-center mb-6 text-xs">
GDSC-CPU
</div>
<div className="w-full">
<div className="mb-2 ">
<input
className="text-black w-full rounded-sm p-2 text-xs"
type="email"
placeholder="Email"
<form action="/landing-page" method="get">
<div className="w-full bg-[#07063d] flex items-center justify-center min-h-screen">
<div className="w-full lg:w-1/2 p-8 ">
<div className="justify-center flex items-center">
<Image
className="justify-center"
src={require('../public/gdsc_logo.png')}
alt="GDSC Logo"
width={150}
height={150}
/>
</div>
<div className="mb-2">
<input
className="text-black w-full rounded-sm p-2 text-xs"
type="password"
placeholder="Password"
/>
<div className="text-white flex items-center justify-center mb-6 text-xs">
GDSC-CPU
</div>
<div className="w-full">
<div className="mb-2 ">
<input
className="text-black w-full rounded-sm p-2 text-xs"
type="email"
placeholder="Email"
/>
</div>
<div className="mb-2">
<input
className="text-black w-full rounded-sm p-2 text-xs"
type="password"
placeholder="Password"
/>
</div>
</div>
<div>
<button className="h-8 w-full max-lg:z-20 bg-blue-500 hover:bg-blue-600 rounded-sm">
<text className="text-white justify-center flex items-center text-xs">
Log In
</text>
</button>
</div>
<div className="text-white mb-7 ">
<text className="text-xs">Forgot password?</text>
</div>
<div>
<button className="h-8 w-full max-lg:z-20 border-2 border-gray-400 hover:border-gray-200 rounded-sm">
<text className="text-white justify-center flex items-center text-xs">
No account yet? Sign Up
</text>
</button>
</div>
</div>
<div>
<button className="h-8 w-full max-lg:z-20 bg-blue-500 hover:bg-blue-600 rounded-sm">
<text className="text-white justify-center flex items-center text-xs">
Log In
</text>
</button>
</div>
<div className="text-white mb-7 ">
<text className="text-xs">Forgot password?</text>
</div>
<div>
<button className="h-8 w-full max-lg:z-20 border-2 border-gray-400 hover:border-gray-200 rounded-sm">
<text className="text-white justify-center flex items-center text-xs">
No account yet? Sign Up
</text>
</button>
</div>
</div>
</div>
</form>
);
}

Expand Down
215 changes: 139 additions & 76 deletions client/pages/signup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,166 @@
import React from 'react';
import React, { useState, FormEvent, ChangeEvent } from 'react';
import Image from 'next/image';

interface FormData {
fname: string;
lname: string;
email: string;
password: string;
}

function SignUp() {
const [formData, setFormData] = useState<FormData>({
fname: '',
lname: '',
email: '',
password: '',
});

const handleSubmit = async (e: FormEvent) => {
e.preventDefault();

try {
const response = await fetch('http://localhost:3001/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
// Update the structure of the form data sent to the server
fname: formData.fname,
lname: formData.lname,
email: formData.email,
password: formData.password,
}),
});

const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error during signup:', error);
}
};

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};

return (
<div className="w-full bg-[#07063D] flex flex-col items-center justify-center min-h-screen">
<div className="top-5 left-1/2">
<Image
className="justify-center"
src="/gdsc_logo.png"
alt="GDSC Logo"
width={150}
height={150}
/>
<div className="text-white absolute left-1/2 transform -translate-x-1/2 -translate-y-5 z-10 ">
<div className="text-xs">GDSC-CPU</div>
<form action="/landing-page" method="post" onSubmit={handleSubmit}>
<div className="w-full bg-[#07063D] flex flex-col items-center justify-center min-h-screen">
<div className="top-5 left-1/2">
<Image
className="justify-center"
src="/gdsc_logo.png"
alt="GDSC Logo"
width={150}
height={150}
/>
<div className="text-white absolute left-1/2 transform -translate-x-1/2 -translate-y-5 z-10 ">
<p className="text-xs">GDSC-CPU</p>
</div>
</div>
</div>
<div
className="p-6 bg-cover top-10 relative "
style={{
backgroundImage: 'url(blur-bg.png)',
width: '80%',
maxWidth: '400px',
borderRadius: '50px',
}}
>
<div className="absolute w-full h-full opacity-50 rounded-lg"></div>
<div
className="p-6 bg-cover top-10 relative "
style={{
backgroundImage: 'url(blur-bg.png)',
width: '80%',
maxWidth: '400px',
borderRadius: '50px',
}}
>
<div className="absolute w-full h-full opacity-50 rounded-lg"></div>

<div className="text-white ">
<p className="text-lg font-bold">CREATE ACCOUNT</p>
</div>
<div className="w-full pt-6 relative z-10">
<div className="mb-2 flex items-center justify-center">
<div className="w-1/2 pr-1">
<label className="text-gray-300 text-xs pl-2" htmlFor="firstName">
First Name
<div className="text-white text-center">
<label className="text-lg font-bold">CREATE ACCOUNT</label>
</div>
<div className="w-full pt-6 relative z-10">
<div className="mb-2 flex items-center justify-center">
<div className="w-1/2 pr-1">
<label
className="text-gray-300 text-xs pl-2"
htmlFor="firstName"
>
First Name
</label>
<input
style={{ background: 'transparent' }}
className="w-full p-2 text-xs border rounded-lg"
type="text"
id="firstName"
name="fname"
value={formData.fname}
onChange={handleChange}
/>
</div>
<div className="w-1/2 pl-1">
<label
className="text-gray-300 text-xs pl-2"
htmlFor="lastName"
>
Last Name
</label>
<input
style={{ background: 'transparent' }}
className="w-full p-2 text-xs border rounded-lg"
type="text"
id="lastName"
name="lname"
value={formData.lname}
onChange={handleChange}
/>
</div>
</div>
<div className="mb-2">
<label className="text-gray-300 text-xs pl-2" htmlFor="email">
Email
</label>
<input
style={{ background: 'transparent' }}
className="w-full p-2 text-xs border rounded-lg"
type="text"
id="firstName"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</div>
<div className="w-1/2 pl-1">
<label className="text-gray-300 text-xs pl-2" htmlFor="lastName">
Last Name
<div className="mb-4">
<label className="text-gray-300 text-xs pl-2" htmlFor="password">
Password
</label>
<input
style={{ background: 'transparent' }}
className="w-full p-2 text-xs border rounded-lg"
type="text"
id="lastName"
type="password"
id="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
</div>
</div>
<div className="mb-2">
<label className="text-gray-300 text-xs pl-2" htmlFor="email">
Email
</label>
<input
style={{ background: 'transparent' }}
className="w-full p-2 text-xs border rounded-lg"
type="text"
id="email"
/>
<div className="mb-3 flex items-center justify-center ">
<button
className="max-lg:z-20 bg-blue-400 hover:bg-blue-600 p-2 rounded-lg relative z-10"
style={{ width: '70%', maxWidth: '300px' }}
>
<text className="text-white justify-center flex items-center text-xs font-bold">
Create Account
</text>
</button>
</div>
<div className="mb-4">
<label className="text-gray-300 text-xs pl-2" htmlFor="password">
Password
</label>
<input
style={{ background: 'transparent' }}
className="w-full p-2 text-xs border rounded-lg"
type="password"
id="password"
/>
</div>
</div>
<div className="mb-3 flex items-center justify-center ">
<button
className="max-lg:z-20 bg-blue-400 hover:bg-blue-600 p-2 rounded-lg relative z-10"
style={{ width: '70%', maxWidth: '300px' }}
>
<text className="text-white justify-center flex items-center text-xs font-bold">
Create Account
<div className="text-white text-center relative z-10">
<text className="text-xs">
Already have an account?{' '}
<a className="hover:underline undeline-offset-4" href="/login">
LogIn
</a>
</text>
</button>
</div>
<div className="text-white text-center relative z-10">
<text className="text-xs">
Already have an account?{' '}
<a className="hover:underline undeline-offset-4" href="/login">
LogIn
</a>
</text>
</div>
</div>
</div>
</div>
</form>
);
}

Expand Down
Loading

0 comments on commit 580ee54

Please sign in to comment.