advent22/ui/src/components/LoginModal.vue

<template>
  <div class="modal is-active" v-if="active">
    <div class="modal-background" />

    <div class="modal-card">
      <form @submit.prevent="submit">
        <header class="modal-card-head">
          <p class="modal-card-title">Login</p>
          <button class="delete" aria-label="close"></button>
        </header>

        <section class="modal-card-body">
          <div class="field">
            <label class="label">Username</label>
            <div class="control">
              <input class="input" type="text" v-model="username" />
            </div>
          </div>

          <div class="field">
            <label class="label">Password</label>
            <div class="control">
              <input class="input" type="password" v-model="password" />
            </div>
          </div>
        </section>

        <footer class="modal-card-foot">
          <button class="button is-success" @click.left="submit()">
            Login
          </button>
          <button class="button is-danger" @click.left="set_active(false)">
            Cancel
          </button>
        </footer>
      </form>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";

export default class extends Vue {
  public active = false;
  public username = "";
  public password = "";

  public created() {
    window.addEventListener("keydown", (e) => {
      if (e.key == "Escape") this.set_active(false);
    });
  }

  public set_active(state: boolean) {
    this.active = state;

    this.username = "";
    this.password = "";
  }

  public submit() {
    this.$advent22.set_api_auth(this.username, this.password);
    this.set_active(false);
  }
}
</script>