2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
3072bdf3 1 parent 865799d7

update containers related to Auth

Inline Side-by-side
Showing 3 changed files with 228 additions and 118 deletions
1 import React, { useState } from "react"; 1 import React, { useState } from "react";
2 -import styled from "styled-components";
3 import { useMutation } from "@apollo/react-hooks"; 2 import { useMutation } from "@apollo/react-hooks";
4 -import { LOGIN } from "./AuthQueries"; 3 +import { LOGIN, SIGNUP } from "./AuthQueries";
5 -import Input from "../../Components/Input";
6 -import Button from "../../Components/Button";
7 import useInput from "../../Hooks/useInput"; 4 import useInput from "../../Hooks/useInput";
8 -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 5 +import { toast } from "react-toastify";
9 -import { 6 +import AuthPresenter from "./AuthPresenter";
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 7
77 export default () => { 8 export default () => {
78 const [action, setAction] = useState("logIn"); 9 const [action, setAction] = useState("logIn");
...@@ -82,10 +13,24 @@ export default () => { ...@@ -82,10 +13,24 @@ export default () => {
82 const password2 = useInput(""); 13 const password2 = useInput("");
83 const phoneNum = useInput(""); 14 const phoneNum = useInput("");
84 const username = useInput(""); 15 const username = useInput("");
16 +
17 + // mutations
85 const loginMutation = useMutation(LOGIN, { 18 const loginMutation = useMutation(LOGIN, {
86 variables: { email: email.value, password: password.value }, 19 variables: { email: email.value, password: password.value },
87 }); 20 });
88 21
22 + const createAccountMutation = useMutation(SIGNUP, {
23 + variables: {
24 + email: email.value,
25 + username: username.value,
26 + password: password.value,
27 + password2: password2.value,
28 + phoneNum: phoneNum.value,
29 + },
30 + });
31 +
32 + // TODO: make login success query.
33 +
89 const onSubmit = async (e) => { 34 const onSubmit = async (e) => {
90 if (action === "logIn") { 35 if (action === "logIn") {
91 if (email.value !== "") { 36 if (email.value !== "") {
...@@ -94,59 +39,65 @@ export default () => { ...@@ -94,59 +39,65 @@ export default () => {
94 const { 39 const {
95 data: { login }, // AuthQueries 에 정의된 mutation 값 40 data: { login }, // AuthQueries 에 정의된 mutation 값
96 } = await loginMutation(); 41 } = await loginMutation();
42 + if (!login) {
43 + toast.warn("you need to make your own account");
44 + setAction("signUp");
45 + } else {
46 + toast.success("login success");
47 + setAction("confirm");
48 + }
97 } catch (e) {} 49 } catch (e) {}
50 + } else {
51 + // TODO: inform "email is required" using toastify
52 + toast.error("email is required!", {
53 + position: "top-center",
54 + autoClose: 3000,
55 + closeOnClick: true,
56 + draggable: true,
57 + });
98 } 58 }
99 } else if (action === "signUp") { 59 } else if (action === "signUp") {
60 + if (
61 + (email.value !== "",
62 + username.value !== "",
63 + password.value !== "",
64 + password2.value !== "",
65 + phoneNum.value !== "")
66 + ) {
67 + try {
68 + const {
69 + data: { signUp },
70 + } = await createAccountMutation();
71 + if (!signUp) {
72 + toast.warn("you need to sign up first");
73 + setAction("signUp");
74 + } else {
75 + toast.success("login success");
76 + setAction("logIn");
77 + }
78 + } catch (e) {
79 + // TODO: can't find data: signUp
80 + toast.error("can't sign up, please check input data");
81 + }
82 + } else {
83 + // TODO: inform user need to input values that required for sign up with toastify
84 + toast.error("you need to input with vaild data");
85 + }
100 } else if (action === "confirm") { 86 } else if (action === "confirm") {
87 + // TODO: when login success, go to Main Container
101 } 88 }
102 }; 89 };
103 90
104 return ( 91 return (
105 - <Wrapper> 92 + <AuthPresenter
106 - <TitleContainer> 93 + setAction={setAction}
107 - <Title>KhuChat</Title> 94 + action={action}
108 - </TitleContainer> 95 + email={email}
109 - <Form> 96 + password={password}
110 - {action === "logIn" ? ( 97 + password2={password2}
111 - <form onSubmit={onSubmit}> 98 + username={username}
112 - <Input placeholder={"Email"} type="email" {...email} /> 99 + phoneNum={phoneNum}
113 - <Input placeholder={"Password"} type="password" {...password} /> 100 + onSubmit={onSubmit}
114 - <Button text={"Log In"} /> 101 + />
115 - </form>
116 - ) : (
117 - <form onSubmit={onSubmit}>
118 - <Input placeholder={"Email"} type="email" {...email} />
119 - <Input placeholder={"UserName"} {...username} />
120 - <Input placeholder={"PhoneNumber"} {...phoneNum} />
121 - <Input placeholder={"Password"} type="password" {...password} />
122 - <Input
123 - placeholder={"Password for validation"}
124 - type="password"
125 - {...password2}
126 - />
127 - <Button text={"Sign Up"} />
128 - </form>
129 - )}
130 - </Form>
131 - <StateChanger>
132 - {action === "logIn" ? (
133 - <>
134 - Don't you have an account ?
135 - <Link onClick={() => setAction("signUp")}> Sign Up </Link>
136 - </>
137 - ) : (
138 - <>
139 - Did you have an account ?
140 - <Link onClick={() => setAction("logIn")}> Log in </Link>
141 - </>
142 - )}
143 - </StateChanger>
144 - <SocialLogin>
145 - <FontAwesomeIcon icon={faFacebook} />
146 - <FontAwesomeIcon icon={faGoogle} />
147 - <FontAwesomeIcon icon={faTwitter} />
148 - <FontAwesomeIcon icon={faGithub} />
149 - </SocialLogin>
150 - </Wrapper>
151 ); 102 );
152 }; 103 };
......
1 +import React from "react";
2 +import styled from "styled-components";
3 +import { Helmet } from "react-helmet";
4 +import Input from "../../Components/Input";
5 +import Button from "../../Components/Button";
6 +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7 +import {
8 + faFacebook,
9 + faTwitter,
10 + faGithub,
11 + faGoogle,
12 +} from "@fortawesome/free-brands-svg-icons";
13 +
14 +const Wrapper = styled.div`
15 + width: 100%;
16 + display: flex;
17 + flex-direction: column;
18 + justify-content: center;
19 + align-items: center;
20 +`;
21 +
22 +const Box = styled.div`
23 + display: flex;
24 +`;
25 +
26 +const TitleContainer = styled(Box)`
27 + margin-bottom: 20px;
28 +`;
29 +
30 +const Title = styled.span`
31 + font-size: 30px;
32 + font-family: "Raleway", sans-serif;
33 +`;
34 +
35 +const StateChanger = styled(Box)`
36 + margin-bottom: 15px;
37 +`;
38 +
39 +const Link = styled.span`
40 + cursor: pointer;
41 + color: #0652dd;
42 +`;
43 +
44 +const Form = styled(Box)`
45 + form {
46 + display: flex;
47 + flex-direction: column;
48 + padding: 5px 5px;
49 + margin-bottom: 15px;
50 + input {
51 + font-size: 15px;
52 + margin-bottom: 10px;
53 + }
54 + button {
55 + background-color: #1b9cfc;
56 + color: white;
57 + border-radius: 10px;
58 + padding: 10px 5px;
59 + font-size: 15px;
60 + }
61 + }
62 +`;
63 +
64 +const SocialLogin = styled(Box)`
65 + display: flex;
66 + svg {
67 + &:not(:last-child) {
68 + margin-right: 20px;
69 + }
70 + }
71 + font-size: 30px;
72 + opacity: 0.8;
73 +`;
74 +
75 +export default ({
76 + action,
77 + setAction,
78 + email,
79 + password,
80 + password2,
81 + username,
82 + phoneNum,
83 + onSubmit,
84 +}) => (
85 + <Wrapper>
86 + <TitleContainer>
87 + <Title>KhuChat</Title>
88 + </TitleContainer>
89 + <Form>
90 + {action === "logIn" ? (
91 + <>
92 + <Helmet>
93 + <title>Log In</title>
94 + </Helmet>
95 + <form onSubmit={onSubmit}>
96 + <Input placeholder={"Email"} type="email" {...email} />
97 + <Input placeholder={"Password"} type="password" {...password} />
98 + <Button text={"Log In"} />
99 + </form>
100 + </>
101 + ) : (
102 + <>
103 + <Helmet>
104 + <title>Sign Up</title>
105 + </Helmet>
106 + <form onSubmit={onSubmit}>
107 + <Input placeholder={"Email"} type="email" {...email} />
108 + <Input placeholder={"UserName"} {...username} />
109 + <Input placeholder={"PhoneNumber"} {...phoneNum} />
110 + <Input placeholder={"Password"} type="password" {...password} />
111 + <Input
112 + placeholder={"Password for validation"}
113 + type="password"
114 + {...password2}
115 + />
116 + <Button text={"Sign Up"} />
117 + </form>
118 + </>
119 + )}
120 + </Form>
121 + <StateChanger>
122 + {action === "logIn" ? (
123 + <>
124 + Don't you have an account ?
125 + <Link onClick={() => setAction("signUp")}> Sign Up </Link>
126 + </>
127 + ) : (
128 + <>
129 + Did you have an account ?
130 + <Link onClick={() => setAction("logIn")}> Log in </Link>
131 + </>
132 + )}
133 + </StateChanger>
134 + <SocialLogin>
135 + <FontAwesomeIcon icon={faFacebook} />
136 + <FontAwesomeIcon icon={faGoogle} />
137 + <FontAwesomeIcon icon={faTwitter} />
138 + <FontAwesomeIcon icon={faGithub} />
139 + </SocialLogin>
140 + </Wrapper>
141 +);
......
...@@ -5,3 +5,21 @@ export const LOGIN = gql` ...@@ -5,3 +5,21 @@ export const LOGIN = gql`
5 login(email: $email, password: $password) 5 login(email: $email, password: $password)
6 } 6 }
7 `; 7 `;
8 +
9 +export const SIGNUP = gql`
10 + mutation signUp(
11 + $email: String!
12 + $username: String!
13 + $password: String!
14 + $password2: String!
15 + $phoneNum: String!
16 + ) {
17 + signUp(
18 + email: $email
19 + username: $username
20 + password: $password
21 + password2: $password2
22 + phoneNum: $phoneNum
23 + )
24 + }
25 +`;
......