login.js

import React, {useState} from 'react';
import "./login.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.ok){
        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="stick">―――――――――<span className="or"> 또는 </span>―――――――――</div>
      <div className="gotoJoin">아직 계정이 없으신가요? <a href="/users" className="loginText">회원가입</a></div>
      </section> 
  );
}
export default Login;