Skip to content

Commit

Permalink
Merge pull request #136 from Krishna100604/main
Browse files Browse the repository at this point in the history 
added new feature in signup and sign in page
  • Loading branch information
@trishanu-init
trishanu-init authored Jun 21, 2024
2 parents 768e822 + 667f0bf commit a14d9da
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 262 deletions.
113 changes: 64 additions & 49 deletions app/login/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,81 @@
"use client"
"use client";

import React, { useState } from 'react';
import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';

const Login: React.FC = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
// Print user details to the console
console.log({
email,
password,
});
console.log({ email, password });
};

const handleGoogleSuccess = (credentialResponse: any) => {
console.log('Google login successful', credentialResponse);
};

const handleGoogleError = () => {
console.log('Google login failed');
};

return (
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
<h2 className="text-2xl font-bold mb-6 text-center">Log In</h2>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email Address
</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="mb-4">
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
Password
</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="flex items-center justify-between">
<button
type="submit"
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Log In
</button>
<GoogleOAuthProvider clientId="YOUR_GOOGLE_CLIENT_ID">
<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600">
<div className="bg-white p-10 rounded-lg shadow-lg w-full max-w-md mt-16">
<h2 className="text-3xl font-bold mb-8 text-center text-gray-800">Log In</h2>
<form onSubmit={handleSubmit}>
<div className="mb-6">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email Address
</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="mt-2 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
<div className="mb-6">
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
Password
</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="mt-2 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
<div className="flex items-center justify-between mb-6">
<button
type="submit"
className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Log In
</button>
</div>
</form>
<div className="mt-6">
<div className="w-full flex justify-center">
<GoogleLogin
onSuccess={handleGoogleSuccess}
onError={handleGoogleError}
/>
</div>
</div>
</form>
<p className="mt-4 text-center text-sm text-gray-600">
Don't have an account?{' '}
<a href="/signup" className="text-indigo-600 hover:text-indigo-500">
Sign Up
</a>
</p>
<p className="mt-6 text-center text-sm text-gray-600">
Don't have an account?{' '}
<a href="/signup" className="text-blue-600 hover:text-blue-500 font-medium">
Sign Up
</a>
</p>
</div>
</div>
</div>
</GoogleOAuthProvider>
);
};

Expand Down
162 changes: 86 additions & 76 deletions app/signup/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client"
"use client";

import React from 'react';
import { useState } from 'react';
import React, { useState } from 'react';
import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';

const SignUp: React.FC = () => {
const [name, setName] = useState('');
Expand All @@ -11,85 +11,95 @@ const SignUp: React.FC = () => {

const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
// Print user details to the console
console.log({
name,
email,
password,
confirmPassword,
});
console.log({ name, email, password, confirmPassword });
};

const handleGoogleSuccess = (credentialResponse: any) => {
console.log('Google sign up successful', credentialResponse);
};

const handleGoogleError = () => {
console.log('Google sign up failed');
};

return (
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
<h2 className="text-2xl font-bold mb-6 text-center">Sign Up</h2>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
Full Name
</label>
<input
type="text"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email Address
</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
<GoogleOAuthProvider clientId="YOUR_GOOGLE_CLIENT_ID">
<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 p-4 sm:p-6 lg:p-8">
<div className="bg-white p-6 sm:p-8 rounded-lg shadow-lg w-full max-w-md mt-14">
<h2 className="text-3xl font-bold mb-6 text-center text-gray-800">Sign Up</h2>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
Full Name
</label>
<input
type="text"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
<div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email Address
</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
<div className="mb-4">
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
Password
</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
<div className="mb-4">
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
Confirm Password
</label>
<input
type="password"
id="confirmPassword"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
<div className="flex items-center justify-between mb-4">
<button
type="submit"
className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Sign Up
</button>
</div>
</form>
<div className="mt-4">
<GoogleLogin
onSuccess={handleGoogleSuccess}
onError={handleGoogleError}
/>
</div>
<div className="mb-4">
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
Password
</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="mb-4">
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
Confirm Password
</label>
<input
type="password"
id="confirmPassword"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="flex items-center justify-between">
<button
type="submit"
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Sign Up
</button>
</div>
</form>
<p className="mt-4 text-center text-sm text-gray-600">
Already have an account?{' '}
<a href="/login" className="text-indigo-600 hover:text-indigo-500">
Log in
</a>
</p>
<p className="mt-4 text-center text-sm text-gray-600">
Already have an account?{' '}
<a href="/login" className="text-blue-600 hover:text-blue-500 font-medium">
Log in
</a>
</p>
</div>
</div>
</div>
</GoogleOAuthProvider>
);
};

Expand Down
Loading

0 comments on commit a14d9da

Please sign in to comment.