frontend/src/views/Register.vue

<template>

    <v-app>
      <top-bar :show-back-icon="true" :page-title="pageTitle" />  
      <v-main>
        <v-container>
          <v-form name="register-form">
            <div class="mb-3">
              <label for="username">Username: </label>
              <input type="text" id="username" v-model="input.username" />
            </div>
            <div class="mb-3">
              <label for="password">Password: </label>
              <input type="password" id="password" v-model="input.password" />
            </div>
            <div class="mb-3">
              <label for="password">Password Confirmation: </label>
              <input type="password" id="passwordConfirm" v-model="input.passwordConfirm" />
            </div>
            
          </v-form>
        </v-container>
        
              <v-btn @click.prevent="login">สมัครสมาชิค</v-btn>
         
      </v-main>
    </v-app>
  
  </template>
  
  <script>
  import TopBar from '@/components/TopBar.vue';
  
  export default {
    components: {
      TopBar
    },
    name: 'register',
    data() {
      return {
        pageTitle: 'สมัครสมาชิค', 
        input: {
          username: '',
          password: '',
          passwordConfirm:''
        }
      };
    },
    methods: {
      login() {
        if (this.input.username !== '' || this.input.password !== '') {
          console.log('Authenticated: Checking with Backend');
        } else {
          console.log('Username and Password cannot be empty');
        }
      }
    }
  };
  
  </script>