frontend/src/views/Setting.vue

<template>
<v-app>
    <v-container class="d-flex justify-center align-center">
        <div v-if="!currentUser">
            <h1>ยังไม่ได้ลงชื่อเข้าใช้</h1>
        <h2>ลงชื่อเข้าใช้เพื่อบันทึกการตั้งค่าอย่างปลอดภัย</h2>
      <v-container class="d-flex justify-center align-center">
        <v-btn class="ma-2" width="150" :to="{name: 'login'}">ลงชื่อเข้าใช้</v-btn>
        <v-btn class="ma-2" width="150" :to="{name: 'register'}">สมัครสมาชิก</v-btn>
      </v-container>
        </div>
    </v-container>
    <v-sheet class="d-flex justify-center ma-2">
        <v-sheet class="mb-auto"
        max-width="420px"
        min-width="200px"
        width="95vw">
            <v-list class = "ma-2" density="compact">
                <v-list-subheader>การแสดงผล</v-list-subheader>

                <v-list-item
                    v-for="(item, i) in display_items"
                    :key="i"
                    :value="item"
                >

                    <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item>
            </v-list>

            <v-list class = "ma-2" density="compact">
                <v-list-subheader>การนำทาง</v-list-subheader>

                <v-list-item
                    v-for="(item, i) in navigation_items"
                    :key="i"
                    :value="item"
                >

                    <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item>
            </v-list>

            <v-list class = "ma-2" density="compact">
                <v-list-item
                    v-for="(item, i) in about_items"
                    :key="i"
                    :value="item"
                    :to="{name: 'about'}"
                >
                <template v-slot:append>
                <v-icon :icon="item.icon"></v-icon>
                </template>
                    <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item>
            </v-list>

            <v-btn @click.prevent="logout" class = "ma-2 mt-3" width="100%"
            color="red">
                ลงชื่อออก
            </v-btn>
        </v-sheet>
        
    </v-sheet>   
</v-app> 

</template>

<script setup>

import {RouterLink} from 'vue-router';
import { VContainer } from 'vuetify/lib/components/index.mjs';
import router from '@/plugins/router'

const account_items = [
    { text: 'ตั้งค่าบัญชี',
    icon: 'mdi-chevron-right'},
    
  ]

const display_items = [
    { text: 'ภาษา'},
    { text: 'ธีม' },
  ]

  const navigation_items = [
    { text: 'โหมดเริ่มต้น'},
  ]

  const about_items = [
    { text: 'เกี่ยวกับ',
    icon: 'mdi-chevron-right',}
  ]

  function logout() {
      if (sessionStorage.getItem('current_user')){
        console.log('loging out...');
        fetch(`https://little-lines-backend.techtransthai.org/api/users/logout`, {
          method: "GET"
        }).then(()=>{
          console.log('loged out');
          sessionStorage.removeItem('current_user');
          router.push({ name: 'home' });
        })
      }
    }

</script>

<script>
export default {
  data() {
    return {
      currentUser: JSON.parse(sessionStorage.getItem('current_user'))
    };
  }
};
</script>