Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
A
Aqbits Trace Code
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Mai Thanh Cong
Aqbits Trace Code
Commits
f1c7c74c
Commit
f1c7c74c
authored
Jul 08, 2021
by
Trần Ngọc Nam Anh
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Finish Signup, Change Password
parent
70e03924
Changes
7
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
429 additions
and
218 deletions
+429
-218
src/HomePage.js
src/HomePage.js
+7
-1
src/reoutes.js
src/reoutes.js
+3
-1
src/services/ForgotPassword.js
src/services/ForgotPassword.js
+118
-76
src/services/ResetPassword.js
src/services/ResetPassword.js
+155
-83
src/services/Signin.js
src/services/Signin.js
+9
-5
src/services/Signup.js
src/services/Signup.js
+37
-6
src/services/VerifyCode.js
src/services/VerifyCode.js
+100
-46
No files found.
src/HomePage.js
View file @
f1c7c74c
...
@@ -22,6 +22,9 @@ import Signin from "./services/Signin";
...
@@ -22,6 +22,9 @@ import Signin from "./services/Signin";
import
Signup
from
"
services/Signup
"
;
import
Signup
from
"
services/Signup
"
;
import
{
authServices
}
from
"
./services/AuthServices
"
;
import
{
authServices
}
from
"
./services/AuthServices
"
;
import
{
Routes
}
from
"
reoutes
"
;
import
{
Routes
}
from
"
reoutes
"
;
import
VerifyCode
from
"
services/VerifyCode
"
;
import
ForgotPassword
from
"
services/ForgotPassword
"
;
import
ResetPassword
from
"
services/ResetPassword
"
;
// import { Routes } from "./reoutes";
// import { Routes } from "./reoutes";
const
RouteWithLoader
=
({
component
:
Component
,
...
rest
})
=>
{
const
RouteWithLoader
=
({
component
:
Component
,
...
rest
})
=>
{
...
@@ -33,7 +36,10 @@ const RouteWithLoader = ({ component: Component, ...rest }) => {
...
@@ -33,7 +36,10 @@ const RouteWithLoader = ({ component: Component, ...rest }) => {
export default () => (
export default () => (
<Switch>
<Switch>
<Route exact path="/login-page" component={Signin} />
<Route exact path="/login-page" component={Signin} />
<Route exact path="/signup" component={Signup} />
<Route exact path="/verify-code" component={VerifyCode} />
<Route exact path="/forgot-password" component={ForgotPassword} />
<Route exact path="/reset-password" component={ResetPassword} />
<RouteWithLoader exact path="/" component={SearchProfile} />
<RouteWithLoader exact path="/" component={SearchProfile} />
<RouteWithLoader exact path="/profile" component={SearchProfile} />
<RouteWithLoader exact path="/profile" component={SearchProfile} />
<RouteWithLoader exact path="/profile/add" component={AddProfile} />
<RouteWithLoader exact path="/profile/add" component={AddProfile} />
...
...
src/reoutes.js
View file @
f1c7c74c
export
const
Routes
=
{
export
const
Routes
=
{
SearchDetail
:
{
path
:
"
./profile
"
},
SearchDetail
:
{
path
:
"
./profile
"
},
TraceCode
:
{
path
:
"
./trace-code
"
},
TraceCode
:
{
path
:
"
./trace-code
"
},
Signin
:
{
path
:
"
./
signin
"
},
Signin
:
{
path
:
"
./
login-page
"
},
Signup
:
{
path
:
"
./signup
"
},
Signup
:
{
path
:
"
./signup
"
},
ForgotPassword
:
{
path
:
"
./forgot-password
"
},
ResetPassword
:
{
path
:
"
./reset-password
"
},
Home
:
{
path
:
""
}
Home
:
{
path
:
""
}
}
}
\ No newline at end of file
src/services/ForgotPassword.js
View file @
f1c7c74c
import
React
,
{
useState
}
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
import
{
Col
,
Alert
,
Row
,
Form
,
Card
,
Button
,
Button
,
Container
,
Card
,
CardBody
,
FormGroup
,
Form
,
FormFeedback
,
Input
,
InputGroupAddon
,
InputGroupText
,
InputGroup
,
InputGroup
,
Alert
,
Container
,
Spinner
Row
,
}
from
"
@themesberg/react-bootstrap
"
;
Col
,
Spinner
,
CardHeader
}
from
"
reactstrap
"
;
import
{
Link
,
useHistory
}
from
"
react-router-dom
"
;
import
{
Link
,
useHistory
}
from
"
react-router-dom
"
;
import
{
Routes
}
from
"
../routes
"
;
// core components
import
BgImage
from
"
../assets/img/illustrations/signin.svg
"
;
import
DemoNavbar
from
"
components/Navbars/DemoNavbar.js
"
;
import
{
authServices
,
validateEmail
}
from
"
./AuthServices
"
;
import
SimpleFooter
from
"
components/Footers/SimpleFooter.js
"
;
import
{
Routes
}
from
"
../reoutes
"
;
import
{
authServices
}
from
"
./AuthServices
"
;
import
{
validateEmail
}
from
"
constans
"
;
export
default
()
=>
{
export
default
()
=>
{
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
loading
,
setLoading
]
=
useState
(
false
);
...
@@ -49,60 +60,91 @@ export default () => {
...
@@ -49,60 +60,91 @@ export default () => {
}
}
return
(
return
(
<>
<
DemoNavbar
/>
<
main
>
<
main
>
<
section
className
=
"
vh-lg-100 mt-4 mt-lg-0 bg-soft d-flex align-items-center
"
>
<
section
className
=
"
section section-shaped section-lg
"
>
<
Container
>
<
div
className
=
"
shape shape-style-1 bg-gradient-default
"
>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
/div
>
<
Container
className
=
"
pt-lg-7
"
>
{
showMessage
?
(
<
div
className
=
"
text-center
"
><
Alert
className
=
"
px-lg-5
"
color
=
"
danger
"
>
{
errorMessage
}
<
/Alert></
div
>
)
:
(
false
)}
{
loading
?
(
{
loading
?
(
<
div
className
=
"
text-center mb-2
"
>
<
div
className
=
"
text-center mb-3
"
>
<
Spinner
animation
=
"
border
"
variant
=
"
secondary
"
role
=
"
status
"
/>
<
Spinner
color
=
"
primary
"
/>
<
/div
>
<
/div
>
)
:
(
)
:
(
false
false
)}
)}
<
div
className
=
"
text-center
"
><
Alert
show
=
{
showMessage
}
variant
=
"
danger
"
>
{
errorMessage
}
<
/Alert></
div
>
<
Row
className
=
"
justify-content-center
"
>
<
Row
className
=
"
justify-content-center form-bg-image
"
style
=
{{
backgroundImage
:
`url(
${
BgImage
}
)`
}}
>
<
Col
lg
=
{
5
}
>
<
Col
<
Card
className
=
"
bg-secondary shadow border-0
"
>
xs
=
{
12
}
<
CardHeader
>
className
=
"
d-flex align-items-center justify-content-center
"
<
h5
className
=
"
text-center text-primary
"
>
Password
recovery
<
/h5
>
>
<
/CardHeader
>
<
div
className
=
"
signin-inner my-3 my-lg-0 bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500
"
>
<
CardBody
className
=
"
px-lg-5 py-lg-5
"
>
<
h3
>
Forgot
your
password
?
<
/h3
>
<
Form
role
=
"
form
"
onSubmit
=
{
onHandleForgotPassword
}
>
<
Form
onSubmit
=
{
onHandleForgotPassword
}
>
<
div
className
=
"
mb-4
"
>
<
FormGroup
id
=
"
code
"
>
<
Form
.
Label
htmlFor
=
"
email
"
>
Your
Email
<
/Form.Label
>
<
InputGroup
className
=
"
input-group-alternative mb-3
"
>
<
InputGroup
id
=
"
email
"
>
<
InputGroupAddon
addonType
=
"
prepend
"
>
<
Form
.
Control
<
InputGroupText
>
<
i
className
=
"
ni ni-email-83
"
/>
<
/InputGroupText
>
<
/InputGroupAddon
>
<
Input
required
required
autoFocus
autoFocus
type
=
"
email
"
type
=
"
text
"
placeholder
=
"
example@company.com
"
placeholder
=
"
Your email
"
value
=
{
email
}
onChange
=
{(
e
)
=>
setEmail
(
e
.
target
.
value
)}
value
=
{
email
}
/
>
onChange
=
{(
e
)
=>
setEmail
(
e
.
target
.
value
)}
invalid
=
{
validEmail
}
/
>
<
FormFeedback
className
=
"
bg-transparent shadow-0
"
>
{
validEmail
?
"
Please input valid email
"
:
false
}
<
/FormFeedback
>
<
/InputGroup
>
<
/InputGroup
>
<
Form
.
Control
.
Feedback
<
/FormGroup
>
type
=
"
invalid
"
<
div
className
=
"
text-center
"
>
className
=
"
invalid-feedback
"
<
Button
className
=
"
mt-4
"
color
=
"
primary
"
type
=
"
submit
"
>
>
{
validEmail
?
"
Please input validate email
"
:
false
}
<
/Form.Control.Feedback
>
<
/div
>
<
Button
variant
=
"
primary
"
type
=
"
submit
"
className
=
"
w-100
"
>
Recover
password
Recover
password
<
/Button
>
<
/Button
>
<
/div
>
<
/Form
>
<
/Form
>
<
div
className
=
"
d-flex justify-content-center align-items-center mt-4
"
>
<
/CardBody
>
<
span
className
=
"
fw-normal
"
>
<
/Card
>
<
Row
className
=
"
mt-3
"
>
<
Col
className
=
"
d-flex justify-content-start align-items-center
"
>
<
small
className
=
"
text-light mr-2
"
>
No
forgot
password
?
No
forgot
password
?
<
Card
.
Link
as
=
{
Link
}
to
=
{
Routes
.
Signin
.
path
}
className
=
"
fw-bold
"
>
<
/small
>
{
` Back to sign in `
}
<
Link
<
/Card.Link
>
to
=
{
Routes
.
Signin
.
path
}
>
<
/span
>
<
small
className
=
"
text-primary
"
>
<
/div
>
Login
<
/div
>
<
/small
>
<
/Link
>
<
/Col
>
<
/Row
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
<
/Container
>
<
/Container
>
<
/section
>
<
/section
>
<
/main
>
<
/main
>
<
SimpleFooter
/>
<
/
>
);
);
};
};
src/services/ResetPassword.js
View file @
f1c7c74c
import
React
,
{
useState
}
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
FontAwesomeIcon
}
from
"
@fortawesome/react-fontawesome
"
;
import
{
faUnlockAlt
,
faFilter
}
from
"
@fortawesome/free-solid-svg-icons
"
;
import
{
Col
,
Row
,
Form
,
Card
,
Button
,
Container
,
InputGroup
,
Alert
,
Spinner
}
from
'
@themesberg/react-bootstrap
'
;
import
{
Link
,
useHistory
}
from
'
react-router-dom
'
;
import
{
Link
,
useHistory
}
from
'
react-router-dom
'
;
import
{
Routes
}
from
"
../routes
"
;
import
{
Routes
}
from
"
../reoutes
"
;
import
BgImage
from
"
../assets/img/illustrations/signin.svg
"
;
import
{
authServices
}
from
"
./AuthServices
"
;
import
{
authServices
}
from
"
./AuthServices
"
;
import
{
Alert
,
Button
,
Card
,
CardBody
,
FormGroup
,
Form
,
FormFeedback
,
Input
,
InputGroupAddon
,
InputGroupText
,
InputGroup
,
Container
,
Row
,
Col
,
Spinner
,
CardHeader
}
from
"
reactstrap
"
;
// core components
import
DemoNavbar
from
"
components/Navbars/DemoNavbar.js
"
;
import
SimpleFooter
from
"
components/Footers/SimpleFooter.js
"
;
export
default
()
=>
{
export
default
()
=>
{
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
loading
,
setLoading
]
=
useState
(
false
);
...
@@ -24,7 +42,7 @@ export default () => {
...
@@ -24,7 +42,7 @@ export default () => {
const
onHandleResetPassword
=
(
event
)
=>
{
const
onHandleResetPassword
=
(
event
)
=>
{
event
.
preventDefault
();
event
.
preventDefault
();
if
(
newPassword
===
confirmPassword
)
{
if
(
newPassword
===
confirmPassword
)
{
setLoading
(
true
);
setLoading
(
true
);
setShowMessage
(
false
);
setShowMessage
(
false
);
setCheckPassword
(
false
);
setCheckPassword
(
false
);
...
@@ -40,77 +58,131 @@ export default () => {
...
@@ -40,77 +58,131 @@ export default () => {
setLoading
(
false
);
setLoading
(
false
);
setErrorMessage
(
err
.
message
);
setErrorMessage
(
err
.
message
);
});
});
}
else
{
}
else
{
setShowMessage
(
false
);
setShowMessage
(
false
);
setCheckPassword
(
true
);
setCheckPassword
(
true
);
}
}
};
};
return
(
return
(
<>
<
DemoNavbar
/>
<
main
>
<
main
>
<
section
className
=
"
d-flex align-items-center my-5 mt-lg-6 mb-lg-5
"
>
<
section
className
=
"
section section-shaped section-lg
"
>
<
Container
>
<
div
className
=
"
shape shape-style-1 bg-gradient-default
"
>
{
loading
?
(
<
span
/>
<
div
className
=
"
text-center mb-2
"
>
<
span
/>
<
Spinner
animation
=
"
border
"
variant
=
"
secondary
"
role
=
"
status
"
/>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
/div
>
<
/div
>
<
Container
className
=
"
pt-lg-7
"
>
{
showMessage
?
(
<
div
className
=
"
text-center
"
><
Alert
className
=
"
px-lg-5
"
color
=
"
danger
"
>
{
errorMessage
}
<
/Alert></
div
>
)
:
(
)
:
(
false
false
)}
)}
<
div
className
=
"
text-center
"
><
Alert
show
=
{
showMessage
}
variant
=
"
danger
"
>
{
errorMessage
}
<
/Alert></
div
>
{
loading
?
(
<
Row
className
=
"
justify-content-center form-bg-image
"
style
=
{{
backgroundImage
:
`url(
${
BgImage
}
)`
}}
>
<
div
className
=
"
text-center mb-3
"
>
<
Col
xs
=
{
12
}
className
=
"
d-flex align-items-center justify-content-center
"
>
<
Spinner
color
=
"
primary
"
/>
<
div
className
=
"
bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500
"
>
<
div
className
=
"
text-center text-md-center mb-4 mt-md-0
"
>
<
h3
className
=
"
mb-4
"
>
Reset
password
<
/h3
>
<
/div
>
<
/div
>
<
Form
onSubmit
=
{
onHandleResetPassword
}
>
)
:
(
<
Form
.
Group
id
=
"
number
"
className
=
"
mb-4
"
>
false
<
Form
.
Label
>
Verify
Code
<
/Form.Label
>
)}
<
InputGroup
>
<
Row
className
=
"
justify-content-center
"
>
<
InputGroup
.
Text
>
<
Col
lg
=
{
5
}
>
<
FontAwesomeIcon
icon
=
{
faFilter
}
/
>
<
Card
className
=
"
bg-secondary shadow border-0
"
>
<
/InputGroup.Text
>
<
CardHeader
>
<
Form
.
Control
type
=
"
number
"
placeholder
=
"
Verify Code
"
min
=
{
0
}
value
=
{
code
}
onChange
=
{(
e
)
=>
setCode
(
e
.
target
.
value
)}
/
>
<
h5
className
=
"
text-center text-primary
"
>
Password
reset
<
/h5
>
<
/CardHeader
>
<
CardBody
className
=
"
px-lg-5 py-lg-5
"
>
<
Form
role
=
"
form
"
onSubmit
=
{
onHandleResetPassword
}
>
<
FormGroup
id
=
"
code
"
>
<
InputGroup
className
=
"
input-group-alternative mb-3
"
>
<
InputGroupAddon
addonType
=
"
prepend
"
>
<
InputGroupText
>
<
i
className
=
"
ni ni-lock-circle-open
"
/>
<
/InputGroupText
>
<
/InputGroupAddon
>
<
Input
placeholder
=
"
Verify Code
"
type
=
"
number
"
min
=
{
0
}
value
=
{
code
}
onChange
=
{(
e
)
=>
setCode
(
e
.
target
.
value
)}
/
>
<
/InputGroup
>
<
/InputGroup
>
<
/Form.Group
>
<
/FormGroup
>
<
Form
.
Group
id
=
"
password
"
className
=
"
mb-4
"
>
<
Form
.
Label
>
Your
Password
<
/Form.Label
>
<
FormGroup
id
=
"
password
"
>
<
InputGroup
>
<
InputGroup
className
=
"
input-group-alternative mb-3
"
>
<
InputGroup
.
Text
>
<
InputGroupAddon
addonType
=
"
prepend
"
>
<
FontAwesomeIcon
icon
=
{
faUnlockAlt
}
/
>
<
InputGroupText
>
<
/InputGroup.Text
>
<
i
className
=
"
ni ni-lock-circle-open
"
/>
<
Form
.
Control
required
type
=
"
password
"
placeholder
=
"
Password
"
autoComplete
=
"
on
"
value
=
{
newPassword
}
onChange
=
{(
e
)
=>
setNewPassword
(
e
.
target
.
value
)}
/
>
<
/InputGroupText
>
<
/InputGroupAddon
>
<
Input
required
type
=
"
password
"
placeholder
=
"
Password
"
autoComplete
=
"
on
"
value
=
{
newPassword
}
onChange
=
{(
e
)
=>
setNewPassword
(
e
.
target
.
value
)}
invalid
=
{
checkPassword
}
/
>
<
/InputGroup
>
<
/InputGroup
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
className
=
"
invalid-feedback
"
>
{
checkPassword
?
"
Please input match password
"
:
false
}
<
/Form.Control.Feedback
>
<
/FormGroup
>
<
/Form.Group
>
<
Form
.
Group
id
=
"
confirmPassword
"
className
=
"
mb-4
"
>
<
FormGroup
id
=
"
confirmPassword
"
>
<
Form
.
Label
>
Confirm
Password
<
/Form.Label
>
<
InputGroup
className
=
"
input-group-alternative
"
>
<
InputGroup
>
<
InputGroupAddon
addonType
=
"
prepend
"
>
<
InputGroup
.
Text
>
<
InputGroupText
>
<
FontAwesomeIcon
icon
=
{
faUnlockAlt
}
/
>
<
i
className
=
"
ni ni-lock-circle-open
"
/>
<
/InputGroup.Text
>
<
/InputGroupText
>
<
Form
.
Control
required
type
=
"
password
"
placeholder
=
"
Confirm Password
"
autoComplete
=
"
on
"
value
=
{
confirmPassword
}
onChange
=
{(
e
)
=>
setConfirmPassword
(
e
.
target
.
value
)}
/
>
<
/InputGroupAddon
>
<
Input
required
type
=
"
password
"
placeholder
=
"
Confirm Password
"
autoComplete
=
"
on
"
value
=
{
confirmPassword
}
onChange
=
{(
e
)
=>
setConfirmPassword
(
e
.
target
.
value
)}
invalid
=
{
checkPassword
}
/
>
<
FormFeedback
>
{
checkPassword
?
"
Please input match password
"
:
false
}
<
/FormFeedback
>
<
/InputGroup
>
<
/InputGroup
>
<
Form
.
Control
.
Feedback
type
=
"
invalid
"
className
=
"
invalid-feedback
"
>
{
checkPassword
?
"
Please input match password
"
:
false
}
<
/Form.Control.Feedback
>
<
/FormGroup
>
<
/Form.Group
>
<
div
className
=
"
text-center
"
>
<
Button
variant
=
"
primary
"
type
=
"
submit
"
className
=
"
w-100
"
>
<
Button
className
=
"
mt-4
"
color
=
"
primary
"
type
=
"
submit
"
>
Reset
password
Reset
password
<
/Button
>
<
/Button
>
<
/div
>
<
/Form
>
<
/Form
>
<
div
className
=
"
d-flex justify-content-center align-items-center mt-4
"
>
<
/CardBody
>
<
span
className
=
"
fw-normal
"
>
<
/Card
>
<
Row
className
=
"
mt-3
"
>
<
Col
className
=
"
d-flex justify-content-start align-items-center
"
>
<
small
className
=
"
text-light mr-2
"
>
Not
reset
?
Not
reset
?
<
Card
.
Link
as
=
{
Link
}
to
=
{
Routes
.
ForgotPassword
.
path
}
className
=
"
fw-bold
"
>
<
/small
>
{
` Back to forgot password `
}
<
Link
<
/Card.Link
>
to
=
{
Routes
.
ForgotPassword
.
path
}
>
<
/span
>
<
small
className
=
"
text-primary
"
>
<
/div
>
Back
to
forgot
password
<
/div
>
<
/small
>
<
/Link
>
<
/Col
>
<
/Row
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
<
/Container
>
<
/Container
>
<
/section
>
<
/section
>
<
/main
>
<
/main
>
<
SimpleFooter
/>
<
/
>
);
);
};
};
src/services/Signin.js
View file @
f1c7c74c
...
@@ -10,6 +10,7 @@ import {
...
@@ -10,6 +10,7 @@ import {
Button
,
Button
,
Card
,
Card
,
CardBody
,
CardBody
,
CardHeader
,
FormGroup
,
FormGroup
,
Form
,
Form
,
FormFeedback
,
FormFeedback
,
...
@@ -24,9 +25,9 @@ import {
...
@@ -24,9 +25,9 @@ import {
}
from
"
reactstrap
"
;
}
from
"
reactstrap
"
;
// core components
// core components
import
DemoNavbar
from
"
components/Navbars/DemoNavbar.js
"
;
//
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import
SimpleFooter
from
"
components/Footers/SimpleFooter.js
"
;
//
import SimpleFooter from "components/Footers/SimpleFooter.js";
import
MainBanner
from
"
components/Generals/MainBanner
"
;
//
import MainBanner from "components/Generals/MainBanner";
export
default
()
=>
{
export
default
()
=>
{
...
@@ -88,7 +89,7 @@ export default () => {
...
@@ -88,7 +89,7 @@ export default () => {
<
main
>
<
main
>
{
/* <MainBanner /> */
}
{
/* <MainBanner /> */
}
<
section
className
=
"
section section-shaped section-
lg
"
>
<
section
className
=
"
section section-shaped section-
xl
"
>
<
div
className
=
"
shape shape-style-1 bg-gradient-default
"
>
<
div
className
=
"
shape shape-style-1 bg-gradient-default
"
>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
...
@@ -115,6 +116,9 @@ export default () => {
...
@@ -115,6 +116,9 @@ export default () => {
<
Row
className
=
"
justify-content-center
"
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
lg
=
"
5
"
>
<
Col
lg
=
"
5
"
>
<
Card
className
=
"
bg-secondary shadow border-0
"
>
<
Card
className
=
"
bg-secondary shadow border-0
"
>
<
CardHeader
>
<
h5
className
=
"
text-center text-primary
"
>
Sign
in
<
/h5
>
<
/CardHeader
>
<
CardBody
className
=
"
px-lg-5 py-lg-5
"
>
<
CardBody
className
=
"
px-lg-5 py-lg-5
"
>
<
Form
role
=
"
form
"
onSubmit
=
{
onHandleLogin
}
>
<
Form
role
=
"
form
"
onSubmit
=
{
onHandleLogin
}
>
<
FormGroup
id
=
"
email
"
className
=
"
mb-3
"
>
<
FormGroup
id
=
"
email
"
className
=
"
mb-3
"
>
...
@@ -161,7 +165,7 @@ export default () => {
...
@@ -161,7 +165,7 @@ export default () => {
<
Row
className
=
"
mt-3
"
>
<
Row
className
=
"
mt-3
"
>
<
Col
xs
=
"
6
"
>
<
Col
xs
=
"
6
"
>
<
Link
<
Link
to
=
{
Routes
.
Signup
.
path
}
to
=
{
Routes
.
ForgotPassword
.
path
}
className
=
"
text-light
"
>
className
=
"
text-light
"
>
<
small
>
Forgot
password
?
<
/small
>
<
small
>
Forgot
password
?
<
/small
>
<
/Link
>
<
/Link
>
...
...
src/services/Signup.js
View file @
f1c7c74c
...
@@ -7,9 +7,11 @@ import { authServices } from "./AuthServices";
...
@@ -7,9 +7,11 @@ import { authServices } from "./AuthServices";
import
{
validateEmail
}
from
"
../constans/index
"
;
import
{
validateEmail
}
from
"
../constans/index
"
;
import
{
import
{
Alert
,
Button
,
Button
,
Card
,
Card
,
CardBody
,
CardBody
,
CardHeader
,
FormGroup
,
FormGroup
,
Form
,
Form
,
FormFeedback
,
FormFeedback
,
...
@@ -19,7 +21,8 @@ import {
...
@@ -19,7 +21,8 @@ import {
InputGroup
,
InputGroup
,
Container
,
Container
,
Row
,
Row
,
Col
Col
,
Spinner
}
from
"
reactstrap
"
;
}
from
"
reactstrap
"
;
// core components
// core components
...
@@ -59,7 +62,7 @@ export default () => {
...
@@ -59,7 +62,7 @@ export default () => {
authServices
authServices
.
signUp
(
email
,
password
)
.
signUp
(
email
,
password
)
.
then
((
rs
)
=>
{
.
then
((
rs
)
=>
{
history
.
push
(
Routes
.
VerifyCode
.
path
);
history
.
push
(
"
/verify-code
"
);
setShowMessage
(
false
);
setShowMessage
(
false
);
setLoading
(
false
);
setLoading
(
false
);
})
})
...
@@ -87,9 +90,24 @@ export default () => {
...
@@ -87,9 +90,24 @@ export default () => {
<
span
/>
<
span
/>
<
/div
>
<
/div
>
<
Container
className
=
"
pt-lg-7
"
>
<
Container
className
=
"
pt-lg-7
"
>
{
showMessage
?
(
<
div
className
=
"
text-center
"
><
Alert
className
=
"
px-lg-5
"
color
=
"
danger
"
>
{
errorMessage
}
<
/Alert></
div
>
)
:
(
false
)}
{
loading
?
(
<
div
className
=
"
text-center mb-3
"
>
<
Spinner
color
=
"
primary
"
/>
<
/div
>
)
:
(
false
)}
<
Row
className
=
"
justify-content-center
"
>
<
Row
className
=
"
justify-content-center
"
>
<
Col
lg
=
"
5
"
>
<
Col
lg
=
{
5
}
>
<
Card
className
=
"
bg-secondary shadow border-0
"
>
<
Card
className
=
"
bg-secondary shadow border-0
"
>
<
CardHeader
>
<
h5
className
=
"
text-center text-primary
"
>
Sign
up
<
/h5
>
<
/CardHeader
>
<
CardBody
className
=
"
px-lg-5 py-lg-5
"
>
<
CardBody
className
=
"
px-lg-5 py-lg-5
"
>
<
Form
role
=
"
form
"
onSubmit
=
{
onHandleSignUp
}
>
<
Form
role
=
"
form
"
onSubmit
=
{
onHandleSignUp
}
>
...
@@ -100,8 +118,13 @@ export default () => {
...
@@ -100,8 +118,13 @@ export default () => {
<
i
className
=
"
ni ni-email-83
"
/>
<
i
className
=
"
ni ni-email-83
"
/>
<
/InputGroupText
>
<
/InputGroupText
>
<
/InputGroupAddon
>
<
/InputGroupAddon
>
<
Input
placeholder
=
"
Email
"
type
=
"
text
"
{...
validEmail
?
"
invalid
"
:
""
}
/
>
<
Input
<
FormFeedback
>
Invalid
email
<
/FormFeedback
>
placeholder
=
"
Email
"
type
=
"
text
"
value
=
{
email
}
onChange
=
{(
e
)
=>
setEmail
(
e
.
target
.
value
)}
invalid
=
{
validEmail
}
/
>
<
FormFeedback
className
=
"
bg-transparent shadow-0
"
>
{
validEmail
?
"
Please input validate email
"
:
false
}
<
/FormFeedback
>
<
/InputGroup
>
<
/InputGroup
>
<
/FormGroup
>
<
/FormGroup
>
...
@@ -112,7 +135,12 @@ export default () => {
...
@@ -112,7 +135,12 @@ export default () => {
<
i
className
=
"
ni ni-lock-circle-open
"
/>
<
i
className
=
"
ni ni-lock-circle-open
"
/>
<
/InputGroupText
>
<
/InputGroupText
>
<
/InputGroupAddon
>
<
/InputGroupAddon
>
<
Input
placeholder
=
"
Password
"
type
=
"
password
"
autoComplete
=
"
off
"
/>
<
Input
placeholder
=
"
Password
"
type
=
"
password
"
autoComplete
=
"
off
"
value
=
{
password
}
onChange
=
{(
e
)
=>
setPassword
(
e
.
target
.
value
)}
/
>
<
/InputGroup
>
<
/InputGroup
>
<
/FormGroup
>
<
/FormGroup
>
...
@@ -127,7 +155,10 @@ export default () => {
...
@@ -127,7 +155,10 @@ export default () => {
placeholder
=
"
Confirm Password
"
placeholder
=
"
Confirm Password
"
type
=
"
password
"
type
=
"
password
"
autoComplete
=
"
off
"
autoComplete
=
"
off
"
value
=
{
confirmPassword
}
onChange
=
{(
e
)
=>
setConfirmPassword
(
e
.
target
.
value
)}
/
>
/
>
<
FormFeedback
>
{
checkPassword
?
"
Please input match password
"
:
false
}
<
/FormFeedback
>
<
/InputGroup
>
<
/InputGroup
>
<
/FormGroup
>
<
/FormGroup
>
<
div
className
=
"
text-center
"
>
<
div
className
=
"
text-center
"
>
...
...
src/services/VerifyCode.js
View file @
f1c7c74c
import
React
,
{
useState
}
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
FontAwesomeIcon
}
from
"
@fortawesome/react-fontawesome
"
;
import
{
faFilter
,
faAngleLeft
}
from
"
@fortawesome/free-solid-svg-icons
"
;
import
{
Col
,
Row
,
Form
,
Button
,
Container
,
InputGroup
,
Card
,
Alert
,
Spinner
}
from
'
@themesberg/react-bootstrap
'
;
import
{
Link
,
useHistory
}
from
'
react-router-dom
'
;
import
{
Link
,
useHistory
}
from
'
react-router-dom
'
;
import
{
Routes
}
from
"
../routes
"
;
import
{
Routes
}
from
"
../reoutes
"
;
import
BgImage
from
"
../assets/img/illustrations/signin.svg
"
;
import
{
authServices
}
from
"
./AuthServices
"
;
import
{
authServices
}
from
"
./AuthServices
"
;
import
{
Alert
,
Button
,
Card
,
CardBody
,
FormGroup
,
Form
,
Input
,
InputGroupAddon
,
InputGroupText
,
InputGroup
,
Container
,
Row
,
Col
,
Spinner
}
from
"
reactstrap
"
;
// core components
import
DemoNavbar
from
"
components/Navbars/DemoNavbar.js
"
;
import
SimpleFooter
from
"
components/Footers/SimpleFooter.js
"
;
export
default
()
=>
{
export
default
()
=>
{
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
code
,
setCode
]
=
useState
(
""
);
const
[
code
,
setCode
]
=
useState
(
""
);
...
@@ -36,47 +53,84 @@ export default () => {
...
@@ -36,47 +53,84 @@ export default () => {
};
};
return
(
return
(
<>
<
DemoNavbar
/>
<
main
>
<
main
>
<
section
className
=
"
d-flex align-items-center my-5 mt-lg-6 mb-lg-5
"
>
<
section
className
=
"
section section-shaped section-lg
"
>
<
Container
>
<
div
className
=
"
shape shape-style-1 bg-gradient-default
"
>
{
loading
?
(
<
span
/>
<
div
className
=
"
text-center mb-2
"
>
<
span
/>
<
Spinner
animation
=
"
border
"
variant
=
"
secondary
"
role
=
"
status
"
/>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
span
/>
<
/div
>
<
/div
>
<
Container
className
=
"
pt-lg-7
"
>
{
showMessage
?
(
<
div
className
=
"
text-center
"
><
Alert
className
=
"
px-lg-5
"
color
=
"
danger
"
>
{
errorMessage
}
<
/Alert></
div
>
)
:
(
)
:
(
false
false
)}
)}
<
div
className
=
"
text-center
"
><
Alert
show
=
{
showMessage
}
variant
=
"
danger
"
>
{
errorMessage
}
<
/Alert></
div
>
{
loading
?
(
<
Row
className
=
"
justify-content-center form-bg-image
"
style
=
{{
backgroundImage
:
`url(
${
BgImage
}
)`
}}
>
<
div
className
=
"
text-center mb-3
"
>
<
p
className
=
"
text-center
"
>
<
Spinner
color
=
"
primary
"
/>
<
Card
.
Link
as
=
{
Link
}
to
=
{
Routes
.
Signup
.
path
}
className
=
"
text-gray-700
"
>
<
FontAwesomeIcon
icon
=
{
faAngleLeft
}
className
=
"
me-2
"
/>
Back
to
sign
up
<
/Card.Link
>
<
/p
>
<
Col
xs
=
{
12
}
className
=
"
d-flex align-items-center justify-content-center
"
>
<
div
className
=
"
bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500
"
>
<
div
className
=
"
text-center text-md-center mb-4 mt-md-0
"
>
<
h3
className
=
"
mb-0
"
>
Verify
Code
<
/h3
>
<
/div
>
<
/div
>
<
Form
className
=
"
mt-4
"
onSubmit
=
{
onHandleVerifyCode
}
>
)
:
(
<
Form
.
Group
id
=
"
code
"
className
=
"
mb-4
"
>
false
<
Form
.
Label
>
Verify
Code
<
/Form.Label
>
)}
<
InputGroup
>
<
Row
className
=
"
justify-content-center
"
>
<
InputGroup
.
Text
>
<
Col
lg
=
{
5
}
>
<
FontAwesomeIcon
icon
=
{
faFilter
}
/
>
<
Card
className
=
"
bg-secondary shadow border-0
"
>
<
/InputGroup.Text
>
<
CardBody
className
=
"
px-lg-5 py-lg-5
"
>
<
Form
.
Control
autoFocus
required
type
=
"
number
"
placeholder
=
"
Verify Code
"
min
=
{
0
}
value
=
{
code
}
onChange
=
{(
e
)
=>
setCode
(
e
.
target
.
value
)}
/
>
<
Form
role
=
"
form
"
onSubmit
=
{
onHandleVerifyCode
}
>
<
FormGroup
id
=
"
code
"
>
<
InputGroup
className
=
"
input-group-alternative mb-3
"
>
<
InputGroupAddon
addonType
=
"
prepend
"
>
<
InputGroupText
>
<
i
className
=
"
ni ni-lock-circle-open
"
/>
<
/InputGroupText
>
<
/InputGroupAddon
>
<
Input
autoFocus
required
type
=
"
number
"
placeholder
=
"
Verify Code
"
min
=
{
0
}
value
=
{
code
}
onChange
=
{(
e
)
=>
setCode
(
e
.
target
.
value
)}
/
>
<
/InputGroup
>
<
/InputGroup
>
<
/Form.Group
>
<
/FormGroup
>
<
Button
variant
=
"
primary
"
type
=
"
submit
"
className
=
"
w-100
"
>
<
div
className
=
"
text-center
"
>
<
Button
className
=
"
mt-4
"
color
=
"
primary
"
type
=
"
submit
"
>
Verify
Verify
<
/Button
>
<
/Button
>
<
/Form
>
<
/div
>
<
/div
>
<
/Form
>
<
/CardBody
>
<
/Card
>
<
Row
className
=
"
mt-3
"
>
<
Col
className
=
"
d-flex justify-content-start align-items-center
"
>
<
Link
to
=
{
Routes
.
Signup
.
path
}
>
<
small
className
=
"
text-primary
"
>
Back
to
sign
up
<
/small
>
<
/Link
>
<
/Col
>
<
/Row
>
<
/Col
>
<
/Col
>
<
/Row
>
<
/Row
>
<
/Container
>
<
/Container
>
<
/section
>
<
/section
>
<
/main
>
<
/main
>
<
SimpleFooter
/>
<
/
>
);
);
};
};
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment