Skip to content

Commit 29b7881

Browse files
BackendExpertJehanKandyAnupa1998
committed
Update
Co-Authored-By: JehanKandy <jehankandy@gmail.com> Co-Authored-By: Anupa Gamage <125038143+Anupa1998@users.noreply.github.com>
1 parent 95ec3db commit 29b7881

File tree

2 files changed

+125
-0
lines changed

2 files changed

+125
-0
lines changed

‎LoginSignUp/SignIn.jsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React, { useState } from 'react'
2+
import { BsMortarboardFill } from "react-icons/bs";
3+
import { Link } from 'react-router-dom';
4+
5+
const SignIn = () => {
6+
// for login data
7+
const [LoginData, SetLoginData] = useState({
8+
email: '',
9+
password: ''
10+
})
11+
12+
// send data to backend using axios
13+
const headleSubmit = (e) => {
14+
e.preventDefault();
15+
16+
// login to system
17+
// this will be updated in future versions
18+
}
19+
return (
20+
<div className='bg-gray-200 min-h-screen py-24 px-8'>
21+
<div className="md:grid grid-cols-3 gap-2">
22+
<div className=""></div>
23+
<div className="">
24+
<div className="bg-white py-16 px-8 rounded shadow-md w-full ">
25+
<center className='text-gray-500'>
26+
{/* change the Icon According to your needs */}
27+
<h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
28+
<p className="pt-4 text-2xl">Welcome Back</p>
29+
<p className="">Your Project Name</p>
30+
</center>
31+
<hr className='my-2'/>
32+
<div className="my-4">
33+
<form onSubmit={headleSubmit}>
34+
<div className="my-2 md:mx-8">
35+
<label htmlFor="" className=''>Email : </label>
36+
<input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
37+
onChange={e => SetLoginData({...LoginData, email:e.target.value})}/>
38+
</div>
39+
<div className="my-2 md:mx-8">
40+
<label htmlFor="" className=''>Password : </label>
41+
<input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password'
42+
onChange={e => SetLoginData({...LoginData, password:e.target.value})}/>
43+
</div>
44+
<div className="my-2 md:mx-8">
45+
<button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>SignIn</button>
46+
</div>
47+
</form>
48+
<Link><p className="my-2 md:mx-8 text-blue-500 font-semibold">Forget Password ? </p></Link>
49+
</div>
50+
<hr className='my-2'/>
51+
<p className="my-4">Don't have an Account ? <Link to={'/SignUp'}><span className="text-blue-500">SignUp</span></Link></p>
52+
</div>
53+
</div>
54+
<div className=""></div>
55+
</div>
56+
</div>
57+
)
58+
}
59+
60+
export default SignIn

‎LoginSignUp/SignUp.jsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { useState } from 'react'
2+
import { BsMortarboardFill } from "react-icons/bs";
3+
import { Link } from 'react-router-dom';
4+
5+
const SignUp = () => {
6+
// for login data
7+
const [SignUpData, SetSignUpData] = useState({
8+
username: '',
9+
email: '',
10+
password: ''
11+
})
12+
13+
// send data to backend using axios
14+
const headleSubmit = (e) => {
15+
e.preventDefault();
16+
17+
// signup to system
18+
// this will be updated in future versions
19+
}
20+
return (
21+
<div className='bg-gray-200 min-h-screen py-24 px-8'>
22+
<div className="md:grid grid-cols-3 gap-2">
23+
<div className=""></div>
24+
<div className="">
25+
<div className="bg-white py-16 px-8 rounded shadow-md w-full ">
26+
<center className='text-gray-500'>
27+
{/* change the Icon According to your needs */}
28+
<h1 className=''><BsMortarboardFill className='h-20 w-auto'/></h1>
29+
<p className="pt-4 text-2xl">Welcome to</p>
30+
<p className="">Your Project Name</p>
31+
</center>
32+
<hr className='my-2'/>
33+
<div className="my-4">
34+
<form onSubmit={headleSubmit}>
35+
<div className="my-2 md:mx-8">
36+
<label htmlFor="" className=''>Username : </label>
37+
<input type="text" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Username'
38+
onChange={e => SetSignUpData({...SignUpData, username:e.target.value})}/>
39+
</div>
40+
<div className="my-2 md:mx-8">
41+
<label htmlFor="" className=''>Email : </label>
42+
<input type="email" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Email Address'
43+
onChange={e => SetSignUpData({...SignUpData, email:e.target.value})}/>
44+
</div>
45+
<div className="my-2 md:mx-8">
46+
<label htmlFor="" className=''>Password : </label>
47+
<input type="password" name="" id="" className="w-full h-12 pl-2 rounded bg-gray-200" required placeholder='Enter Password'
48+
onChange={e => SetSignUpData({...SignUpData, password:e.target.value})}/>
49+
</div>
50+
<div className="my-2 md:mx-8">
51+
<button type='submit' className='mt-8 font-semibold w-full py-4 px-8 rounded bg-blue-500 text-white shadow-md duration-500 hover:bg-blue-600'>Sign Up</button>
52+
</div>
53+
</form>
54+
</div>
55+
<hr className='my-2'/>
56+
<p className="my-4">Already have an Account ? <Link to={'/'}><span className="text-blue-500">SignUp</span></Link></p>
57+
</div>
58+
</div>
59+
<div className=""></div>
60+
</div>
61+
</div>
62+
)
63+
}
64+
65+
export default SignUp

0 commit comments

Comments
 (0)