loginform

<template>
  <form
    class="login-form container-md px-5 py-5 mt-5 position-relative fixed-bottom d-flex flex-column justify-content-center"
  >
    <!-- <button 
      class="btn btn-dark align-self-end"
      @click="closeLogin"
    >      
      Close
    </button> -->
    <h2 class="login-form__title mx-auto">
      Log in
    </h2>
    <div class="form-group">
      <label
        class="text-white"
        for="user_email"
      />
      <input
        id="user_email"
        type="email"
        class="user_email form-control"
        name="email"
        aria-describedby="emailHelp"
        placeholder="Enter email"
        required
      >
    </div>
    <div class="form-group">
      <label
        class="text-white"
        for="user_password"
      />
      <input
        id="user_password"
        type="password"
        class="user_password form-control"
        name="password"
        placeholder="Password"
        required
      >
    </div>
    <div
      class="login-form__button-wrap d-flex flex-row justify-content-between mt-4"
    >
      <label
        class="show-password-label d-flex justify-content-around align-items-center text-white w-50"
        for="show-password"
      >
        <input
          id="show-password"
          type="checkbox"
          @change="myFunction"
        >
        <span>Show Password</span>
      </label>

      <button
        id="submit-btn"
        type="submit"
        class="btn btn-secondary btn-block w-50"
        @click="summitRegData"
      >
        <span class="text-black">Submit</span>
      </button>
    </div>
  </form>
</template>

<script>
const logInValidation = () => {
  let userEmail = document.querySelector(`#user_email`);
  let userPassword = document.querySelector(`#user_password`);

  if (!userEmail || !userPassword || !document.querySelector(`.login-form`)) {
    alert(`Bad page.`);
    return false;
  }

  if (!userEmail.value.length || !userPassword.value.length) {
    alert(`Entered data is not valid`);
    return false;
  } 

  return true;
};

import fetch from "node-fetch";

export default {
  name: "LoginForm",
  methods: {
    getToken() {
      if (logInValidation() === true) {
        const URL_POST = `https://staging.brij.app/authentication`;
        const formData = new FormData(document.querySelector(`.login-form`));

        const dataToSend = {
          strategy: "local",
        };

        Object.assign(dataToSend, Object.fromEntries(formData));

        try {
          localStorage.removeItem("userToken");

          fetch(URL_POST, {
            method: "POST",
            headers: {
              "Content-Type": "application/json;charset=utf-8",
            },
            body: JSON.stringify(dataToSend),
          })
            .then((response) => response.json())
            .then((data) => {
              localStorage.setItem("userToken", data.accessToken);
              localStorage.setItem("accountId", data.account.id);
              localStorage.setItem("avatar", data.account.avatar);
              localStorage.setItem("name", data.account.name);
              localStorage.setItem("userName", data.account.username);

              console.log(data);

              if (localStorage.getItem("userToken") && logInValidation() === true) {
                //this.$router.push("/my-profile");
                window.location.href = '/my-profile';
              }

              document.querySelector(`.login-form`).reset();
            })
            .catch((error) => {
              console.log(error);
            });
        } catch (error) {
          console.error(error);
        }
      } else {
        // alert ;
      }
    },
    summitRegData(e) {
      e.preventDefault();
      this.getToken();
    },
    myFunction() {
      let x = document.querySelector(`#user_password`);
      if (x.type === `password`) {
        x.type = `text`;
      } else {
        x.type = `password`;
      }
    },
  },
};
</script>

<style>
.login-form {
  max-width: 400px;
  background-color: transparent;
  border: solid 1px transparent;
  opacity: 0.9;
}
.login-form__submit {
  width: 95px;
  height: 42px;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  color: #1d1e1f;
  background-color: #5cc5de;
  border: none;
  border-radius: 50px;
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
  margin: 0;
  padding: 0;
}

.login-form__title {
  font-style: normal;
  font-weight: bold;
  font-size: 32px;
  line-height: 37px;
  text-align: center;
  color: #ffffff;
  width: auto;
}

.form-passwors-forgot__link {
  font-size: 80%;
  color: #ffffff;
  text-decoration: none;
}

.page-footer {
  padding: 0px;
  background-color: #1d1d1d;
}
/* //////////////////////////DOSKTOP WIDTH ///////////////////////// */

/* @media (min-width: 768px) {
  #submit-btn {
  min-width: 150px;
}
} */

/* .login-form__button-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0px;
    padding: 20px 0px 0px 0px;
  }
@media (min-width: 320px) {
  
} */
</style>