QR-Code-Generator/src/components/Authentication/Auth.jsx at 50f178efda4855ea759280e6c05922d2248bddd3 · bishalde/QR-Code-Generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React, { useEffect, useState } from 'react'
import Navbar from '../Navbar/Navbar'
import { Link } from 'react-router-dom'
import { Toaster } from 'react-hot-toast'
import InputBox from './Input';

function Auth() {

    const [type, settype] = useState("sign-in");

    useEffect(() => {

    }, [])


    return (

        <>

            <Navbar />

            <section className="h-cover flex items-center justify-center">
                <Toaster />
                <form id="formElement" className="w-[80%] max-w-[400px]">
                    <h1 className="text-4xl font-gelasio capitalize text-center mb-24">
                        {type == "sign-in" ? "Welcome back" : "Join us today" }
                    </h1>

                    {
                        type != "sign-in" ?
                        <InputBox
                            name="fullname"
                            type="text"
                            placeholder="Full Name"
                            icon="fi-rr-user"
                        />
                        : ""
                    }

                    <InputBox
                        name="email"
                        type="email"
                        placeholder="Email"
                        icon="fi-rr-envelope"
                    />

                    <InputBox
                        name="password"
                        type="password"
                        placeholder="Password"
                        icon="fi-rr-key"
                    />

                    {
                        type == "sign-in" ?
                            <Link to="/forget-password">Forgot Password ?</Link>
                            : ""
                    }

                    <button
                        className="btn-dark center mt-10"
                        type="submit"
                    >
                        { type.replace("-", " ") }
                    </button>

                    <div className="relative w-full flex items-center gap-2 my-10 opacity-10 uppercase text-black font-bold">
                        <hr className="w-1/2 border-black" />
                        <p>or</p>
                        <hr className="w-1/2 border-black" />
                    </div>

                    <button className="btn-dark flex items-center justify-center gap-4 w-[90%] center">
                        {/* <img src={googleIcon} className="w-5" /> */}
                        continue with google
                    </button>

                    {

                        type == "sign-in" ?
                        <p className="mt-6 text-dark-grey text-xl text-center">
                        Don't have an account ?
                        <Link to="/signup" className="underline text-black text-xl ml-1" >
                            Join us today
                        </Link>
                        </p>
                        :
                        <p className="mt-6 text-dark-grey text-xl text-center">
                        Already a member ?
                        <Link to="/signin" className="underline text-black text-xl ml-1" >
                            Sign in here.
                        </Link>
                        </p>

                    }

                </form>
            </section>

        </>

    )

}

export default Auth