frontend/src/views/Register.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">
              <div class="font-weight-bold">Little Lines</div>
            </div>
            <div>ระบบนำทางสำหรับ Micromobility</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>

          <v-text-field 
            class="passwordC" 
            v-model="input.passwordConfirm" 
            label="ยืนยันรหัสผ่าน" 
            variant="solo"
          >
            <template v-slot:append-inner>
                <img
                  class="iconEdit"
                  :src="edit"
                >
                <img
                  class="iconEyeNotLooking"
                  :src="eyeNotLooking"
                >
            </template>
          </v-text-field>
        </div>        
        
        <v-checkbox color="#F16322" class="check">
          <template v-slot:label>
            <div>ฉันได้อ่านและยอมรับ</div>
            <a href="https://www.google.co.th/?hl=th" >นโยบายความเป็นส่วนตัว</a>
          </template>
        </v-checkbox>
        
        <div class="button-register">
          <v-btn @click.prevent="register" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
          สมัครสมาชิก</v-btn>
        </div>
        
        
      </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 TopBar from '@/components/TopBar.vue';
  
  export default {
    components: {
      TopBar
    },
    name: 'register',
    data() {
      return {
        pageTitle: 'สมัครสมาชิก', 
        input: {
          email: '',
          password: '',
          passwordConfirm:''
        }
      };
    },
    methods: {
      register() {
        if (this.input.username !== '' && ((this.input.password !='') && (this.input.password == this.input.passwordConfirm))) {
          console.log('Authenticated: Checking with Backend');
          fetch("https://little-lines-backend.techtransthai.org/api/users/create", {
            method: "POST",
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              username: "temp",
              password: this.input.password,
              email: this.input.email,
              isGoogleAccount: false
            })
            })
            .then((res) => {
              if(res.ok){
                return res.json()
              }
              else{
                return res.json().then(data => {throw Error(`${data.registerStatus}`) });
              }
            })
            .then((data) => {
              console.log(data.registerStatus)
              this.$router.push({name : 'login'})
            })
            .catch((err) =>{
              console.log(err)
            })
            console.log("fisnished fetch");
        } else {
          console.log('Email and Password cannot be empty');
        }
      }
    },
  };
</script>

<style>
.user {
  background-color: aqua;
}
.email, .password {
  margin-bottom: -21px;
}
.check {
  display: flex;
  justify-content:center;
  padding-top: 5%;
  padding-bottom: 5%;
}
.button-register {
  margin: 0;
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.iconEdit, .iconEyeNotLooking {
  width: 25px;
  height: 25px;
}
.iconEdit {
  margin-right: 10px;
}
.iconEyeNotLooking {
  margin-right: 10px;
  margin-left: 10px;
}
</style>