signin.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style/nav.css" />
    <link rel="stylesheet" href="/style/signup.css">
    <script
      src="https://kit.fontawesome.com/683b4b40e3.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="con">
      <div id="nav"></div>
      <div id="body">
        <form action="" id="fom">
            <h2>Sign-In</h2>
          <input
            type="text"
            id="username"
            placeholder="Enter Your User name"
          /><br />
          <input type="password" id="password" placeholder="Enter your Password" /><br />
          <input type="submit" />
        </form>
      </div>
    </div>
  </body>
</html>

<script type="module">
  import navbar from "./components/navbar.js";

  let navone = document.getElementById("nav");
  navone.innerHTML = navbar();

  document.getElementById("fom").addEventListener("submit", myfnc);

  let data;
  async function myfnc(e) {
    e.preventDefault();
    try {
      data = {
        username: document.getElementById("username").value,
        password: document.getElementById("password").value
      };
    } catch (er) {
      console.log("er:", er);
    }
    console.log(data)
    data = JSON.stringify(data);
    let api = ` https://masai-api-mocker.herokuapp.com/auth/login`

    let response = await fetch(api, {
      method: "POST",
      body: data,
      headers: {
        "Content-Type": "application/json",
      },
    });
    let res = await response.json();
    console.log('res:', res)


    if(res.error == false){
        setTimeout(() => {
            alert("sign-in successful")
            window.location.href="home.html"
        }, 2000);
    }
    let username = document.getElementById("username").value
    getuser(username,res.token)
    console.log('res:', res.token)
  }

  async function getuser(username,token){

    let api = ` https://masai-api-mocker.herokuapp.com/user/${username}`

    let res = await fetch(api,{
      headers:{
        "Content-Type" : "application/json",
        "Authorization" : `Bearer ${token}`
      }
    })

    let data = await res.json()
     
    share(data)

  }

  function share(data){
    localStorage.setItem("details",JSON.stringify(data))
  }
</script>