Signup

backend/README.md

@@ -8,8 +8,9 @@ Django API server for the **Triplannet** frontend
 # setup for virtual environment
 pip install -r requirements.txt
 
-# run server
+# migrate and run server
 cd triplannet
+python manage.py migrate
 python manage.py runserver
 
 # You can run test suite by typing:

frontend/package.json

@@ -4,6 +4,8 @@
   "private": true,
   "proxy": "http://localhost:8000",
   "dependencies": {
+    "@material-ui/core": "^4.5.2",
+    "@material-ui/icons": "^4.5.1",
     "axios": "^0.19.0",
     "babel-eslint": "^10.0.3",
     "connected-react-router": "^6.5.2",
@@ -22,7 +24,8 @@
     "redux-actions": "^2.6.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^4.4.0"
+    "styled-components": "^4.4.0",
+    "typeface-roboto": "0.0.75"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/components/auth/SignupForm.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import { makeStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
+import palette from '../../lib/styles/palette';
+
+const useStyles = makeStyles(theme => ({
+    container: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    textField: {
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        width: 200,
+    },
+}));
+
+
+function FormControl(props) {
+    return props.validated !== false ?
+        UncontrolledTextField(props) :
+        ValidationTextFields(props)
+
+}
+
+function ValidationTextFields(props) {
+    const classes = useStyles();
+
+    return (
+        <form className={classes.container} noValidate autoComplete="off">
+            <div>
+                <TextField
+                    error
+                    label={props.label}
+                    name={props.name}
+                    type={props.type}
+                    value={props.value}
+                    helperText={props.helperText}
+                    onChange={props.onChange}
+                    className={classes.textField}
+                    margin="normal"
+                />
+            </div>
+
+        </form>
+    );
+}
+
+function UncontrolledTextField(props) {
+    const classes = useStyles();
+
+    return (
+        <form className={classes.container} noValidate autoComplete="off">
+            <div>
+                <TextField
+                    required
+                    label={props.label}
+                    name={props.name}
+                    type={props.type}
+                    value={props.value}
+                    onChange={props.onChange}
+                    className={classes.textField}
+                    margin="normal"
+                />
+            </div>
+        </form>
+    )
+}
+const Footer = styled.div`
+  margin-top: 2rem;
+  text-align: right;
+  a {
+    color: ${palette.gray[6]};
+    text-decoration: underline;
+    &:hover {
+      color: ${palette.gray[9]};
+    }
+  }
+`;
+
+export {
+    FormControl,
+    Footer
+}
+

frontend/src/containers/auth/SignupForm.js

@@ -1,62 +1,168 @@
-import React, { Component } from 'react';
-
-import { connect } from 'react-redux';
-import * as actionCreators from '../../store/actions/index';
-
-import AuthForm from '../../components/auth/AuthForm';
-
-class SignupForm extends Component {
-  state = {
-    email: '',
-    password: '',
-    // password_confirm: '',
-    nickname: '',
-  };
-
-  componentDidMount() {}
-
-  onChange = (e) => {
-    const { value, name } = e.target;
-    this.setState({ [name]: value });
-  };
-
-  onSubmit = (e) => {
-    e.preventDefault();
-    this.props.onSignup(
-      this.state.email,
-      this.state.password,
-      this.state.nickname,
-    );
-  };
-
-  render() {
-    return (
-      <AuthForm
-        type="signup"
-        form={this.state}
-        onChange={this.onChange}
-        onSubmit={this.onSubmit}
-        error={null}
-      />
-    );
-  }
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    onSignup: (email, password, nickname) => {
-      dispatch(
-        actionCreators.signUp({
-          email: email,
-          password: password,
-          nickname: nickname,
-        }),
-      );
-    },
-  };
-};
-
-export default connect(
-  null,
-  mapDispatchToProps,
-)(SignupForm);
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import axios from 'axios'
+import { Redirect } from 'react-router-dom';
+
+
+import * as actionCreators from '../../store/actions/index';
+
+import Button from '../../components/common/Button';
+import { FormControl, Footer } from '../../components/auth/SignupForm'
+
+class SignupForm extends Component {
+
+    state = {
+        email: '',
+        password: '',
+        password_confirm: '',
+        nickname: '',
+        password_checked: null,
+        email_checked: null,
+        nickname_checked: null,
+    };
+
+    onChange = (e) => {
+        const { value, name } = e.target;
+        this.setState({ [name]: value });
+    };
+    alertCheck = (checked) => {
+        let alertMessage = checked ? 'Available' : 'Duplicate. Try another'
+        alert(alertMessage)
+    }
+
+    clickCheckEmail = () => {
+        if (!this.state.email) {
+            alert('Please enter your email')
+            this.setState({ email_checked: false })
+            return
+        }
+
+        let email_checked = null;
+        axios.get('/api/user/check/email/' + this.state.email)
+            .then(res => {
+                email_checked = !res.data.check
+                this.setState({ email_checked: email_checked })
+                this.alertCheck(email_checked)
+            })
+
+    }
+    clickCheckNickname = () => {
+        if (!this.state.nickname) {
+            alert('Please enter your nickname')
+            this.setState({ nickname_checked: false })
+            return
+        }
+
+        let nickname_checked = null;
+        axios.get('/api/user/check/nickname/' + this.state.nickname)
+            .then(res => {
+                nickname_checked = !res.data.check
+                this.setState({ nickname_checked: nickname_checked })
+                this.alertCheck(nickname_checked)
+            })
+    }
+
+
+    clickCheckPassword = () => {
+        if (!this.state.password || !this.state.password_confirm) {
+            alert('Enter your password')
+            this.setState({ password_checked: false })
+            return
+        }
+        const password_checked = !!this.state.password && this.state.password_confirm === this.state.password
+        this.setState({ password_checked: password_checked })
+        const alertMesaage = password_checked ? 'Vaild Password' : 'Must match password'
+        alert(alertMesaage)
+    }
+
+    clickSubmit = () => {
+
+        if (this.state.email_checked && this.state.password_checked && this.state.password_checked) {
+            const newUserInfo = {
+                email: this.state.email,
+                password: this.state.password,
+                nickname: this.state.nickname
+            }
+            this.props.onSignup(newUserInfo)
+            // this.props.history.push('/login')
+
+        } else {
+            this.clickCheckEmail()
+            this.clickCheckPassword()
+            this.clickCheckNickname()
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <div>
+                    <FormControl
+                        validated={this.state.email_checked}
+                        label='Email'
+                        name='email'
+                        value={this.state.email}
+                        helperText='Invalid Email'
+                        onChange={this.onChange}
+                    />
+                    <Button onClick={this.clickCheckEmail}>Check Email</Button>
+                    <FormControl
+                        validated={this.state.password_checked}
+                        label='Password'
+                        name='password'
+                        type='password'
+                        value={this.state.password}
+                        helperText='Invalid Password'
+                        onChange={this.onChange}
+                    />
+                    <FormControl
+                        validated={this.state.password_checked}
+                        label='Password Confirmation'
+                        name='password_confirm'
+                        type='password'
+                        value={this.state.password_confirm}
+                        onChange={this.onChange}
+                        helperText='Invalid Password'
+
+                    />
+                    <Button onClick={this.clickCheckPassword}>Check Password Confirmation</Button>
+                    <FormControl
+                        validated={this.state.nickname_checked}
+                        label='Nickname'
+                        name='nickname'
+                        value={this.state.nickname}
+                        helperText='Invalid Nickname'
+                        onChange={this.onChange}
+                    />
+                    <Button onClick={this.clickCheckNickname}>Check Nickname</Button>
+                </div>
+                <div>
+                    <br></br>
+                    <Button onClick={this.clickSubmit}>Sign in</Button>
+                    <br></br>
+
+                </div>
+                <Footer>
+                    <Link to="/login">Log In</Link>
+                </Footer>
+            </div>
+        )
+
+    }
+}
+const mapDispatchToProps = (dispatch) => {
+    return {
+        onSignup: (userInfo) => {
+            dispatch(
+                actionCreators.signup(userInfo)
+            );
+        },
+    };
+};
+
+
+export default connect(
+    null,
+    mapDispatchToProps,
+)(SignupForm);

frontend/src/store/actions/actionTypes.js

@@ -8,3 +8,4 @@ export const SIGNUP_FAILURE = 'auth/SIGNUP_FAILURE';
 
 // for user
 export const GET_USER = 'GET_USER';
+export const SIGN_UP='SIGN_UP'

frontend/src/store/actions/auth.js

@@ -32,20 +32,4 @@ export const logout = () => {
   };
 };
 
-export const signUp_success = (temp) => {
-  return { type: actionTypes.SIGNUP_SUCCESS, temp: temp };
-};
-
-export const signUp_failure = () => {
-  return { type: actionTypes.SIGNUP_FAILURE };
-};
 
-// signUp({ email: email, password: password, nickname: nickname }
-export const signUp = (info) => {
-  return (dispatch) => {
-    return axios.post('/api/user/signup/', info)
-      .then((res) => dispatch(signUp_success(res.data)))
-      .catch((res) => dispatch(signUp_failure()));
-    // dispatch(login_success(info.email));
-  };
-};

frontend/src/store/actions/index.js

@@ -1,9 +1,9 @@
 export {
   getUser,
+  signup,
 } from './user';
 
 export {
   login,
   logout,
-  signUp,
 } from './auth';