Skip to content

A
Aqbits Trace Code
Commit 367360ca authored by Mai Thanh Cong's avatar Mai Thanh Cong
Browse files
Options

Merge branch 'develop/NamAnh/Login' of... 

Merge branch 'develop/NamAnh/Login' of https://gitlab.kis-v.com/congmt_kis/aqbits-trace-code into develop/change-ui
parents 55897c25 f1c7c74c
Hide whitespace changes
Inline Side-by-side
Showing with 429 additions and 218 deletions
src/HomePage.js
View file @ 367360ca
...@@ -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 @ 367360ca
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 @ 367360ca
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);
...@@ -31,17 +42,17 @@ export default () => { ...@@ -31,17 +42,17 @@ export default () => {
setShowMessage(false); setShowMessage(false);
setValidEmail(false); setValidEmail(false);
authServices authServices
.forgotPassword(email) .forgotPassword(email)
.then((rs) => { .then((rs) => {
history.push(Routes.ResetPassword.path); history.push(Routes.ResetPassword.path);
setShowMessage(false); setShowMessage(false);
setLoading(false); setLoading(false);
}) })
.catch((err) => { .catch((err) => {
setShowMessage(true); setShowMessage(true);
setLoading(false); setLoading(false);
setErrorMessage(err.message); setErrorMessage(err.message);
}); });
} else { } else {
setShowMessage(false); setShowMessage(false);
setValidEmail(true); setValidEmail(true);
...@@ -49,60 +60,91 @@ export default () => { ...@@ -49,60 +60,91 @@ export default () => {
} }
return ( return (
<main> <>
<section className="vh-lg-100 mt-4 mt-lg-0 bg-soft d-flex align-items-center"> <DemoNavbar />
<Container> <main>
{loading ? ( <section className="section section-shaped section-lg">
<div className="text-center mb-2"> <div className="shape shape-style-1 bg-gradient-default">
<Spinner animation="border" variant="secondary" role="status" /> <span />
</div> <span />
) : ( <span />
false <span />
)} <span />
<div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div> <span />
<Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}> <span />
<Col <span />
xs={12} </div>
className="d-flex align-items-center justify-content-center" <Container className="pt-lg-7">
> {showMessage ? (
<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"> <div className="text-center"><Alert className="px-lg-5" color="danger">{errorMessage}</Alert></div>
<h3>Forgot your password?</h3> ) : (
<Form onSubmit={onHandleForgotPassword}> false
<div className="mb-4"> )}
<Form.Label htmlFor="email">Your Email</Form.Label> {loading ? (
<InputGroup id="email"> <div className="text-center mb-3">
<Form.Control <Spinner color="primary" />
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>
</div> </div>
</Col> ) : (
</Row> false
</Container> )}
</section> <Row className="justify-content-center">
</main> <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 @ 367360ca
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);
const [code, setCode] = useState(""); const [code, setCode] = useState("");
const [newPassword, setNewPassword] = useState(""); const [newPassword, setNewPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState("");
const [checkPassword, setCheckPassword] = useState(false); const [checkPassword, setCheckPassword] = useState(false);
const [showMessage, setShowMessage] = useState(false); const [showMessage, setShowMessage] = useState(false);
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
...@@ -24,93 +42,147 @@ export default () => { ...@@ -24,93 +42,147 @@ 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);
authServices authServices
.resetPassword(code, newPassword) .resetPassword(code, newPassword)
.then((rs) => { .then((rs) => {
history.push(Routes.Signin.path); history.push(Routes.Signin.path);
setShowMessage(false); setShowMessage(false);
setLoading(false); setLoading(false);
}) })
.catch((err) => { .catch((err) => {
setShowMessage(true); setShowMessage(true);
setLoading(false); setLoading(false);
setErrorMessage(err.message); setErrorMessage(err.message);
}); });
}else{ } else {
setShowMessage(false); setShowMessage(false);
setCheckPassword(true); setCheckPassword(true);
} }
}; };
return ( return (
<main> <>
<section className="d-flex align-items-center my-5 mt-lg-6 mb-lg-5"> <DemoNavbar />
<Container> <main>
{loading ? ( <section className="section section-shaped section-lg">
<div className="text-center mb-2"> <div className="shape shape-style-1 bg-gradient-default">
<Spinner animation="border" variant="secondary" role="status" /> <span />
</div> <span />
) : ( <span />
false <span />
)} <span />
<div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div> <span />
<Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}> <span />
<Col xs={12} className="d-flex align-items-center justify-content-center"> <span />
<div className="bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500"> </div>
<div className="text-center text-md-center mb-4 mt-md-0"> <Container className="pt-lg-7">
<h3 className="mb-4">Reset password</h3> {showMessage ? (
</div> <div className="text-center"><Alert className="px-lg-5" color="danger">{errorMessage}</Alert></div>
<Form onSubmit={onHandleResetPassword}> ) : (
<Form.Group id="number" className="mb-4"> false
<Form.Label>Verify Code</Form.Label> )}
<InputGroup> {loading ? (
<InputGroup.Text> <div className="text-center mb-3">
<FontAwesomeIcon icon={faFilter} /> <Spinner color="primary" />
</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>
</div> </div>
</Col> ) : (
</Row> false
</Container> )}
</section> <Row className="justify-content-center">
</main> <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 @ 367360ca
...@@ -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>Đổi mật khẩu?</small> <small>Đổi mật khẩu?</small>
</Link> </Link>
......
src/services/Signup.js
View file @ 367360ca
...@@ -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 @ 367360ca
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 (
<main> <>
<section className="d-flex align-items-center my-5 mt-lg-6 mb-lg-5"> <DemoNavbar />
<Container> <main>
{loading ? ( <section className="section section-shaped section-lg">
<div className="text-center mb-2"> <div className="shape shape-style-1 bg-gradient-default">
<Spinner animation="border" variant="secondary" role="status" /> <span />
</div> <span />
) : ( <span />
false <span />
)} <span />
<div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div> <span />
<Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}> <span />
<p className="text-center"> <span />
<Card.Link as={Link} to={Routes.Signup.path} className="text-gray-700"> </div>
<FontAwesomeIcon icon={faAngleLeft} className="me-2" /> Back to sign up <Container className="pt-lg-7">
</Card.Link> {showMessage ? (
</p> <div className="text-center"><Alert className="px-lg-5" color="danger">{errorMessage}</Alert></div>
<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"> false
<div className="text-center text-md-center mb-4 mt-md-0"> )}
<h3 className="mb-0">Verify Code</h3> {loading ? (
</div> <div className="text-center mb-3">
<Form className="mt-4" onSubmit={onHandleVerifyCode}> <Spinner color="primary" />
<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>
</div> </div>
</Col> ) : (
</Row> false
</Container> )}
</section> <Row className="justify-content-center">
</main> <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