diff --git a/src/pages/login.js b/src/pages/login.js new file mode 100644 index 0000000000000000000000000000000000000000..7f46ee94c9738f1308689b4bc3c253446988cc99 --- /dev/null +++ b/src/pages/login.js @@ -0,0 +1,77 @@ +import React, {useState} from 'react'; +import styles from "./login.module.css" + +//import axios from 'axios'; + +const Login=()=>{ + const [username, setUsername]=useState(''); + const[password, setPassword]=useState(''); + const[seePassword, setSeePassword]=useState(true); + + const handleLogin =async()=>{ + try{ + const response=await fetch('http://localhost:5000/login',{ + method:'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({username, password}), + }); + const data = await response.json(); + if (response.status===200){ + console.log('Login successful'); + localStorage.setItem('access-token', data['access-token']); + }else{ + console.log('Login failed:', data.message); + } + }catch(error){ + console.log('error during login', error); + } + }; + const seePasswordHandler=()=>{ + setSeePassword(!seePassword); + } + + return( + <section className='login-container'> + <div class='logo_img'><img src='/planpuzzle_logo.png' height='80px'></img></div> + <div className='title'>로그인</div> + <div className='input-container'> + <div className='input-with-image'> + + <img src='/id.png' alt="ID" height="17px" width='18px'></img> + <input + type="text" + value={username} + placeholder='아이디' + onChange={(e) => setUsername(e.target.value)} /> + + </div> + <br /> + <div className='input-with-image'> + <img src="/password.png" alt="Password" height="20px" width='14px'></img> + <input + type={seePassword? 'password':'text'} + value={password} + placeholder='비밀번호' + onChange={(e) => setPassword(e.target.value)} /> + <span className='eye-img'><img src={seePassword ? './eye-off.png' : './eye-on.png'} + alt='비밀번호 가시성 전환' + height='18px' + width='17px' + onClick={seePasswordHandler} + ></img></span> + + </div> + </div> + <br /> + + <button class='login' onClick={handleLogin}>로그인</button> + + + <div className={styles.stick}>―――――――――<span className="or"> 또는 </span>―――――――――</div> + <div className={styles.gotoJoin}>아직 계정이 없으신가요? <a href="/users" className="loginText">회원가입</a></div> + </section> + ); +} +export default Login; \ No newline at end of file