Skip to content

Commit d1ed47b

Browse files
junipjunip
committed
updated UI for the login/register signup
1 parent def2b41 commit d1ed47b

File tree

9 files changed

+198
-46
lines changed

9 files changed

+198
-46
lines changed

‎README.md‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# React-Firebase
1+
# React-Firebase :rocket:
22
Firebase Integration with React (Basic signup/login flow)
33
<p align="center">
44
<img width="600" height="300" src="./static/react-firebase.jpg">
@@ -12,6 +12,13 @@ Firebase Integration with React (Basic signup/login flow)
1212
</a>
1313
</p>
1414

15+
<p align="center">
16+
<img width="600" height="600" src="./static/login-register.jpg">
17+
<div align="center">
18+
UI design use to login/register flow
19+
</div>
20+
</p>
21+
1522
# Setup
1623

1724
## Firebase Configuration
@@ -54,8 +61,9 @@ npm run dev
5461
[MIT]() junipdewan
5562

5663

57-
## ToDo
58-
59-
- [ ] Better UI for signup/register
64+
## To do
6065

61-
##
66+
- [x] Better UI for signup/register
67+
- [ ] Error handling in forms
68+
- [ ] Add Firebase admin SDK
69+
- [ ] Register User using Name & phone number

‎src/components/Login.js‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -34,22 +34,31 @@ const Login = () => {
3434
}
3535

3636
return (
37-
<div className="form">
38-
<div className="form-row">
39-
<label>Email</label>
40-
<input name="email" onChange={(e) => onInputChange(e,'email')}></input>
41-
</div>
42-
<div className="form-row">
43-
<label>Password</label>
44-
<input name="password" type="password" onChange={(e) => onInputChange(e, 'pass')}></input>
45-
</div>
46-
<button className="form-row" onClick={loginUser}>
47-
Login
48-
</button>
49-
<button className="form-row" onClick={registerUser}>
50-
Register
51-
</button>
52-
</div>
37+
<div className="form-container">
38+
<div className="form">
39+
<div className="form-content">
40+
<div className="form-row">
41+
<label>Email</label>
42+
<input name="email" onChange={(e) => onInputChange(e,'email')}></input>
43+
</div>
44+
<div className="form-row">
45+
<label>Password</label>
46+
<input name="password" type="password" onChange={(e) => onInputChange(e, 'pass')}></input>
47+
</div>
48+
<div className="form-row">
49+
<div className="button-container">
50+
<button className="btn btn-primary" onClick={loginUser}>
51+
Login
52+
</button>
53+
<button className="btn btn-success" onClick={registerUser}>
54+
Register
55+
</button>
56+
</div>
57+
</div>
58+
</div>
59+
60+
</div>
61+
</div>
5362
)
5463
}
5564

‎src/components/Register.js‎

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,23 @@ import { useHistory } from 'react-router-dom';
44

55
const Register = () => {
66
let history = useHistory()
7-
const [email, setEmail] = useState('')
8-
const [pass, setPass] = useState('')
7+
const [data, setState] = useState({
8+
// name: '',
9+
// phone: '',
10+
email: '',
11+
pass: ''
12+
})
913

1014
const onInputChange = (e, name) => {
11-
let inputValue = e.target.value
12-
if(name === 'pass') {
13-
setPass(inputValue)
14-
} if(name === 'email') {
15-
setEmail(inputValue)
16-
}
15+
e.persist()
16+
setState(prev => ({
17+
...prev,
18+
[name]: e.target.value
19+
}))
1720
}
1821

1922
const registerUser = () => {
20-
app.auth().createUserWithEmailAndPassword(email, pass).then((response) => {
23+
app.auth().createUserWithEmailAndPassword(data.email, data.pass).then((response) => {
2124
if(response) {
2225
history.push('/login')
2326
}
@@ -29,19 +32,36 @@ const Register = () => {
2932
}
3033

3134
return(
32-
<div className="form">
33-
<div className="form-row">
34-
<label>Email</label>
35-
<input name="email" onChange={(e) => onInputChange(e,'email')}></input>
36-
</div>
37-
<div className="form-row">
38-
<label>Password</label>
39-
<input name="password" type="password" onChange={(e) => onInputChange(e, 'pass')}></input>
40-
</div>
41-
<button className="form-row" onClick={registerUser}>
42-
Register
43-
</button>
44-
</div>)
35+
<div className="form-container">
36+
<div className="form">
37+
<div className="form-content">
38+
{/* <div className="form-row">
39+
<label>Name</label>
40+
<input name="email" onChange={(e) => onInputChange(e,'name')}></input>
41+
</div> */}
42+
<div className="form-row">
43+
<label>Email</label>
44+
<input name="email" onChange={(e) => onInputChange(e,'email')}></input>
45+
</div>
46+
<div className="form-row">
47+
<label>Password</label>
48+
<input name="password" type="password" onChange={(e) => onInputChange(e, 'pass')}></input>
49+
</div>
50+
{/* <div className="form-row">
51+
<label>Phone Number</label>
52+
<input name="phone" onChange={(e) => onInputChange(e,'phone')}></input>
53+
</div> */}
54+
<div className="form-row">
55+
<div className="button-container">
56+
<button className="btn btn-success" onClick={registerUser}>
57+
Register
58+
</button>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
)
4565
}
4666

4767
export default Register

‎src/components/_login.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.form-container {
2+
.button-container {
3+
display: block;
4+
button:nth-child(2) {
5+
margin-left: 16px;
6+
}
7+
}
8+
}

‎src/scss/_button.scss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.btn {
2+
text-transform: uppercase;
3+
cursor: pointer;
4+
border: solid 2px;
5+
padding: .375rem .75rem;
6+
font-size: 12px;
7+
font-weight: 500;
8+
line-height: 1.5;
9+
border-radius: 1000px;
10+
min-width: 140px;
11+
margin: auto;
12+
height: 40px;
13+
font-family: 'Balsamiq Sans',cursive;
14+
15+
&.btn-primary {
16+
color: #fff;
17+
background-color: #007bff;
18+
border-color: #007bff;
19+
}
20+
&.btn-secondary {
21+
color: #fff;
22+
background-color: #6c757d;
23+
border-color: #6c757d;
24+
}
25+
&.btn-success {
26+
color: #fff;
27+
background-color: #28a745;
28+
border-color: #28a745;
29+
}
30+
&.btn-danger {
31+
color: #fff;
32+
background-color: #dc3545;
33+
border-color: #dc3545;
34+
}
35+
&.btn-warning {
36+
color: #212529;
37+
background-color: #ffc107;
38+
border-color: #ffc107;
39+
}
40+
&.btn-info {
41+
color: #fff;
42+
background-color: #17a2b8;
43+
border-color: #17a2b8;
44+
}
45+
&.btn-light {
46+
color: #212529;
47+
background-color: #f8f9fa;
48+
border-color: #f8f9fa;
49+
}
50+
&.btn-dark {
51+
color: #fff;
52+
background-color: #343a40;
53+
border-color: #343a40;
54+
}
55+
&.btn-outline-primary {
56+
color: #007bff;
57+
border-color: #007bff;
58+
}
59+
}

‎src/scss/_layout.scss‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
1-
body {
1+
@mixin font-family {
22
font-family: 'Balsamiq Sans',cursive
3+
}
4+
5+
body {
6+
@include font-family;
7+
}
8+
9+
.form-container {
10+
height: 100vh;
11+
background-color: #0093E9;
12+
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
.form {
17+
position: relative;
18+
background: white;
19+
height: 560px;
20+
border-radius: 12px;
21+
width: 480px;
22+
.form-content {
23+
position: absolute;
24+
top: 50%;
25+
left: 50%;
26+
transform: translate(-50%, -50%);
27+
.form-row {
28+
margin-top: 16px;
29+
input {
30+
@include font-family;
31+
margin-top: 12px;
32+
padding-left: 10px;
33+
border-radius: 6px;
34+
background: #dedede;
35+
width: 330px;
36+
height: 45px;
37+
border-color: #162d54
38+
}
39+
.button-container {
40+
margin-top: 50px;
41+
text-align: center;
42+
button {
43+
border: none;
44+
outline: none;
45+
}
46+
}
47+
}
48+
}
49+
}
350
}

‎src/scss/_module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@import '../components/register';
1+
@import '../components/login';

‎src/scss/main.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
@import url(https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap);
22
@import './layout';
3-
@import './module';
3+
@import './module';
4+
@import './button';

‎static/login-register.jpg‎

183 KB
Loading

0 commit comments

Comments
 (0)