<script setup lang="ts">
import jfapi from '@/jfapi'
import { ref } from 'vue'
const username = ref('')
const host = ref('http://192.168.0.63:30013')
const password = ref('')

const login = () => {
  jfapi.Login(host.value, username.value, password.value).then((data) => {
    console.log(data)
    if (data !== null) {
      localStorage.setItem('jf_userid', data.Id)
      localStorage.setItem('jf_host', data.Host)
      window.location.href = '/'
    }
  })
}
</script>

<template>
  <div class="login-wrapper">
    <div class="form-item">
      <div class="label">Server Address</div>
      <input type="text" v-model="host" />
    </div>
    <div class="form-item">
      <div class="label">Username</div>
      <input type="text" v-model="username" />
    </div>
    <div class="form-item">
      <div class="label">Password</div>
      <input type="password" v-model="password" />
    </div>
    <div class="form-item">
      <button class="primary-button" @click="login">Submit</button>
    </div>
  </div>
</template>

<style scoped>
.form-item {
  width: 100%;
}
.login-wrapper {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  margin: 0 auto;
  margin-top: 30vh;
  gap: 1em;
}
input {
  width: 100%;
}
.label {
  padding-left: 1em;
}
</style>
