Skip to content

Commit 482ce05

Browse files
iamfazaliamfazal
committed
feat: screen designs, cognito integration and CI/CD done
1 parent 112e7e5 commit 482ce05

17 files changed

+1146
-14
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
# misc
1313
.DS_Store
14+
.env
1415
.env.local
1516
.env.development.local
1617
.env.test.local

‎package-lock.json

Lines changed: 273 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
"@testing-library/react": "^11.2.6",
88
"@testing-library/user-event": "^12.8.3",
99
"amazon-cognito-identity-js": "^4.6.0",
10+
"bootstrap": "^4.6.0",
11+
"dotenv": "^8.2.0",
1012
"react": "^17.0.2",
1113
"react-dom": "^17.0.2",
14+
"react-router-dom": "^5.2.0",
1215
"react-scripts": "4.0.3",
1316
"web-vitals": "^1.1.1"
1417
},

‎src/App.js

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
1-
// npm i amazon-cognito-identity-js
2-
import {CognitoUserPool} from 'amazon-cognito-identity-js'
1+
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
2+
import { Account } from "./components/cognito";
3+
import {PrivateRoute} from "./routes";
4+
import { Login, Signup,ForgotPassword } from "./components/auth";
5+
import { Dashboard } from "./components/dashboard";
6+
import "./authForm.css";
37

4-
export default ()=> {
8+
export default () => {
59
return (
6-
<div >
7-
Hello AWS Amplify
8-
</div>
10+
<Router>
11+
<Account className="App">
12+
<Switch>
13+
<Route exact path="/" component={Login} />
14+
<Route path="/sign-in" component={Login} />
15+
<Route path="/sign-up" component={Signup} />
16+
<Route path="/forgotPassword" component={ForgotPassword} />
17+
<PrivateRoute path="/dashboard" component={Dashboard} />
18+
<Redirect from = '/' to = '/' />
19+
</Switch>
20+
</Account>
21+
</Router>
922
);
10-
}
23+
};

‎src/authForm.css

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
:root {
2+
--input-padding-x: 1.5rem;
3+
--input-padding-y: 0.75rem;
4+
}
5+
6+
.login,
7+
.image {
8+
min-height: 100vh;
9+
}
10+
11+
.bg-image {
12+
background-image: url('https://source.unsplash.com/WEQbe2jBg40/600x1200');
13+
background-size: cover;
14+
background-position: center;
15+
}
16+
17+
.login-heading {
18+
font-weight: 300;
19+
}
20+
21+
.btn-login {
22+
font-size: 0.9rem;
23+
letter-spacing: 0.05rem;
24+
padding: 0.75rem 1rem;
25+
border-radius: 2rem;
26+
}
27+
28+
.form-label-group {
29+
position: relative;
30+
margin-bottom: 1rem;
31+
}
32+
33+
.form-label-group>input,
34+
.form-label-group>label {
35+
padding: var(--input-padding-y) var(--input-padding-x);
36+
height: auto;
37+
border-radius: 2rem;
38+
}
39+
40+
.form-label-group>label {
41+
position: absolute;
42+
top: 0;
43+
left: 0;
44+
display: block;
45+
width: 100%;
46+
margin-bottom: 0;
47+
/* Override default `<label>` margin */
48+
line-height: 1.5;
49+
color: #495057;
50+
cursor: text;
51+
/* Match the input under the label */
52+
border: 1px solid transparent;
53+
border-radius: .25rem;
54+
transition: all .1s ease-in-out;
55+
}
56+
57+
.form-label-group input::-webkit-input-placeholder {
58+
color: transparent;
59+
}
60+
61+
.form-label-group input:-ms-input-placeholder {
62+
color: transparent;
63+
}
64+
65+
.form-label-group input::-ms-input-placeholder {
66+
color: transparent;
67+
}
68+
69+
.form-label-group input::-moz-placeholder {
70+
color: transparent;
71+
}
72+
73+
.form-label-group input::placeholder {
74+
color: transparent;
75+
}
76+
77+
.form-label-group input:not(:placeholder-shown) {
78+
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
79+
padding-bottom: calc(var(--input-padding-y) / 3);
80+
}
81+
82+
.form-label-group input:not(:placeholder-shown)~label {
83+
padding-top: calc(var(--input-padding-y) / 3);
84+
padding-bottom: calc(var(--input-padding-y) / 3);
85+
font-size: 12px;
86+
color: #777;
87+
}
88+
89+
/* Fallback for Edge
90+
-------------------------------------------------- */
91+
92+
@supports (-ms-ime-align: auto) {
93+
.form-label-group>label {
94+
display: none;
95+
}
96+
.form-label-group input::-ms-input-placeholder {
97+
color: #777;
98+
}
99+
}
100+
101+
/* Fallback for IE
102+
-------------------------------------------------- */
103+
104+
@media all and (-ms-high-contrast: none),
105+
(-ms-high-contrast: active) {
106+
.form-label-group>label {
107+
display: none;
108+
}
109+
.form-label-group input:-ms-input-placeholder {
110+
color: #777;
111+
}
112+
}
113+

‎src/components/auth/forgotPassword.js

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
import React, { useState } from "react";
2+
import { UserPool } from "../cognito";
3+
import { CognitoUser } from "amazon-cognito-identity-js";
4+
5+
export default function ForgotPassword(props) {
6+
const [stage, setStage] = useState(1); // 1 mean Signup stage and 2 mean confirm user
7+
const [email, setEmail] = useState("");
8+
const [password,setPassword]=useState("");
9+
const [confirmPassword,setCPassword]=useState("");
10+
const [alert, setAlert] = useState(false);
11+
const [alertMsg, setAlertMsg] = useState("");
12+
const [alertType, setAlertType] = useState("");
13+
const [code, setCode] = useState(""); //verification code
14+
15+
const getUser = () =>{
16+
return new CognitoUser({
17+
Username:email.toLowerCase(),
18+
Pool:UserPool
19+
})
20+
}
21+
const sendCode = (event) => {
22+
event.preventDefault();
23+
setAlert(false);
24+
getUser().forgotPassword({
25+
onSuccess : data=>{
26+
27+
},
28+
onFailure: err=>{
29+
30+
},
31+
inputVerificationCode: data=>{
32+
33+
setStage(2)
34+
}
35+
})
36+
};
37+
const close = (event) => {
38+
setAlert(false);
39+
};
40+
const ToLogin = (e, history) => {
41+
e.preventDefault();
42+
history.push("/sign-in");
43+
};
44+
const resetPassword = (event) => {
45+
event.preventDefault();
46+
setAlert(false);
47+
if(password != confirmPassword){
48+
setAlertMsg("Password don't match");
49+
setAlertType("alert alert-danger");
50+
setAlert(true);
51+
return;
52+
}
53+
getUser().confirmPassword(code,password,{
54+
onSuccess:data=>{
55+
setAlertMsg("Password changed.");
56+
setAlertType("alert alert-success");
57+
setAlert(true);
58+
setTimeout(
59+
() => props.history.push("/sign-in"),
60+
4000
61+
);
62+
},
63+
onFailure: err=>{
64+
setAlertMsg(err.message);
65+
setAlertType("alert alert-danger");
66+
setAlert(true);
67+
console.log(err);
68+
}
69+
})
70+
};
71+
72+
return (
73+
<div>
74+
{stage === 1 && (
75+
<div className="container-fluid">
76+
<div className="row no-gutter">
77+
<div className="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
78+
<div className="col-md-8 col-lg-6">
79+
{alert && (
80+
<div
81+
style={{
82+
position: "absolute",
83+
zIndex: "9",
84+
marginTop: "10px",
85+
}}
86+
>
87+
<div className={alertType} role="alert">
88+
<button
89+
type="button"
90+
className="close"
91+
data-dismiss="alert"
92+
onClick={close}
93+
aria-label="Close"
94+
>
95+
<span aria-hidden="true">&times;</span>
96+
</button>
97+
{alertMsg}
98+
</div>
99+
</div>
100+
)}
101+
<div className="login d-flex align-items-center py-5">
102+
<div className="container">
103+
<div className="row">
104+
<div className="col-md-9 col-lg-8 mx-auto">
105+
<h3 className="login-heading mb-4">Forgot Password</h3>
106+
<form onSubmit={sendCode}>
107+
<div className="form-label-group">
108+
<input
109+
type="email"
110+
id="inputEmail"
111+
className="form-control"
112+
required
113+
autoFocus
114+
value={email}
115+
onChange={(event) => setEmail(event.target.value)}
116+
/>
117+
<label>Enter you email address</label>
118+
</div>
119+
120+
<button
121+
className="btn btn-lg btn-primary btn-block btn-login text-uppercase font-weight-bold mb-2"
122+
type="submit"
123+
>
124+
Continue
125+
</button>
126+
</form>
127+
<button
128+
onClick={(e) => ToLogin(e, props.history)}
129+
className="btn btn-lg btn-light btn-block btn-login text-uppercase font-weight-bold mb-2"
130+
>
131+
Back
132+
</button>
133+
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
</div>
139+
</div>
140+
</div>
141+
)}
142+
{stage === 2 && (
143+
<div className="container-fluid">
144+
<div className="row no-gutter">
145+
<div className="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
146+
<div className="col-md-8 col-lg-6">
147+
{alert && (
148+
<div
149+
style={{
150+
position: "absolute",
151+
zIndex: "9",
152+
marginTop: "10px",
153+
}}
154+
>
155+
<div className={alertType} role="alert">
156+
<button
157+
type="button"
158+
className="close"
159+
data-dismiss="alert"
160+
onClick={close}
161+
aria-label="Close"
162+
>
163+
<span aria-hidden="true">&times;</span>
164+
</button>
165+
{alertMsg}
166+
</div>
167+
</div>
168+
)}
169+
<div className="login d-flex align-items-center py-5">
170+
<div className="container">
171+
<div className="row">
172+
<div className="col-md-9 col-lg-8 mx-auto">
173+
<h3 className="login-heading mb-4">Set New Password</h3>
174+
<form onSubmit={resetPassword}>
175+
<div className="form-label-group">
176+
<input
177+
type="text"
178+
id="inputverificationCode"
179+
className="form-control"
180+
required
181+
autoFocus
182+
value={code}
183+
onChange={(event) => setCode(event.target.value)}
184+
/>
185+
<label>Enter Code</label>
186+
</div>
187+
{/* Password */}
188+
<div className="form-label-group">
189+
<input
190+
type="password"
191+
id="inputverificationCode"
192+
className="form-control"
193+
required
194+
value={password}
195+
onChange={(event) => setPassword(event.target.value)}
196+
/>
197+
<label>New Password</label>
198+
</div>
199+
{/* confirm password */}
200+
<div className="form-label-group">
201+
<input
202+
type="password"
203+
id="inputverificationCode"
204+
className="form-control"
205+
required
206+
value={confirmPassword}
207+
onChange={(event) => setCPassword(event.target.value)}
208+
/>
209+
<label>New Password</label>
210+
</div>
211+
<button
212+
className="btn btn-lg btn-primary btn-block btn-login text-uppercase font-weight-bold mb-2"
213+
type="submit"
214+
>
215+
Verify
216+
</button>
217+
</form>
218+
</div>
219+
</div>
220+
</div>
221+
</div>
222+
</div>
223+
</div>
224+
</div>
225+
)}
226+
</div>
227+
);
228+
}

0 commit comments

Comments
 (0)