Showing
3 changed files
with
158 additions
and
0 deletions
front/src/Routes/Auth/AuthContainer.js
0 → 100644
1 | +import React, { useState } from "react"; | ||
2 | +import styled from "styled-components"; | ||
3 | +import { useMutation } from "@apollo/react-hooks"; | ||
4 | +import { LOGIN } from "./AuthQueries"; | ||
5 | +import Input from "../../Components/Input"; | ||
6 | +import Button from "../../Components/Button"; | ||
7 | +import useInput from "../../Hooks/useInput"; | ||
8 | +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
9 | +import { | ||
10 | + faFacebook, | ||
11 | + faTwitter, | ||
12 | + faGithub, | ||
13 | + faGoogle, | ||
14 | +} from "@fortawesome/free-brands-svg-icons"; | ||
15 | + | ||
16 | +const Wrapper = styled.div` | ||
17 | + width: 100%; | ||
18 | + display: flex; | ||
19 | + flex-direction: column; | ||
20 | + justify-content: center; | ||
21 | + align-items: center; | ||
22 | +`; | ||
23 | + | ||
24 | +const Box = styled.div` | ||
25 | + display: flex; | ||
26 | +`; | ||
27 | + | ||
28 | +const TitleContainer = styled(Box)` | ||
29 | + margin-bottom: 20px; | ||
30 | +`; | ||
31 | + | ||
32 | +const Title = styled.span` | ||
33 | + font-size: 30px; | ||
34 | + font-family: "Raleway", sans-serif; | ||
35 | +`; | ||
36 | + | ||
37 | +const StateChanger = styled(Box)` | ||
38 | + margin-bottom: 15px; | ||
39 | +`; | ||
40 | + | ||
41 | +const Link = styled.span` | ||
42 | + cursor: pointer; | ||
43 | + color: #0652dd; | ||
44 | +`; | ||
45 | + | ||
46 | +const Form = styled(Box)` | ||
47 | + form { | ||
48 | + display: flex; | ||
49 | + flex-direction: column; | ||
50 | + padding: 5px 5px; | ||
51 | + margin-bottom: 15px; | ||
52 | + input { | ||
53 | + font-size: 15px; | ||
54 | + margin-bottom: 10px; | ||
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 | + const email = useInput(""); | ||
81 | + const password = useInput(""); | ||
82 | + const password2 = useInput(""); | ||
83 | + const phoneNum = useInput(""); | ||
84 | + const username = useInput(""); | ||
85 | + const loginMutation = useMutation(LOGIN, { | ||
86 | + variables: { email: email.value, password: password.value }, | ||
87 | + }); | ||
88 | + | ||
89 | + const onSubmit = async (e) => { | ||
90 | + if (action === "logIn") { | ||
91 | + if (email.value !== "") { | ||
92 | + try { | ||
93 | + // QL 을 통해서 data 를 가져온다. | ||
94 | + const { | ||
95 | + data: { login }, // ? | ||
96 | + } = await loginMutation(); | ||
97 | + } catch (e) {} | ||
98 | + } | ||
99 | + } else if (action === "signUp") { | ||
100 | + } | ||
101 | + }; | ||
102 | + | ||
103 | + return ( | ||
104 | + <Wrapper> | ||
105 | + <TitleContainer> | ||
106 | + <Title>KhuChat</Title> | ||
107 | + </TitleContainer> | ||
108 | + <Form> | ||
109 | + {action === "logIn" ? ( | ||
110 | + <form onSubmit={onSubmit}> | ||
111 | + <Input placeholder={"Email"} type="email" {...email} /> | ||
112 | + <Input placeholder={"Password"} type="password" {...password} /> | ||
113 | + <Button text={"Log In"} /> | ||
114 | + </form> | ||
115 | + ) : ( | ||
116 | + <form onSubmit={onSubmit}> | ||
117 | + <Input placeholder={"Email"} type="email" {...email} /> | ||
118 | + <Input placeholder={"UserName"} {...username} /> | ||
119 | + <Input placeholder={"PhoneNumber"} {...phoneNum} /> | ||
120 | + <Input placeholder={"Password"} type="password" {...password} /> | ||
121 | + <Input | ||
122 | + placeholder={"Password for validation"} | ||
123 | + type="password" | ||
124 | + {...password2} | ||
125 | + /> | ||
126 | + <Button text={"Sign Up"} /> | ||
127 | + </form> | ||
128 | + )} | ||
129 | + </Form> | ||
130 | + <StateChanger> | ||
131 | + {action === "logIn" ? ( | ||
132 | + <> | ||
133 | + Don't you have an account ? | ||
134 | + <Link onClick={() => setAction("signUp")}> Sign Up </Link> | ||
135 | + </> | ||
136 | + ) : ( | ||
137 | + <> | ||
138 | + Did you have an account ? | ||
139 | + <Link onClick={() => setAction("logIn")}> Log in </Link> | ||
140 | + </> | ||
141 | + )} | ||
142 | + </StateChanger> | ||
143 | + <SocialLogin> | ||
144 | + <FontAwesomeIcon icon={faFacebook} /> | ||
145 | + <FontAwesomeIcon icon={faGoogle} /> | ||
146 | + <FontAwesomeIcon icon={faTwitter} /> | ||
147 | + <FontAwesomeIcon icon={faGithub} /> | ||
148 | + </SocialLogin> | ||
149 | + </Wrapper> | ||
150 | + ); | ||
151 | +}; |
front/src/Routes/Auth/AuthPresenter.js
0 → 100644
File mode changed
-
Please register or login to post a comment