frontend/src/views/Login.vue

<template>

  <v-app>
    <top-bar :show-back-icon="true" :page-title="pageTitle" />  
    <v-main>
      <v-container>
        <v-form name="login-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>
          
        </v-form>
      </v-container>
      
            <v-btn @click.prevent="login">ลงชื่อเข้าใช้</v-btn>
            <v-btn :to="{name: 'register'}">ฉันต้องการสมัครสมาชิก</v-btn>
       
    </v-main>
  </v-app>

</template>

<script>
import {RouterLink} from 'vue-router';
import TopBar from '@/components/TopBar.vue';

export default {
  components: {
    TopBar
  },
  name: 'Login',
  data() {
    return {
      pageTitle: 'ลงชื่อเข้าใช้',
      input: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    login() {
      if (this.input.username !== '' && this.input.password !== '') {
        console.log('Authenticated: Checking with Backend');
        fetch(`http://localhost:5000/api/users/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            username: this.input.username,
            password: this.input.password,
          }),
        })
          .then((res) => {
            if (res.ok) {
              return res.json();
            } else {
              throw Error(`Login failed (${res.status})`);
            }
          })
          .then((data) => {
            console.log(data.success);
            sessionStorage.setItem('current_user', data.user.username);
            this.$router.push({ name: 'home' });
          })
          .catch((err) => {
            console.log(err);
            // Handle the error, e.g., display an error message to the user
          });
      } else {
        console.log('Username and Password cannot be empty');
      }
    }
  }
};

</script>