coconut-leaf/frontend/src/views/Login.vue

<script setup lang="ts">
import MessageBox from '@/components/MessageBox.vue';
import { ref } from 'vue';

const messagebox = ref<InstanceType<typeof MessageBox> | null>(null);

const login = () => {
  messagebox.value?.show("Fail to login. Please check your username or password.")
}

</script>

<template>
  <div style="margin-top: 1.25rem; width: 100%; display: flex; justify-content: center; align-items: center;">
    <div class="card" style="padding: 1.25rem;">
      <div class="field">
        <label class="label">User Name</label>
        <div class="control has-icons-left has-icons-right">
          <input id="ccn-login-form-username" class="input" type="text">
          <span class="icon is-small is-left">
            <font-awesome-icon icon="fas fa-user"></font-awesome-icon>
          </span>
        </div>
      </div>
      <div class="field">
        <label class="label">Password</label>
        <p class="control has-icons-left">
          <input id="ccn-login-form-password" class="input" type="password">
          <span class="icon is-small is-left">
            <font-awesome-icon icon="fas fa-lock"></font-awesome-icon>
          </span>
        </p>
      </div>

      <div class="control">
        <button class="button is-primary" @click="login">Login</button>
      </div>

    </div>
  </div>

  <MessageBox ref="messagebox"/>
</template>

<style scoped></style>