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

Improve login and register page #45

Merged
merged 1 commit into from
Oct 3, 2024
Merged

Improve login and register page #45

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
36 changes: 21 additions & 15 deletions frontend/src/Pages/LoginPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,60 +7,66 @@ const Login = () => {

const handleLogin = (e) => {
e.preventDefault();
// Handle login logic
};

return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-200 to-blue-500">
{/* Logo, Title, and Tagline */}
<div className="text-center mb-8">
<img src={logo} alt="Station Saarthi Logo" className="mx-auto w-20 h-20" /> {/* Adjust width/height as needed */}
<h1 className="text-3xl font-bold text-gray-800 mt-4">Station Saarthi</h1>
<p className="text-gray-500 mt-2">Your Trusted Platform Guide</p>
<img src={logo} alt="Station Saarthi Logo" className="mx-auto w-28 h-28" /> {/* Larger logo */}
<h1 className="text-4xl font-bold text-white mt-4">Station Saarthi</h1>
<p className="text-white opacity-80 mt-2 text-lg">Your Trusted Platform Guide</p>
</div>

{/* Login Form */}
<form onSubmit={handleLogin} className="bg-white p-6 rounded-lg shadow-md w-full max-w-sm">
<form onSubmit={handleLogin} className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
{/* Username Input */}
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2" htmlFor="username">Username</label>
<div className="mb-6">
<label className="block text-gray-700 font-semibold mb-2" htmlFor="username">Username</label>
<input
type="text"
id="username"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Enter your username"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
required
/>
</div>

{/* Password Input */}
<div className="mb-6">
<label className="block text-gray-700 font-bold mb-2" htmlFor="password">Password</label>
<label className="block text-gray-700 font-semibold mb-2" htmlFor="password">Password</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter your password"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
required
/>
</div>

{/* Login Button */}
<button
type="submit"
className="w-full bg-blue-500 text-white py-2 rounded-lg font-semibold hover:bg-blue-600 transition-colors"
className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105"
>
Login
</button>
</form>

{/* Don't have an account link */}
<p className="mt-4 text-gray-600">
<span>Don't have an account? </span>
<a href="/register" className="text-blue-500 font-semibold hover:underline transition duration-300 ease-in-out transform hover:scale-105">
{/* Divider */}
<div className="mt-6 text-center">
<hr className="border-t border-gray-200" />
</div>

{/* Register Link */}
<p className="mt-4 text-white">
Don't have an account?{' '}
<a href="/register" className="text-white font-semibold hover:underline transition duration-300 transform hover:scale-105">
Register
</a>
</p>
Expand Down
45 changes: 27 additions & 18 deletions frontend/src/Pages/Register.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
import logo from '../assets/stationsaarthi.svg'; // Import your logo

const Register = () => {
const [name, setName] = useState('');
Expand All @@ -8,81 +9,89 @@ const Register = () => {

const handleRegister = (e) => {
e.preventDefault();
// Handle registration logic here
};

return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<h2 className="mb-6 text-3xl font-bold">Register New User</h2>
<form onSubmit={handleRegister} className="w-full max-w-sm p-6 bg-white rounded-lg shadow-md">
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-200 to-blue-5000">
{/* Logo and Title */}
<div className="text-center mb-10">
<img src={logo} alt="Station Saarthi Logo" className="mx-auto w-28 h-28" />
<h1 className="text-4xl font-bold text-gray-800 mt-4">Station Saarthi</h1>
<p className="text-gray-600 mt-2 text-lg">Register New User</p>
</div>

{/* Registration Form */}
<form onSubmit={handleRegister} className="w-full max-w-md bg-white p-8 rounded-lg shadow-md">
{/* Name Input */}
<div className="mb-4">
<label className="block mb-2 font-bold text-gray-700" htmlFor="name">Name</label>
<div className="mb-5">
<label className="block text-gray-700 font-semibold mb-2" htmlFor="name">Name</label>
<input
type="text"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
required
/>
</div>

{/* Phone Number Input */}
<div className="mb-4">
<label className="block mb-2 font-bold text-gray-700" htmlFor="phoneNumber">Phone Number</label>
<div className="mb-5">
<label className="block text-gray-700 font-semibold mb-2" htmlFor="phoneNumber">Phone Number</label>
<input
type="tel"
id="phoneNumber"
value={phoneNumber}
onChange={(e) => setPhoneNumber(e.target.value)}
placeholder="Enter your phone number"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
required
/>
</div>

{/* Email Input */}
<div className="mb-4">
<label className="block mb-2 font-bold text-gray-700" htmlFor="email">Email</label>
<div className="mb-5">
<label className="block text-gray-700 font-semibold mb-2" htmlFor="email">Email</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
required
/>
</div>

{/* Password Input */}
<div className="mb-6">
<label className="block mb-2 font-bold text-gray-700" htmlFor="password">Password</label>
<label className="block text-gray-700 font-semibold mb-2" htmlFor="password">Password</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Create a password"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
required
/>
</div>

{/* Register Button */}
<button
type="submit"
className="w-full py-2 font-semibold text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600"
className="w-full py-3 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105"
>
Register
</button>
</form>

{/* Already have an account link */}
<p className="mt-4">
<span className="text-gray-600">Already have an account? </span>
<a href="/login" className="font-semibold text-blue-500 transition duration-300 ease-in-out transform hover:underline hover:scale-105">
<p className="mt-6 text-gray-600">
Already have an account?{' '}
<a href="/login" className="text-blue-500 font-semibold hover:underline transition duration-300 transform hover:scale-105">
Log in
</a>
</p>
Expand Down
Loading