ForgotPassword

ForgotPassword.jsx

/*!

=========================================================
* Argon Design System React - v1.1.0
=========================================================

* Product Page: https://www.creative-tim.com/product/argon-design-system-react
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md)

* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/
import React, {useState} from "react";

// reactstrap components
import {
    Button,
    Card,
    CardHeader,
    CardBody,
    FormGroup,
    Form,
    Input,
    InputGroupAddon,
    InputGroupText,
    InputGroup,
    FormFeedback,
    Container,
    Row,
    Col
} from "reactstrap";

// core components
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";

// images
import GoogleImage from "assets/img/icons/common/google.svg";
import GithubImage from "assets/img/icons/common/github.svg";
import {isElementAccessExpression} from "typescript";

const ForgotPassLayout = () => {
    const [codeRequested, setCodeRequested] = useState(false)
    const [emailInput, setEmailInput] = useState('')
    const requestCode = (email) => {
        // Do some backend call (Maybe an Axios call and then switch the state)
        setEmailInput(email)
        setCodeRequested(true)
    }
    return (
        <>
            <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>
                        <Row className="justify-content-center">
                            <Col lg="5">
                                <Card className="bg-secondary shadow border-0">
                                    <CardBody className="px-lg-5 py-lg-5">
                                        {
                                            codeRequested ? <VerificationCodeForm emailInput={emailInput}/> :
                                                <ForgotPass requestCode={requestCode}/>
                                        }
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>
                    </Container>
                </section>
            </main>
            <SimpleFooter/>
        </>
    )
}

const ForgotPass = ({requestCode}) => {
    const [email, setEmail] = useState('')
    const [error, setError] = useState(null)

    const submitForm = () => {
        if(email.trim().length === 0) {
            setError('Please enter email')
        } else {
            requestCode(email)
        }
    }
    return (
        <div>
            <div className="text-center text-muted mb-4">
                <h4 className="font-weight-bold">Forgot Password</h4><br/>
                <small>Enter Email</small>
            </div>
            <Form role="form" onSubmit={submitForm}>
                <FormGroup className="mb-3">
                    <InputGroup className="input-group-alternative">
                        <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                                <i className="ni ni-email-83"/>
                            </InputGroupText>
                        </InputGroupAddon>
                        <Input invalid={!!error} placeholder="Email" type="email" defaultValue={email}
                               onChange={(e) => setEmail(e.target.value)}/>
                        <FormFeedback tooltip>{error}</FormFeedback>
                    </InputGroup>

                </FormGroup>

                <div className="text-center">
                    <Button
                        id="codeReq"
                        className="my-4"
                        color="primary"
                        type="button"
                        onClick={submitForm}
                    >
                        Request Code
                    </Button>
                </div>
            </Form>
        </div>
    )
}

const VerificationCodeForm = ({ emailInput }) => {
    return (
        <div>
            <div className="text-center text-muted mb-4">
                <h4 className="font-weight-bold">Verify Code</h4><br/>
                <small>{`Please enter the code that was sent to ${emailInput}.`}</small>
            </div>
            <Form role="form">
                <FormGroup className="mb-3">
                    <InputGroup className="input-group-alternative">
                        <Input placeholder="Verification Code" type="number"/>
                    </InputGroup>
                </FormGroup>

                <div className="text-center">
                    <Button
                        id="codeReq"
                        className="my-4"
                        color="primary"
                        type="button"
                        onClick={() => null}
                    >
                        Verify
                    </Button>
                </div>
            </Form>
        </div>
    )
}
export default ForgotPassLayout;