Showing
8 changed files
with
54 additions
and
39 deletions
1 | -import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom"; | 1 | +import {BrowserRouter as Router, Route, Routes} from "react-router-dom"; |
2 | import MainPage from "./component/views/MainPage/MainPage"; | 2 | import MainPage from "./component/views/MainPage/MainPage"; |
3 | import LoginPage from "./component/views/LoginPage/LoginPage"; | 3 | import LoginPage from "./component/views/LoginPage/LoginPage"; |
4 | import RegisterPage from "./component/views/RegisterPage/RegisterPage"; | 4 | import RegisterPage from "./component/views/RegisterPage/RegisterPage"; | ... | ... |
1 | import Axios from 'axios'; | 1 | import Axios from 'axios'; |
2 | -import { LOGIN_USER } from './types'; | 2 | +import { LOGIN_USER, REGISTER_USER } from './types'; |
3 | 3 | ||
4 | export function loginUser(dataToSubmit) { | 4 | export function loginUser(dataToSubmit) { |
5 | 5 | ||
... | @@ -9,4 +9,14 @@ export function loginUser(dataToSubmit) { | ... | @@ -9,4 +9,14 @@ export function loginUser(dataToSubmit) { |
9 | type: LOGIN_USER, | 9 | type: LOGIN_USER, |
10 | payload: request | 10 | payload: request |
11 | } | 11 | } |
12 | +} | ||
13 | + | ||
14 | +export function registerUser(dataToSubmit) { | ||
15 | + | ||
16 | + const request = Axios.post('/api/users/register', dataToSubmit) | ||
17 | + .then( response => response.data ) | ||
18 | + return { | ||
19 | + type: REGISTER_USER, | ||
20 | + payload: request | ||
21 | + } | ||
12 | } | 22 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import { | 1 | import { |
2 | - LOGIN_USER | 2 | + LOGIN_USER, REGISTER_USER |
3 | } from '../_actions/types'; | 3 | } from '../_actions/types'; |
4 | 4 | ||
5 | export default function (state = {}, action) { | 5 | export default function (state = {}, action) { |
... | @@ -7,7 +7,9 @@ export default function (state = {}, action) { | ... | @@ -7,7 +7,9 @@ export default function (state = {}, action) { |
7 | case LOGIN_USER: | 7 | case LOGIN_USER: |
8 | return { ...state, loginSuccess: action.payload } | 8 | return { ...state, loginSuccess: action.payload } |
9 | break; | 9 | break; |
10 | - | 10 | + case REGISTER_USER: |
11 | + return {...state, registerSuccess: action.payload} | ||
12 | + break; | ||
11 | default: | 13 | default: |
12 | return state; | 14 | return state; |
13 | } | 15 | } | ... | ... |
1 | -import React, { useEffect } from 'react' | 1 | +import React from 'react' |
2 | -import axios from 'axios' | 2 | +//import axios from 'axios' |
3 | // import { response } from 'express' | 3 | // import { response } from 'express' |
4 | 4 | ||
5 | function LandingPage() { | 5 | function LandingPage() { |
6 | 6 | ||
7 | - useEffect(() => { | 7 | + // useEffect(() => { |
8 | - axios.get('/api/hello') | 8 | + // axios.get('/api/hello') |
9 | - .then(response => console.log(response.data)) | 9 | + // .then(response => console.log(response.data)) |
10 | - }, []) | 10 | + // }, []) |
11 | 11 | ||
12 | return ( | 12 | return ( |
13 | <div> | 13 | <div> | ... | ... |
1 | -import React, {useEffect, useState} from "react"; | 1 | +import React, {useState} from "react"; |
2 | -import Axios from 'axios' | ||
3 | -import {Link} from "react-router-dom"; | ||
4 | import "../style/LoginPage.scss"; | 2 | import "../style/LoginPage.scss"; |
5 | import { Icon, Input } from "semantic-ui-react" | 3 | import { Icon, Input } from "semantic-ui-react" |
6 | import { useNavigate } from "react-router-dom"; | 4 | import { useNavigate } from "react-router-dom"; | ... | ... |
1 | -import {Button, Grid, Image, Segment} from "semantic-ui-react" | 1 | +import {Button} from "semantic-ui-react" |
2 | import "../style/MainPage.scss"; | 2 | import "../style/MainPage.scss"; |
3 | -import {useNavigate} from "react-router-dom"; | 3 | +import { useNavigate } from "react-router-dom"; |
4 | 4 | ||
5 | function MainPage() { | 5 | function MainPage() { |
6 | const navigate = useNavigate(); | 6 | const navigate = useNavigate(); | ... | ... |
1 | -import React, {useCallback, useState} from "react"; | 1 | +import React, {useState} from "react"; |
2 | import "../style/RegisterPage.scss"; | 2 | import "../style/RegisterPage.scss"; |
3 | import { Button, Icon, Input } from "semantic-ui-react"; | 3 | import { Button, Icon, Input } from "semantic-ui-react"; |
4 | +import {useDispatch} from "react-redux"; | ||
5 | +import { registerUser } from '../../../_actions/user_action' | ||
4 | 6 | ||
5 | -function RegisterPage() { | 7 | +function RegisterPage(props) { |
8 | + const dispatch = useDispatch(); | ||
6 | const [Id, setId] = useState(""); | 9 | const [Id, setId] = useState(""); |
7 | const [Password, setPassword] = useState(""); | 10 | const [Password, setPassword] = useState(""); |
8 | const [PasswordCheck,setPasswordCheck] = useState(""); | 11 | const [PasswordCheck,setPasswordCheck] = useState(""); |
9 | const [Personality, setPersonality] = useState(""); | 12 | const [Personality, setPersonality] = useState(""); |
10 | - const [PasswordError,setPasswordError] = useState(false); | ||
11 | 13 | ||
12 | const onIdHandler = (event) => { | 14 | const onIdHandler = (event) => { |
13 | setId(event.currentTarget.value); | 15 | setId(event.currentTarget.value); |
... | @@ -18,23 +20,32 @@ function RegisterPage() { | ... | @@ -18,23 +20,32 @@ function RegisterPage() { |
18 | const onPersonalityHandler = (event) => { | 20 | const onPersonalityHandler = (event) => { |
19 | setPersonality(event.currentTarget.value); | 21 | setPersonality(event.currentTarget.value); |
20 | }; | 22 | }; |
21 | - const onPasswordChkHandler = useCallback((event) => { | 23 | + const onPasswordChkHandler = (event) => { |
22 | //비밀번호를 입력할때마다 password 를 검증하는 함수 | 24 | //비밀번호를 입력할때마다 password 를 검증하는 함수 |
23 | setPasswordCheck(event.currentTarget.value); | 25 | setPasswordCheck(event.currentTarget.value); |
24 | - },[PasswordCheck]); | 26 | + }; |
25 | - const onSubmitHandler = useCallback((event) => { | 27 | + const onSubmitHandler = (event) => { |
26 | event.preventDefault(); | 28 | event.preventDefault(); |
27 | console.log("ID", Id); | 29 | console.log("ID", Id); |
28 | console.log("Password", Password); | 30 | console.log("Password", Password); |
29 | console.log("MBTI", Personality); | 31 | console.log("MBTI", Personality); |
30 | - if(Password !== PasswordCheck){ | 32 | + if (Password !== PasswordCheck) { |
31 | - return setPasswordError(true); | 33 | + return alert('비밀번호가 일치하지 않습니다.') |
32 | } | 34 | } |
33 | - else{ | 35 | + let body = { |
34 | - return setPasswordError(false); | 36 | + id: Id, |
37 | + password: Password, | ||
38 | + personality: Personality | ||
35 | } | 39 | } |
36 | - },[Password,PasswordCheck]); | 40 | + dispatch(registerUser(body)) |
37 | - | 41 | + .then(response => { |
42 | + if (response.payload.success) { | ||
43 | + props.history.push('/login') | ||
44 | + } else { | ||
45 | + alert('Failed to sign up') | ||
46 | + } | ||
47 | + }) | ||
48 | + } | ||
38 | return ( | 49 | return ( |
39 | <div id="Register"> | 50 | <div id="Register"> |
40 | <div className="register-form"> | 51 | <div className="register-form"> |
... | @@ -42,9 +53,9 @@ function RegisterPage() { | ... | @@ -42,9 +53,9 @@ function RegisterPage() { |
42 | <h1>Tunnel</h1> | 53 | <h1>Tunnel</h1> |
43 | <div className="input-area"> | 54 | <div className="input-area"> |
44 | <Input | 55 | <Input |
45 | - icon={<Icon name='at'/>} | 56 | + icon={<Icon name="id badge"/>} |
46 | iconPosition='left' | 57 | iconPosition='left' |
47 | - placeholder="Email" | 58 | + placeholder="ID" |
48 | type="text" | 59 | type="text" |
49 | value={Id} | 60 | value={Id} |
50 | autoComplete="off" | 61 | autoComplete="off" |
... | @@ -68,11 +79,7 @@ function RegisterPage() { | ... | @@ -68,11 +79,7 @@ function RegisterPage() { |
68 | type="password" | 79 | type="password" |
69 | value={Password} | 80 | value={Password} |
70 | autoComplete="off" | 81 | autoComplete="off" |
71 | - onChange={onPasswordHandler} | 82 | + onChange={onPasswordHandler}/> |
72 | - onFocus={()=>setPasswordError(false)}/> | ||
73 | - {PasswordError && | ||
74 | - <div>비밀번호 오류</div> | ||
75 | - } | ||
76 | </div> | 83 | </div> |
77 | <div className="input-area"> | 84 | <div className="input-area"> |
78 | <Input | 85 | <Input |
... | @@ -82,8 +89,7 @@ function RegisterPage() { | ... | @@ -82,8 +89,7 @@ function RegisterPage() { |
82 | type="password" | 89 | type="password" |
83 | value={PasswordCheck} | 90 | value={PasswordCheck} |
84 | autoComplete="off" | 91 | autoComplete="off" |
85 | - onChange={onPasswordChkHandler} | 92 | + onChange={onPasswordChkHandler}/> |
86 | - onFocus={()=>setPasswordError(false)}/> | ||
87 | </div> | 93 | </div> |
88 | <div className="btn-area" > | 94 | <div className="btn-area" > |
89 | <Button className='register-btn' | 95 | <Button className='register-btn' |
... | @@ -93,9 +99,7 @@ function RegisterPage() { | ... | @@ -93,9 +99,7 @@ function RegisterPage() { |
93 | </div> | 99 | </div> |
94 | </form> | 100 | </form> |
95 | </div> | 101 | </div> |
96 | - | ||
97 | </div> | 102 | </div> |
98 | ); | 103 | ); |
99 | } | 104 | } |
100 | - | ||
101 | export default RegisterPage; | 105 | export default RegisterPage; | ... | ... |
-
Please register or login to post a comment