frontend/src/views/Login.vue

<template>

  <v-app>
    <top-bar :show-back-icon="true" :page-title="pageTitle" />  
    <v-main>
      <div class="text-center mt-8 mb-16">
            <div class="text-h4 font-weight-bold">
              ยินดีต้อนรับกลับสู่
              <div>Little Lines</div>
            </div>
      </div>

      <div class="mx-5">
          <v-text-field 
            class="email" 
            v-model="input.email" 
            label="อีเมล" 
            variant="solo"
          >
            <template v-slot:append-inner>
                <img
                  class="iconEdit"
                  :src="edit"
                >
            </template>
          </v-text-field>

          <v-text-field 
            class="password" 
            v-model="input.password" 
            label="รหัสผ่าน" 
            variant="solo"
          >
            <template v-slot:append-inner>
                <img
                  class="iconEdit"
                  :src="edit"
                >
                <img
                  class="iconEyeNotLooking"
                  :src="eyeNotLooking"
                >
            </template>
          </v-text-field>
        </div>   
      
        <v-contaioner>
            <v-row class="button">
              <v-btn @click.prevent="login" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
              ลงชื่อเข้าใช้</v-btn>
            </v-row>
            <v-row class="button">
              <v-btn @click.prevent="loginGoogle" class="text-none" rounded="xl" variant="tonal" width="45vw" height="44px">
                ลงชื่อเข้าใช้ด้วย Google</v-btn>
            </v-row>
            <v-row class="button">
              <v-btn :to="{name: 'register'}" rounded="xl" variant="tonal" width="45vw" height="44px">
                ฉันต้องการสมัครสมาชิก</v-btn>
            </v-row>
        </v-contaioner>
        
        
       
    </v-main>
  </v-app>

</template>

<script setup>
import edit from '../../icons/Material/edit.svg';
import eyeNotLooking from '../../icons/Material/eye-not-looking.svg';
</script>

<script>
import {RouterLink} from 'vue-router';
import TopBar from '@/components/TopBar.vue';
import { VContainer } from 'vuetify/lib/components/index.mjs';

import { googleSdkLoaded } from "vue3-google-login";
import axios from 'axios'


export default {
  components: {
    TopBar
  },
  name: 'Login',
  data() {
    return {
      pageTitle: 'ลงชื่อเข้าใช้',
      input: {
        email: '',
        password: ''
      }
    };
  },
  methods: {
    login() {
      if (this.input.email !== '' && this.input.password !== '') {
        console.log('Authenticated: Checking with Backend');
        fetch(`https://little-lines-backend.techtransthai.org/api/users/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            email: this.input.email,
            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', JSON.stringify({id:data.user._id,username:data.user.username,email:data.user.email}));
            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('Email and Password cannot be empty');
      }
    },

    loginGoogle(){
      googleSdkLoaded(google => {
        google.accounts.oauth2
          .initCodeClient({
            client_id:
              import.meta.env.VITE_CLIENT_ID,
            scope: "email profile openid",
            redirect_uri: "https://little-lines-backend.techtransthai.org/api/users/googleAuth/callback",
            callback: response => {
              if (response.code) {
                this.sendCodeToBackend(response.code);
              }
            }
          })
          .requestCode();
      });
    },
    async sendCodeToBackend(code) {
      try {
        const headers = {
          Authorization: code
        };
        const response = await axios.post("https://little-lines-backend.techtransthai.org/api/users/googleAuth", null, { headers });
        const userDetails = response.data;
        console.log("User Details:", userDetails);
        this.userDetails = userDetails;

        sessionStorage.setItem('current_user', userDetails.user.username);
        this.$router.push({ name: 'home' });

        // Redirect to the homepage ("/")
        // this.$router.push({ name: 'home' });
      } catch (error) {
        console.error("Failed to send authorization code:", error);
      }
    }
  }
};
</script>

<style>
.username {
  margin-bottom: -21px;
}
.iconEdit, .iconEyeNotLooking {
  width: 25px;
  height: 25px;
}
.iconEdit {
  margin-right: 10px;
}
.iconEyeNotLooking {
  margin-right: 10px;
  margin-left: 10px;
}
.button {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-content: center;
}
</style>