Commit 033d3da9 authored by 이재연's avatar 이재연
Browse files

로그인 기능 구현중...

parent c856eca6
This diff is collapsed.
import logo from './logo.svg';
import './App.css';
import { Button } from 'react-bootstrap';
import { Router } from 'react-router-dom';
import Login from './Login'
import LogoutButton from './LogoutButton'
import {signIn} from './auth'
function App() {
function btnfunc(){
alert("hi")
console.log("")
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
const [user,setUser]=useState(null);
const authenticated =user !=null;
const login =({id, password}) => setUser(signIn({id,password}));
const logout=()=>setUser(null);
}
export default App;
const users=[
{ id:'wodus', password:'123'},
{id:'kim', password:'456'},
]
export function signIn({id,password}){
const user=users.find(user=>user.id===id && user.password===password);
if (user===undefined) throw new Error();
return user;
}
\ No newline at end of file
import React from 'react'
import {Route, Redirect} from "react-router-dom"
function AuthRoute({})
\ No newline at end of file
......@@ -5,8 +5,19 @@ import { Form, Col, Container, Button, Row } from 'react-bootstrap'
import { Link , Redirect} from 'react-router-dom'
function Login() {
function Login(authenticated,login,location) {
const [id, setId] = useState("");
const [password,setPassword]= useState("");
const handleClick =() => {
try {
Login({id,password})
} catch(e) {
alert("Failed to login")
setId("")
setPassword("")
}
}
return (
<div>
......@@ -24,7 +35,12 @@ function Login() {
<Form.Row>
<Form.Label for="id">User Name</Form.Label>
<Col>
<Form.Control type="text" id="id" className="mx-sm-3" size="sm" placeholder="User Name"></Form.Control>
<Form.Control
type="text"
value={id}
onChange={({target:{value}})=>setId(value)}
className="mx-sm-3" size="sm" placeholder="User Name">
</Form.Control>
</Col>
</Form.Row>
</Form.Group>
......@@ -33,11 +49,15 @@ function Login() {
<Form.Row>
<Form.Label for="password">Password</Form.Label>
<Col>
<Form.Control type="password" id="password" className="mx-sm-3" size="sm" placeholder="Password"></Form.Control>
<Form.Control
type="password"
value={password}
onChange={({target:{value}})=>setPassword(value)}
className="mx-sm-3" size="sm" placeholder="Password"></Form.Control>
</Col>
</Form.Row>
</Form.Group>
<Button variant="outline-dark" type="submit" block>Login</Button>
<Button variant="outline-dark" type="submit" onClick={handleClick} block>Login</Button>
<div className="loginLine">
<Link to="/signup">SignUp?</Link>
</div>
......
import React from 'react'
import {withRouter} from 'react-router-dom'
function LogoutButton({logout,history}){
const handleClick = () =>{
logout()
history.push("/")
}
return <button onClick={handleClick}>Logout</button>
}
export default withRouter(LogoutButton)
\ No newline at end of file
......@@ -3,12 +3,14 @@ import { Redirect } from 'react-router-dom';
import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav';
import { Form, Col, Container, Button, Row } from 'react-bootstrap'
import FormCheckInput from 'react-bootstrap/esm/FormCheckInput';
function Signup() {
return (
<div>
<Nav1 />
<Nav2 />
<Container className="my-5">
......@@ -45,7 +47,7 @@ function Signup() {
<Col as={Row}>
<Form.Control type="text" id="number1" size="sm" maxlength="6" className="mx-sm-3" style={{width:'120px'}}></Form.Control>
-
<Form.Control type="text" id="number1" size="sm" maxlength="1" className="mx-sm-3" style={{width:'25px'}}></Form.Control>
<Form.Control type="text" id="number2" size="sm" maxlength="1" className="mx-sm-3" style={{width:'25px'}}></Form.Control>
******
</Col>
......
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