Skip to content

A
Aqbits Trace Code
Commit f1c7c74c authored by Trần Ngọc Nam Anh's avatar Trần Ngọc Nam Anh
Browse files
Options

Finish Signup, Change Password

parent 70e03924
Hide whitespace changes
Inline Side-by-side
Showing with 429 additions and 218 deletions
src/HomePage.js
View file @ f1c7c74c
......@@ -22,6 +22,9 @@ import Signin from "./services/Signin";
import Signup from "services/Signup";
import { authServices } from "./services/AuthServices";
import { Routes } from "reoutes";
import VerifyCode from "services/VerifyCode";
import ForgotPassword from "services/ForgotPassword";
import ResetPassword from "services/ResetPassword";
// import { Routes } from "./reoutes";
const RouteWithLoader = ({ component: Component, ...rest }) => {
......@@ -33,7 +36,10 @@ const RouteWithLoader = ({ component: Component, ...rest }) => {
export default () => (
<Switch>
<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="/profile" component={SearchProfile} />
<RouteWithLoader exact path="/profile/add" component={AddProfile} />
......
src/reoutes.js
View file @ f1c7c74c
export const Routes = {
SearchDetail: { path: "./profile" },
TraceCode: { path: "./trace-code" },
Signin: { path: "./signin" },
Signin: { path: "./login-page" },
Signup: { path: "./signup" },
ForgotPassword: { path: "./forgot-password" },
ResetPassword: {path: "./reset-password"},
Home: { path: "" }
}
\ No newline at end of file
src/services/ForgotPassword.js
View file @ f1c7c74c
import React, { useState } from "react";
import {
Col,
Row,
Form,
Card,
Alert,
Button,
Container,
Card,
CardBody,
FormGroup,
Form,
FormFeedback,
Input,
InputGroupAddon,
InputGroupText,
InputGroup,
Alert,
Spinner
} from "@themesberg/react-bootstrap";
Container,
Row,
Col,
Spinner,
CardHeader
} from "reactstrap";
import { Link, useHistory } from "react-router-dom";
import { Routes } from "../routes";
import BgImage from "../assets/img/illustrations/signin.svg";
import { authServices, validateEmail } from "./AuthServices";
// core components
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
import { Routes } from "../reoutes";
import { authServices } from "./AuthServices";
import { validateEmail } from "constans";
export default () => {
const [loading, setLoading] = useState(false);
......@@ -31,17 +42,17 @@ export default () => {
setShowMessage(false);
setValidEmail(false);
authServices
.forgotPassword(email)
.then((rs) => {
history.push(Routes.ResetPassword.path);
setShowMessage(false);
setLoading(false);
})
.catch((err) => {
setShowMessage(true);
setLoading(false);
setErrorMessage(err.message);
});
.forgotPassword(email)
.then((rs) => {
history.push(Routes.ResetPassword.path);
setShowMessage(false);
setLoading(false);
})
.catch((err) => {
setShowMessage(true);
setLoading(false);
setErrorMessage(err.message);
});
} else {
setShowMessage(false);
setValidEmail(true);
......@@ -49,60 +60,91 @@ export default () => {
}
return (
<main>
<section className="vh-lg-100 mt-4 mt-lg-0 bg-soft d-flex align-items-center">
<Container>
{loading ? (
<div className="text-center mb-2">
<Spinner animation="border" variant="secondary" role="status" />
</div>
) : (
false
)}
<div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div>
<Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}>
<Col
xs={12}
className="d-flex align-items-center justify-content-center"
>
<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">
<h3>Forgot your password?</h3>
<Form onSubmit={onHandleForgotPassword}>
<div className="mb-4">
<Form.Label htmlFor="email">Your Email</Form.Label>
<InputGroup id="email">
<Form.Control
required
autoFocus
type="email"
placeholder="example@company.com"
value={email} onChange={(e) => setEmail(e.target.value)}
/>
</InputGroup>
<Form.Control.Feedback
type="invalid"
className="invalid-feedback"
>
{validEmail ? "Please input validate email" : false}
</Form.Control.Feedback>
</div>
<Button variant="primary" type="submit" className="w-100">
Recover password
</Button>
</Form>
<div className="d-flex justify-content-center align-items-center mt-4">
<span className="fw-normal">
No forgot password?
<Card.Link as={Link} to={Routes.Signin.path} className="fw-bold">
{` Back to sign in `}
</Card.Link>
</span>
</div>
<>
<DemoNavbar />
<main>
<section className="section section-shaped section-lg">
<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 ? (
<div className="text-center mb-3">
<Spinner color="primary" />
</div>
</Col>
</Row>
</Container>
</section>
</main>
) : (
false
)}
<Row className="justify-content-center">
<Col lg={5}>
<Card className="bg-secondary shadow border-0">
<CardHeader>
<h5 className="text-center text-primary">Password recovery</h5>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
<Form role="form" onSubmit={onHandleForgotPassword}>
<FormGroup id="code">
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
required
autoFocus
type="text"
placeholder="Your email"
value={email}
onChange={(e) => setEmail(e.target.value)}
invalid={validEmail} />
<FormFeedback className="bg-transparent shadow-0">{validEmail ? "Please input valid email" : false}</FormFeedback>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button
className="mt-4"
color="primary"
type="submit"
>
Recover password
</Button>
</div>
</Form>
</CardBody>
</Card>
<Row className="mt-3">
<Col className="d-flex justify-content-start align-items-center">
<small className="text-light mr-2">
No forgot password?
</small>
<Link
to={Routes.Signin.path}>
<small className="text-primary">
Login
</small>
</Link>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
};
src/services/ResetPassword.js
View file @ f1c7c74c
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 { Routes } from "../routes";
import BgImage from "../assets/img/illustrations/signin.svg";
import { Routes } from "../reoutes";
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 () => {
const [loading, setLoading] = useState(false);
const [code, setCode] = useState("");
const [newPassword, setNewPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [checkPassword, setCheckPassword] = useState(false);
const [showMessage, setShowMessage] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
......@@ -24,93 +42,147 @@ export default () => {
const onHandleResetPassword = (event) => {
event.preventDefault();
if(newPassword === confirmPassword){
if (newPassword === confirmPassword) {
setLoading(true);
setShowMessage(false);
setCheckPassword(false);
authServices
.resetPassword(code, newPassword)
.then((rs) => {
history.push(Routes.Signin.path);
setShowMessage(false);
setLoading(false);
})
.catch((err) => {
setShowMessage(true);
setLoading(false);
setErrorMessage(err.message);
});
}else{
.resetPassword(code, newPassword)
.then((rs) => {
history.push(Routes.Signin.path);
setShowMessage(false);
setLoading(false);
})
.catch((err) => {
setShowMessage(true);
setLoading(false);
setErrorMessage(err.message);
});
} else {
setShowMessage(false);
setCheckPassword(true);
}
};
return (
<main>
<section className="d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
<Container>
{loading ? (
<div className="text-center mb-2">
<Spinner animation="border" variant="secondary" role="status" />
</div>
) : (
false
)}
<div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div>
<Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}>
<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-4">Reset password</h3>
</div>
<Form onSubmit={onHandleResetPassword}>
<Form.Group id="number" className="mb-4">
<Form.Label>Verify Code</Form.Label>
<InputGroup>
<InputGroup.Text>
<FontAwesomeIcon icon={faFilter} />
</InputGroup.Text>
<Form.Control type="number" placeholder="Verify Code" min={0} value={code} onChange={(e) => setCode(e.target.value)} />
</InputGroup>
</Form.Group>
<Form.Group id="password" className="mb-4">
<Form.Label>Your Password</Form.Label>
<InputGroup>
<InputGroup.Text>
<FontAwesomeIcon icon={faUnlockAlt} />
</InputGroup.Text>
<Form.Control required type="password" placeholder="Password" autoComplete="on" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
</InputGroup>
<Form.Control.Feedback type="invalid" className="invalid-feedback" >{checkPassword ? "Please input match password" : false}</Form.Control.Feedback>
</Form.Group>
<Form.Group id="confirmPassword" className="mb-4">
<Form.Label>Confirm Password</Form.Label>
<InputGroup>
<InputGroup.Text>
<FontAwesomeIcon icon={faUnlockAlt} />
</InputGroup.Text>
<Form.Control required type="password" placeholder="Confirm Password" autoComplete="on" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
</InputGroup>
<Form.Control.Feedback type="invalid" className="invalid-feedback" >{checkPassword ? "Please input match password" : false}</Form.Control.Feedback>
</Form.Group>
<Button variant="primary" type="submit" className="w-100">
Reset password
</Button>
</Form>
<div className="d-flex justify-content-center align-items-center mt-4">
<span className="fw-normal">
Not reset?
<Card.Link as={Link} to={Routes.ForgotPassword.path} className="fw-bold">
{` Back to forgot password `}
</Card.Link>
</span>
</div>
<>
<DemoNavbar />
<main>
<section className="section section-shaped section-lg">
<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 ? (
<div className="text-center mb-3">
<Spinner color="primary" />
</div>
</Col>
</Row>
</Container>
</section>
</main>
) : (
false
)}
<Row className="justify-content-center">
<Col lg={5}>
<Card className="bg-secondary shadow border-0">
<CardHeader>
<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>
</FormGroup>
<FormGroup id="password">
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
required
type="password"
placeholder="Password"
autoComplete="on"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
invalid={checkPassword}
/>
</InputGroup>
</FormGroup>
<FormGroup id="confirmPassword">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</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>
</FormGroup>
<div className="text-center">
<Button
className="mt-4"
color="primary"
type="submit"
>
Reset password
</Button>
</div>
</Form>
</CardBody>
</Card>
<Row className="mt-3">
<Col className="d-flex justify-content-start align-items-center">
<small className="text-light mr-2">
Not reset?
</small>
<Link
to={Routes.ForgotPassword.path}>
<small className="text-primary">
Back to forgot password
</small>
</Link>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
};
src/services/Signin.js
View file @ f1c7c74c
......@@ -10,6 +10,7 @@ import {
Button,
Card,
CardBody,
CardHeader,
FormGroup,
Form,
FormFeedback,
......@@ -24,9 +25,9 @@ import {
} from "reactstrap";
// core components
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
import MainBanner from "components/Generals/MainBanner";
// import DemoNavbar from "components/Navbars/DemoNavbar.js";
// import SimpleFooter from "components/Footers/SimpleFooter.js";
// import MainBanner from "components/Generals/MainBanner";
export default () => {
......@@ -88,7 +89,7 @@ export default () => {
<main>
{/* <MainBanner /> */}
<section className="section section-shaped section-lg">
<section className="section section-shaped section-xl">
<div className="shape shape-style-1 bg-gradient-default">
<span />
<span />
......@@ -115,6 +116,9 @@ export default () => {
<Row className="justify-content-center">
<Col lg="5">
<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">
<Form role="form" onSubmit={onHandleLogin}>
<FormGroup id="email" className="mb-3">
......@@ -161,7 +165,7 @@ export default () => {
<Row className="mt-3">
<Col xs="6">
<Link
to={Routes.Signup.path}
to={Routes.ForgotPassword.path}
className="text-light">
<small>Forgot password?</small>
</Link>
......
src/services/Signup.js
View file @ f1c7c74c
......@@ -7,9 +7,11 @@ import { authServices } from "./AuthServices";
import { validateEmail } from "../constans/index";
import {
Alert,
Button,
Card,
CardBody,
CardHeader,
FormGroup,
Form,
FormFeedback,
......@@ -19,7 +21,8 @@ import {
InputGroup,
Container,
Row,
Col
Col,
Spinner
} from "reactstrap";
// core components
......@@ -59,7 +62,7 @@ export default () => {
authServices
.signUp(email, password)
.then((rs) => {
history.push(Routes.VerifyCode.path);
history.push("/verify-code");
setShowMessage(false);
setLoading(false);
})
......@@ -87,9 +90,24 @@ export default () => {
<span />
</div>
<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">
<Col lg="5">
<Col lg={5}>
<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">
<Form role="form" onSubmit={onHandleSignUp}>
......@@ -100,8 +118,13 @@ export default () => {
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Email" type="text" {...validEmail ? "invalid" : ""} />
<FormFeedback>Invalid email</FormFeedback>
<Input
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>
</FormGroup>
......@@ -112,7 +135,12 @@ export default () => {
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Password" type="password" autoComplete="off" />
<Input
placeholder="Password"
type="password"
autoComplete="off"
value={password}
onChange={(e) => setPassword(e.target.value)} />
</InputGroup>
</FormGroup>
......@@ -127,7 +155,10 @@ export default () => {
placeholder="Confirm Password"
type="password"
autoComplete="off"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
<FormFeedback>{checkPassword ? "Please input match password" : false}</FormFeedback>
</InputGroup>
</FormGroup>
<div className="text-center">
......
src/services/VerifyCode.js
View file @ f1c7c74c
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 { Routes } from "../routes";
import BgImage from "../assets/img/illustrations/signin.svg";
import { Routes } from "../reoutes";
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 () => {
const [loading, setLoading] = useState(false);
const [code, setCode] = useState("");
......@@ -36,47 +53,84 @@ export default () => {
};
return (
<main>
<section className="d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
<Container>
{loading ? (
<div className="text-center mb-2">
<Spinner animation="border" variant="secondary" role="status" />
</div>
) : (
false
)}
<div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div>
<Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}>
<p className="text-center">
<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>
<Form className="mt-4" onSubmit={onHandleVerifyCode}>
<Form.Group id="code" className="mb-4">
<Form.Label>Verify Code</Form.Label>
<InputGroup>
<InputGroup.Text>
<FontAwesomeIcon icon={faFilter} />
</InputGroup.Text>
<Form.Control autoFocus required type="number" placeholder="Verify Code" min={0} value={code} onChange={(e) => setCode(e.target.value)} />
</InputGroup>
</Form.Group>
<Button variant="primary" type="submit" className="w-100">
Verify
</Button>
</Form>
<>
<DemoNavbar />
<main>
<section className="section section-shaped section-lg">
<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 ? (
<div className="text-center mb-3">
<Spinner color="primary" />
</div>
</Col>
</Row>
</Container>
</section>
</main>
) : (
false
)}
<Row className="justify-content-center">
<Col lg={5}>
<Card className="bg-secondary shadow border-0">
<CardBody className="px-lg-5 py-lg-5">
<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>
</FormGroup>
<div className="text-center">
<Button
className="mt-4"
color="primary"
type="submit"
>
Verify
</Button>
</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>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment