서민정 / SEARCH-AND-CHAT

Go to a project
Toggle navigation Toggle navigation pinning
서민정
06f386a2 1 parent 369118a0

update loginpage & registerpage

Inline Side-by-side
Showing 4 changed files with 101 additions and 26 deletions
...@@ -13,8 +13,8 @@ function App() { ...@@ -13,8 +13,8 @@ function App() {
13 return ( 13 return (
14 <Suspense fallback = {(<div>Loading...</div>)}> 14 <Suspense fallback = {(<div>Loading...</div>)}>
15 <Switch> 15 <Switch>
16 - <Route exact path="/" component={chatpage}/> 16 + <Route exact path="/chat" component={chatpage}/>
17 - <Route exact path="/login" component={loginpage} /> 17 + <Route exact path="/" component={loginpage} />
18 <Route exact path="/register" component={registerpage} /> 18 <Route exact path="/register" component={registerpage} />
19 </Switch> 19 </Switch>
20 </Suspense> 20 </Suspense>
......
1 -import React from 'react'
2 -import {Icon} from 'antd';
3 -
4 -function Footer() {
5 - return (
6 - <div style={{
7 - height: '80px', display: 'flex',
8 - flexDirection: 'column', alignItems: 'center',
9 - justifyContent: 'center', fontSize:'1rem'
10 - }}>
11 - <p> CHATBOT APP <Icon type="smile" /></p>
12 - </div>
13 - )
14 -}
15 -
16 -export default Footer
1 import React from "react"; 1 import React from "react";
2 -import { Typography} from 'antd'; 2 +import { Typography, Form, Input, Icon, Button} from 'antd';
3 import { withRouter } from "react-router-dom"; 3 import { withRouter } from "react-router-dom";
4 const { Title } = Typography; 4 const { Title } = Typography;
5 5
...@@ -7,11 +7,54 @@ const { Title } = Typography; ...@@ -7,11 +7,54 @@ const { Title } = Typography;
7 function loginpage() { 7 function loginpage() {
8 return ( 8 return (
9 <div> 9 <div>
10 - <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem' }}> 10 + <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem', paddingTop: '10rem' }}>
11 - <Title level={2} >LoginPage Test</Title> 11 + <Title level={2}>Login Page</Title>
12 </div> 12 </div>
13 + <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem'}}>
14 + <form style={{ width: '350px' }}>
15 + <Form.Item required>
16 + <Input
17 + id="email"
18 + prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
19 + placeholder="Enter your email"
20 + type="email"
21 + />
22 + </Form.Item>
23 +
24 + <Form.Item required>
25 + <Input
26 + id="password"
27 + prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
28 + placeholder="Enter your password"
29 + type="password"
30 + />
31 + </Form.Item>
32 +
33 + <Form.Item>
34 + <div>
35 + <Button type="primary" htmlType="submit" className="login-form-button" style={{ minWidth: '100%' }}>
36 + Log in
37 + </Button>
13 </div> 38 </div>
14 - ) 39 + <a href="/register">가입하기</a> Or <a href = "/chat"> 비회원으로 사용하기 </a>
40 + </Form.Item>
41 + </form>
42 + </div>
43 + </div>
44 + );
45 + // return (
46 +
47 +
48 +
49 +
50 +
51 +
52 + // <div>
53 + // <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem' }}>
54 + // <Title level={2} >Login Page</Title>
55 + // </div>
56 + // </div>
57 + // )
15 } 58 }
16 59
17 export default withRouter(loginpage); 60 export default withRouter(loginpage);
...\ No newline at end of file ...\ No newline at end of file
......
1 import React from "react"; 1 import React from "react";
2 -import { Typography} from 'antd'; 2 +import { Typography, Form, Input, Button} from 'antd';
3 import { withRouter } from "react-router-dom"; 3 import { withRouter } from "react-router-dom";
4 const { Title } = Typography; 4 const { Title } = Typography;
5 5
...@@ -7,11 +7,59 @@ const { Title } = Typography; ...@@ -7,11 +7,59 @@ const { Title } = Typography;
7 function registerpage() { 7 function registerpage() {
8 return ( 8 return (
9 <div> 9 <div>
10 - <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem' }}> 10 + <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem', paddingTop: '5rem' }}>
11 - <Title level={2} >RegisterPage Test</Title> 11 + <Title level={2}>Singup Page</Title>
12 + </div>
13 + <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem'}}>
14 + <Form style={{ minWidth: '375px' }}>
15 + <Form.Item required label="Name">
16 + <Input
17 + id="name"
18 + placeholder="Enter your name"
19 + type="text"
20 + />
21 + </Form.Item>
22 +
23 + <Form.Item required label="Email">
24 + <Input
25 + id="email"
26 + placeholder="Enter your Email"
27 + type="email"
28 + />
29 + </Form.Item>
30 +
31 + <Form.Item required label="keyword">
32 + <Input
33 + id="keyword"
34 + placeholder="Enter keywords to request the chatbot to search for instead."
35 + type="keyword"
36 + />
37 + </Form.Item>
38 +
39 + <Form.Item required label="Password">
40 + <Input
41 + id="password"
42 + placeholder="Enter your password"
43 + type="password"
44 + />
45 + </Form.Item>
46 +
47 + <Form.Item>
48 + <Button type="primary">
49 + Submit
50 + </Button>
51 + </Form.Item>
52 + </Form>
12 </div> 53 </div>
13 </div> 54 </div>
14 - ) 55 + );
56 + // return (
57 + // <div>
58 + // <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem' }}>
59 + // <Title level={2} >RegisterPage Test</Title>
60 + // </div>
61 + // </div>
62 + // )
15 } 63 }
16 64
17 export default withRouter(registerpage); 65 export default withRouter(registerpage);
...\ No newline at end of file ...\ No newline at end of file
......