정성훈 / MEALKHU

Go to a project
Toggle navigation Toggle navigation pinning
swa07016
3391bd34 1 parent 7b134005

SigninPage 생성 및 /signin 라우팅

Inline Side-by-side
Showing 6 changed files with 63 additions and 7 deletions
...@@ -11403,6 +11403,11 @@ ...@@ -11403,6 +11403,11 @@
11403 } 11403 }
11404 } 11404 }
11405 }, 11405 },
11406 + "react-social-login-buttons": {
11407 + "version": "3.1.0",
11408 + "resolved": "https://registry.npmjs.org/react-social-login-buttons/-/react-social-login-buttons-3.1.0.tgz",
11409 + "integrity": "sha512-3BU+MqWI6XibmSotZ1LFKUYSwBBzb/CYdnemizVsaFfMu6MXzfUCcbpekO1eMPQg/AI3ZUdg3zu4E3r62t80nw=="
11410 + },
11406 "react-transition-group": { 11411 "react-transition-group": {
11407 "version": "2.9.0", 11412 "version": "2.9.0",
11408 "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", 11413 "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
......
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
19 "react-dom": "^16.13.1", 19 "react-dom": "^16.13.1",
20 "react-router-dom": "^5.2.0", 20 "react-router-dom": "^5.2.0",
21 "react-scripts": "3.4.1", 21 "react-scripts": "3.4.1",
22 + "react-social-login-buttons": "^3.1.0",
22 "reactstrap": "^8.4.1" 23 "reactstrap": "^8.4.1"
23 }, 24 },
24 "scripts": { 25 "scripts": {
......
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +2,7 @@ import React from 'react';
2 import LandingPage from './pages/LandingPage'; 2 import LandingPage from './pages/LandingPage';
3 import AboutPage from './pages/AboutPage'; 3 import AboutPage from './pages/AboutPage';
4 import MenuPage from './pages/MenuPage'; 4 import MenuPage from './pages/MenuPage';
5 +import SigninPage from './pages/SigninPage';
5 import { 6 import {
6 BrowserRouter as Router, 7 BrowserRouter as Router,
7 Switch, 8 Switch,
...@@ -17,7 +18,8 @@ function App() { ...@@ -17,7 +18,8 @@ function App() {
17 <Route exact path="/" component={LandingPage}/> 18 <Route exact path="/" component={LandingPage}/>
18 <Route exact path="/about" component={AboutPage}/> 19 <Route exact path="/about" component={AboutPage}/>
19 <Route exact path="/menu" component={MenuPage}/> 20 <Route exact path="/menu" component={MenuPage}/>
20 - {/* mypick, login 라우팅 */} 21 + <Route exact path="/signin" component={SigninPage}/>
22 + {/* mypick, signup 라우팅 */}
21 </Switch> 23 </Switch>
22 </> 24 </>
23 </Router> 25 </Router>
......
...@@ -36,7 +36,7 @@ const NavBar = (props) => { ...@@ -36,7 +36,7 @@ const NavBar = (props) => {
36 <NavLink href="/mypick" style={{'color':'#fff'}}>MyPick</NavLink> 36 <NavLink href="/mypick" style={{'color':'#fff'}}>MyPick</NavLink>
37 </NavItem> 37 </NavItem>
38 </Nav> 38 </Nav>
39 - <NavbarText style={{'color':'#fff'}}>OSS Project</NavbarText> 39 + <NavbarText><a href="http://khuhub.khu.ac.kr/2019102227/TermProject" target="_blank" style={{'color':'#fff', 'textDecoration':'none'}}>OSS Project</a></NavbarText>
40 </Collapse> 40 </Collapse>
41 </Container> 41 </Container>
42 </Navbar> 42 </Navbar>
......
1 +import React from 'react';
2 +import { Button, Form, FormGroup, Label, Input} from 'reactstrap';
3 +
4 +import {FacebookLoginButton} from 'react-social-login-buttons';
5 +
6 +const SigninPage = (props) => {
7 + return (
8 + <>
9 + <Form style={{
10 + width:'100%',
11 + maxWidth:'330px',
12 + padding:'15px',
13 + margin:'auto',
14 + height:'100%'
15 + }}>
16 + <a href='/' style={{'color':'#000000', textDecoration:'none'}}>
17 + <h1 className="text-center">
18 + <span className="font-weight-bold">MEALKHU</span>.com
19 + </h1>
20 + </a>
21 + <h2 className="text-center"><br/>Sign In</h2>
22 + <FormGroup>
23 + <Label>Username</Label>
24 + <Input type="name" placeholder="Enter your name"></Input>
25 + </FormGroup>
26 + <FormGroup>
27 + <Label>Password</Label>
28 + <Input type="password" placeholder="Enter your password"></Input>
29 + </FormGroup>
30 + <FormGroup>
31 + <Button className="btn-lg btn-dark btn-block">Sign in</Button>
32 + </FormGroup>
33 + <div className="text-center pt-3">
34 + Or continue with your social account
35 + </div>
36 + <FacebookLoginButton className="mt-3 mb-3"/>
37 + <div className="text-center">
38 + <a href="/signup">Sign up here!</a>
39 + </div>
40 + </Form>
41 +
42 + </>
43 + );
44 +}
45 +
46 +export default SigninPage;
...\ No newline at end of file ...\ No newline at end of file
...@@ -251,6 +251,13 @@ ...@@ -251,6 +251,13 @@
251 "type-is": "~1.6.18", 251 "type-is": "~1.6.18",
252 "utils-merge": "1.0.1", 252 "utils-merge": "1.0.1",
253 "vary": "~1.1.2" 253 "vary": "~1.1.2"
254 + },
255 + "dependencies": {
256 + "path-to-regexp": {
257 + "version": "0.1.7",
258 + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
259 + "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
260 + }
254 } 261 }
255 }, 262 },
256 "finalhandler": { 263 "finalhandler": {
...@@ -466,11 +473,6 @@ ...@@ -466,11 +473,6 @@
466 "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", 473 "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
467 "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" 474 "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
468 }, 475 },
469 - "path-to-regexp": {
470 - "version": "0.1.7",
471 - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
472 - "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
473 - },
474 "pify": { 476 "pify": {
475 "version": "3.0.0", 477 "version": "3.0.0",
476 "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", 478 "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
......