Showing
2 changed files
with
0 additions
and
131 deletions
front/src/Hooks/useSwitch.js
deleted
100644 → 0
front/src/Routes/Auth.js
deleted
100644 → 0
1 | -import React, { useState } from "react"; | ||
2 | -import styled from "styled-components"; | ||
3 | -import Input from "../Components/Input"; | ||
4 | -import Button from "../Components/Button"; | ||
5 | -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
6 | -import { | ||
7 | - faFacebook, | ||
8 | - faTwitter, | ||
9 | - faGithub, | ||
10 | - faGoogle, | ||
11 | -} from "@fortawesome/free-brands-svg-icons"; | ||
12 | - | ||
13 | -const Wrapper = styled.div` | ||
14 | - width: 100%; | ||
15 | - display: flex; | ||
16 | - flex-direction: column; | ||
17 | - justify-content: center; | ||
18 | - align-items: center; | ||
19 | -`; | ||
20 | - | ||
21 | -const Box = styled.div` | ||
22 | - display: flex; | ||
23 | -`; | ||
24 | - | ||
25 | -const TitleContainer = styled(Box)` | ||
26 | - margin-bottom: 20px; | ||
27 | -`; | ||
28 | - | ||
29 | -const Title = styled.span` | ||
30 | - font-size: 30px; | ||
31 | - font-family: "Raleway", sans-serif; | ||
32 | -`; | ||
33 | - | ||
34 | -const StateChanger = styled(Box)` | ||
35 | - margin-bottom: 15px; | ||
36 | -`; | ||
37 | - | ||
38 | -const Link = styled.span` | ||
39 | - cursor: pointer; | ||
40 | - color: #0652dd; | ||
41 | -`; | ||
42 | - | ||
43 | -const Form = styled(Box)` | ||
44 | - form { | ||
45 | - display: flex; | ||
46 | - flex-direction: column; | ||
47 | - padding: 5px 5px; | ||
48 | - margin-bottom: 15px; | ||
49 | - input { | ||
50 | - font-size: 15px; | ||
51 | - margin-bottom: 10px; | ||
52 | - &:focus { | ||
53 | - outline: none; | ||
54 | - } | ||
55 | - } | ||
56 | - button { | ||
57 | - background-color: #1b9cfc; | ||
58 | - color: white; | ||
59 | - border-radius: 10px; | ||
60 | - padding: 10px 5px; | ||
61 | - font-size: 15px; | ||
62 | - } | ||
63 | - } | ||
64 | -`; | ||
65 | - | ||
66 | -const SocialLogin = styled(Box)` | ||
67 | - display: flex; | ||
68 | - svg { | ||
69 | - &:not(:last-child) { | ||
70 | - margin-right: 20px; | ||
71 | - } | ||
72 | - } | ||
73 | - font-size: 30px; | ||
74 | - opacity: 0.8; | ||
75 | -`; | ||
76 | - | ||
77 | -export default () => { | ||
78 | - const [action, setAction] = useState("logIn"); | ||
79 | - | ||
80 | - return ( | ||
81 | - <Wrapper> | ||
82 | - <TitleContainer> | ||
83 | - <Title>KhuChat</Title> | ||
84 | - </TitleContainer> | ||
85 | - <Form> | ||
86 | - {action === "logIn" ? ( | ||
87 | - <form> | ||
88 | - <Input placeholder={"Email"} type="email" /> | ||
89 | - <Input placeholder={"Password"} type="password" /> | ||
90 | - <Button text={"Log In"} /> | ||
91 | - </form> | ||
92 | - ) : ( | ||
93 | - <form> | ||
94 | - <Input placeholder={"Email"} type="email" /> | ||
95 | - <Input placeholder={"UserName"} /> | ||
96 | - <Input placeholder={"PhoneNumber"} /> | ||
97 | - <Input placeholder={"Password"} type="password" /> | ||
98 | - <Input placeholder={"Password for validation"} type="password" /> | ||
99 | - <Button text={"Sign Up"} /> | ||
100 | - </form> | ||
101 | - )} | ||
102 | - </Form> | ||
103 | - <StateChanger> | ||
104 | - {action === "logIn" ? ( | ||
105 | - <> | ||
106 | - Don't you have an account ? | ||
107 | - <Link onClick={() => setAction("signUp")}> Sign Up </Link> | ||
108 | - </> | ||
109 | - ) : ( | ||
110 | - <> | ||
111 | - Did you have an account ? | ||
112 | - <Link onClick={() => setAction("logIn")}> Log in </Link> | ||
113 | - </> | ||
114 | - )} | ||
115 | - </StateChanger> | ||
116 | - <SocialLogin> | ||
117 | - <FontAwesomeIcon icon={faFacebook} /> | ||
118 | - <FontAwesomeIcon icon={faGoogle} /> | ||
119 | - <FontAwesomeIcon icon={faTwitter} /> | ||
120 | - <FontAwesomeIcon icon={faGithub} /> | ||
121 | - </SocialLogin> | ||
122 | - </Wrapper> | ||
123 | - ); | ||
124 | -}; |
-
Please register or login to post a comment