Skip to content

Commit

Permalink
login page complete
Browse files Browse the repository at this point in the history
  • Loading branch information
@PraffulPatel27
PraffulPatel27 committed Nov 17, 2023
1 parent 438ca8c commit a68c75f
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 144 deletions.
59 changes: 41 additions & 18 deletions src/Components/Login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,7 @@ body {
/* align-items: center; */
justify-content: space-evenly;
}
.right-img {
background-color: #c0c0c0 | rgb(192,192,192);
/* border: 2px solid black; */
width: 50%;
justify-content: center;
align-items: center;
display: flex;
}
.right-img img {
width: 17.88881rem;
height: 14.47794rem;
}

.Left-content {
width: 50%;
display: flex;
Expand All @@ -38,6 +27,7 @@ body {
.Left-content nav {
/* margin-top: -14%; */
margin-left: -5.15rem;
cursor: pointer;
}

.form-details {
Expand Down Expand Up @@ -91,7 +81,6 @@ label {

/* Style for Font Awesome icons (adjust as needed) */
.password-toggle i {
font-size: 18px;
color: #007bff; /* Change color as needed */
}
.password-toggle i:hover {
Expand All @@ -100,17 +89,19 @@ label {
}

/* forget password css */
.form-details a {
margin-top: 5rem;
.form-details {
/* margin-top: 5rem; */
color: rgba(0, 0, 0, 0.61);
}

.forget-pass {
/* border: 2px solid black; */
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding-top: 10%;
justify-content: right;
margin-right: 16%;
/* align-items: flex-start; */
padding-top: 4%;
color: rgba(0, 0, 0, 0.014);
}
.forget-pass a:hover {
color: #FCC822;
Expand Down Expand Up @@ -184,3 +175,35 @@ button::before {
color: #007bff; /* Change color as needed */
}

.another-Login {
display: flex;
justify-content: center;
align-items: center;
margin-left: -40%;
font-size: 0.8rem;
font-style: normal;
font-weight: 400;
}
.another-Login p {
padding-right: 25px;
}
.same-lo {
color: #FCC822;
font-weight: 700;
cursor: pointer;
}

/************ Right Side CSS ***********/
.right-img {
/* background-color: #c0c0c0 | rgb(192,192,192); */
/* border: 2px solid black; */
background-color: #f5f2f286;
width: 50%;
justify-content: center;
align-items: center;
display: flex;
}
.right-img img {
width: 17.88881rem;
height: 14.47794rem;
}
220 changes: 94 additions & 126 deletions src/Components/login.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,170 +1,138 @@
import React, { useState } from "react";
import cap from "./Images/graduate.svg";
import logo from "./Images/logo.svg";
import "./Login.css";
import React, { useState } from 'react';
import cap from './Images/graduate.svg';
import logo from './Images/logo.svg';
import './Login.css';

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />


export default function Login() {
const textD = {
textDecoration: "none",
color: "black",
};
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const [password, setPassword] = useState("");
const textD = {
textDecoration: 'none',
color: 'black',
}
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [password, setPassword] = useState('');

// **************************
const [showPassword, setShowPassword] = useState(false);
// **************************

const handlePassword = (e) => {
if (e.target.value === "") {
const handlePassword = (e) =>{
if(e.target.value === ''){
setMessage("Please enter your password");
} else {
setMessage("");
}else{
setMessage('')
}
setPassword(e.target.value);
};


const handleEmailChange = (e) => {
setEmail(e.target.value);
};


// **************************
const handlePasswordVisibility = () => {
setShowPassword(!showPassword);
};
//***************************
//***************************

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

try {
setMessage("Password reset email sent. Please check your inbox.");
setMessage('Password reset email sent. Please check your inbox.');
} catch (error) {
setMessage("Error sending password reset email. Please try again.");
setMessage('Error sending password reset email. Please try again.');
}
};

return (
<div className="main">
<div className="Left-content">
<div className='main'>

<div className='Left-content'>
{/* <img src={cap} alt="Cap"></img> */}

<nav>
<img src={logo} alt="Logo" id="log1"></img>
</nav>

<p id="head">
<span> Welcome back! </span>
<br />
<nav>
<img src={logo} alt="Logo" id='log1'></img>
</nav>
<p id='head'>
<span> Welcome back! </span>
<br/>
<span> Please login/Signup to your account. </span>
</p>

{/* <form action="/login" method="post">
<div>
<form onSubmit={handleSubmit}>
<label>
Email:
<input type="email" value={email} onChange={handleEmailChange} />
</label>
<label>
Password:
<input type="password" value={password} onChange={handlePassword} />
</label>
<a href="/fogrt" target="_blank" rel="noopener noreferrer" style={textD}>
Forget Password
</a>
</form>
{message && <p>{message}</p>}
</div>
<div className='btns' style={{}}>
<button type="submit">Login</button>
<button type="submit">SignUp</button>
</div>
</form>
</div> */}

<form action="/login" method="post">
<div className="form-details">

<form action='/login' method='post'>
<div className='form-details'>
<form onSubmit={handleSubmit}>
<label>
{/* Email: */}
<input
type="email"
type='email'
value={email}
onChange={handleEmailChange}
placeholder="Email Address"
/>
</label>
{/* <label>
{/* Password: */}
{/* <div className='password-input'>
<input
type={showPassword ? 'text' : 'password'}
value={password}
onChange={handlePassword}
placeholder='Password'
/>
<span
className={`password-toggle ${showPassword ? 'visible' : ''}`}
onClick={handlePasswordVisibility}
>
{showPassword ? 'Hide' : 'Show'}
</span>
</div> */}
{/* </label> */}

{/* *********** Eye Icon ************ */}
<label>
<div className="password-input">
<input
type={showPassword ? "text" : "password"}
value={password}
onChange={handlePassword}
placeholder="Password"
/>
<span
className="password-toggle"
onClick={handlePasswordVisibility}
>
{showPassword ? (
<i className="far fa-eye-slash"></i>
) : (
<i className="far fa-eye"></i>
)}
</span>
</div>
placeholder='Email Address'/>
</label>
</form>

{message && <p>{message}</p>}
</div>

<div className="forget-pass">
<a
href="/fogrt"
target="_blank"
rel="noopener noreferrer"
style={textD}
id="forget"
>
Forgot Password?{" "}
</a>
</div>

{/****** Login and SignUp Buttons ******/}
<div className="btns" style={{}}>
<button type="submit">Login</button>
<button type="submit">SignUp</button>
</div>
</form>
</div>

<div className="right-img">
<img src={cap} alt="Cap"></img>
</div>


{/* *********** Eye Icon ************ */}
<label>
<div className='password-input'>
<input
type={showPassword ? 'text' : 'password'}
value={password}
onChange={handlePassword}
placeholder='Password'
/>
<span className='password-toggle' onClick={handlePasswordVisibility}>
{showPassword ? (
<i className='far fa-eye-slash'></i>
) : (
<i className='far fa-eye'></i>
)}
</span>
</div>
</label>
</form>

{message && <p>{message}</p>}
</div>

<div className='forget-pass'>
<a href='/fogrt' target='_blank' rel='noopener noreferrer' style={textD} id='forget'>
Forgot Password? </a>
</div>


{/****** Login and SignUp Buttons ******/}
<div className='btns' style={{}}>
<button type='submit'>Login</button>
<button type='submit'>SignUp</button>
</div>


{/* Login with another */}
<div className='another-Login'>
<p> Or Login with </p>
<p className='same-lo'>Google</p>
<p className='same-lo'>Facebook</p>
</div>

</form>
</div>





<div className='right-img'>
<img src={cap} alt="Cap"></img>
</div>
</div>
);
}

0 comments on commit a68c75f

Please sign in to comment.