<template>
  <div class="field is-grouped">
    <p class="control has-icons-left">
      <input
        class="input is-small"
        type="text"
        placeholder="User ID"
        v-model="user_id"
        @change="active = true"
      />
      <span class="icon is-small is-left">
        <span class="fas fa-user">👤</span>
      </span>
    </p>
    <p class="control has-icons-left">
      <input
        class="input is-small"
        type="password"
        placeholder="Secret"
        v-model="secret"
        @change="active = true"
      />
      <span class="icon is-small is-left">
        <span class="fas fa-lock">🔓</span>
      </span>
    </p>
    <p class="control">
      <button class="button is-primary is-small" :disabled="!active" @click="login">
        Login
      </button>
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  emits: ["login"],

  data: () => ({
    user_id: window.localStorage.user_id || "",
    secret: window.localStorage.secret || "",
    active: true,
  }),
  mounted() {
    const { user_id, secret } = this
    if (user_id && secret) {
      this.login()
    }
  },
  methods: {
    login() {
      const { user_id, secret } = this
      this.$emit("login", { user_id, secret })
      this.active = false
    },
  },
  watch: {
    user_id(newval) {
      window.localStorage.user_id = newval
    },
    secret(newval) {
      window.localStorage.secret = newval
    },
  },
})
</script>

<style scoped></style>
