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
Expand all 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
This diff is collapsed.
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