<template>
    <div class="login" v-loading="loading">
      <el-card>
        <h2>Login</h2>
        <el-form
          class="login-form"
          :model="model"
          :rules="rules"
          ref="form"
          @submit.native.prevent="login"
        >
          <el-form-item prop="username">
            <el-input prefix-icon="user" v-model="model.username" placeholder="Username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="model.password"
              placeholder="Password"
              type="password"
              prefix-icon="lock"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="loading"
              class="login-button"
              type="primary"
              native-type="submit"
              block
            >Login</el-button>
          </el-form-item>
          <a class="forgot-password" href="https://oxfordinformatics.com/">Forgot password ?</a>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  import {AXIOS} from '@/common/http-commons'
  import { ElNotification } from 'element-plus'  
  import { useRouter } from 'vue-router';
  import Qs from "qs";
  export default {
    name: "login",
    setup() {
      const router = useRouter();

      function whoami(){
        AXIOS.get("/api/v1/user/whoami")
        .then(function (response) {

          console.log("current user in setup: " + response.data)
          router.push("/home")
        })
        .catch(function (error) {
          console.log("currently not logged in setup: "+error);
        });
      }

      onMounted(() => {
        whoami();
      });

      return {
      };
    },
    data() {
      return {
        validCredentials: {
          username: "lightscope",
          password: "lightscope"
        },
        model: {
          username: "",
          password: ""
        },
        loading: false,
        rules: {
          username: [
            {
              required: true,
              message: "username should not be empty",
              trigger: "blur"
            },
            {
              min: 4,
              message: "at least 5 characters",
              trigger: "blur"
            }
          ],
          password: [
            { required: true, message: "Password is required", trigger: "blur" },
            {
              min: 5,
              message: "Password length should be at least 5 characters",
              trigger: "blur"
            }
          ]
        }
      };
    },
    methods: {
      async login() {
        this.loading = true;
        var data = { username: this.model.username, password: this.model.password, timeout: 1000 };
      
        AXIOS
        .post("/login", Qs.stringify(data), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
        })
        .then((response) => {
          this.loading = false;
           location.reload()
        })
        .catch((e) => {
          ElNotification({
            title: 'Error',
            message: 'Error message: '+e,
            type: 'error',
          })
        });
        // let valid = await this.$refs.form.validate();
        // if (!valid) {
        //   return;
        // }
        // this.loading = true;
        // await this.simulateLogin();
        // this.loading = false;
        // if (
        //   this.model.username === this.validCredentials.username &&
        //   this.model.password === this.validCredentials.password
        // ) {
        //   this.$message.success("Login successfull");
        // } else {
        //   this.$message.error("Username or password is invalid");
        // }
      }
    }
  };
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .login {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .login-button {
    width: 100%;
    margin-top: 40px;
  }
  .login-form {
    width: 290px;
  }
  .forgot-password {
    margin-top: 10px;
  }
  </style>
  <style lang="scss">
  $teal: rgb(109, 86, 228);
  .el-button--primary {
    background: $teal;
    border-color: $teal;
  
    &:hover,
    &.active,
    &:focus {
      background: lighten($teal, 7);
      border-color: lighten($teal, 7);
    }
  }
  .login .el-input__inner:hover {
    border-color: $teal;
  }
  .login .el-input__prefix {
    background: rgb(238, 237, 234);
    left: 0;
    height: calc(100% - 2px);
    left: 1px;
    top: 1px;
    border-radius: 3px;
    .el-input__icon {
      width: 30px;
    }
  }
  .login .el-input input {
    padding-left: 35px;
  }
  .login .el-card {
    padding-top: 0;
    padding-bottom: 30px;
  }
  h2 {
    font-family: "Open Sans";
    letter-spacing: 1px;
    font-family: Roboto, sans-serif;
    padding-bottom: 20px;
  }
  a {
    color: $teal;
    text-decoration: none;
    &:hover,
    &:active,
    &:focus {
      color: lighten($teal, 7);
    }
  }
  .login .el-card {
    width: 340px;
    display: flex;
    justify-content: center;
  }
  </style>
  