Skip to content

GitLab

Commit b54f3c44 authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

signup form 변경

parent 4ad237e6
Hide whitespace changes
Inline Side-by-side
src/client/src/user/Signup.jsx
View file @ b54f3c44
import React, { useState } from "react"; import React, { useState } from "react";
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form"; import Form from "react-bootstrap/Form";
import Modal from 'react-bootstrap/Modal' import Modal from "react-bootstrap/Modal";
import {Link} from 'react-router-dom' import { Link } from "react-router-dom";
import { create } from "./api-user"; import { create } from "./api-user";
function Signup() { function Signup() {
...@@ -10,13 +13,18 @@ function Signup() { ...@@ -10,13 +13,18 @@ function Signup() {
name: "", name: "",
password: "", password: "",
email: "", email: "",
instructor: false,
open: false, open: false,
error: "", error: "",
}); });
const handleChange = (name) => (event) => { const handleChange = (name) => (event) => {
const { value } = event.target; const { value, checked } = event.target;
setValues({ ...values, [name]: value }); if (name === "instructor") {
setValues({ ...values, instructor: checked });
} else {
setValues({ ...values, [name]: value });
}
}; };
const handleSubmit = (event) => { const handleSubmit = (event) => {
...@@ -25,6 +33,7 @@ function Signup() { ...@@ -25,6 +33,7 @@ function Signup() {
name: values.name || undefined, name: values.name || undefined,
email: values.email || undefined, email: values.email || undefined,
password: values.password || undefined, password: values.password || undefined,
instructor: values.instructor || undefined,
}; };
create(user).then((data) => { create(user).then((data) => {
if (data.error) { if (data.error) {
...@@ -37,48 +46,58 @@ function Signup() { ...@@ -37,48 +46,58 @@ function Signup() {
}; };
return ( return (
<div> <Container fluid>
<Form> <Row className="justify-content-center">
<Form.Group> <Col className="col-sm-6 col-md-7">
<Form.Label>Name</Form.Label> <Form>
<Form.Control <Form.Group>
type="text" <Form.Label>Name</Form.Label>
placeholder="Name" <Form.Control
onChange={handleChange('name')} type="text"
/> placeholder="Name"
</Form.Group> onChange={handleChange("name")}
<Form.Group> />
<Form.Label>Password</Form.Label> </Form.Group>
<Form.Control <Form.Group>
type="password" <Form.Label>Password</Form.Label>
placeholder="Password" <Form.Control
onChange={handleChange('password')} type="password"
/> placeholder="Password"
</Form.Group> onChange={handleChange("password")}
<Form.Group> />
<Form.Label>Email</Form.Label> </Form.Group>
<Form.Control <Form.Group>
type="email" <Form.Label>Email</Form.Label>
placeholder="Email" <Form.Control
onChange={handleChange('email')} type="email"
/> placeholder="Email"
</Form.Group> onChange={handleChange("email")}
<Button onClick={handleSubmit}>확인</Button> />
</Form> </Form.Group>
<Modal show={values.open}> <Form.Check
<Modal.Header> type="checkbox"
<Modal.Title>New Account</Modal.Title> // checked={values.instructor}
</Modal.Header> label="Instructor"
<Modal.Body> onChange={handleChange("instructor")}
New Account successfully created. />
</Modal.Body> <Button className="my-3" onClick={handleSubmit}>
<Modal.Footer> 확인
<Link to='/signin'> </Button>
<Button>Sign in</Button> </Form>
</Link> <Modal show={values.open}>
</Modal.Footer> <Modal.Header>
</Modal> <Modal.Title>New Account</Modal.Title>
</div> </Modal.Header>
<Modal.Body>New Account successfully created.</Modal.Body>
<Modal.Footer>
<Link to="/signin">
<Button>Sign in</Button>
</Link>
</Modal.Footer>
</Modal>
</Col>
</Row>
</Container>
); );
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment