signup error

src/composable/settings.ts

 import { CapacitorHttp } from '@capacitor/core';
 import Axios from "axios";
+//import axios from "axios";
 import { setupCache } from 'axios-cache-interceptor';
 
 
 
 export const TOKEN = '173cb9e357a861abd91e8008fab9246e0cc116af'
 //export const BASE_URL = 'http://192.168.1.35:8020/'
-//export const BASE_URL = 'http://localhost:8020/'
-export const BASE_URL = 'https://www.tigermuaythai.live/'
+export const BASE_URL = 'http://localhost:8020/'
+//export const BASE_URL = 'https://www.tigermuaythai.live/'
 
 const axios = setupCache(Axios); 
+//
+//axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
+//axios.defaults.xsrfCookieName = "csrftoken";
 
 export const getProducts = async () => {
   console.log("Get Products")
 
 export const getToken = async () => {
   console.log("get token ")
-  const { data } = await axios.post(BASE_URL + "api-token-auth/", {username: 'root', password: 'Tum 1984'})
-  console.log("get token ", data)
-  await Preferences.set({
+  const token = await Preferences.get({ key: 'token' });
+  console.log(token)
+  if( token.value == null ) {
+    //const { data } = await axios.post(BASE_URL + "api-token-auth/", {username: 'root', password: 'Tum 1984'})
+    const { data } = await axios.post(BASE_URL + "dj-rest-auth/login/", {username: 'root', password: 'Tum 1984'})
+    console.log("get token ", data)
+    await Preferences.set({
+      key: 'token', 
+      value: data.token
+    })
+    return data.token
+  }else {
+    return token.value
+  }
+}
+export const initAPI = async () => {
+  const r = await axios.get(BASE_URL + "backend/api/")
+  console.log("--- init api ---")
+  console.log(r)
+  console.log("-- cookie ---")
+  const cookieHeaders = r.headers['Set-Cookie'];
+  console.log(cookieHeaders)
+}
+export const setUserToken = async(token) => {
+  let data = await Preferences.set({
+    key: 'user_token', 
+    value: token
+  })
+  let data2 = await Preferences.set({
     key: 'token', 
-    value: data.token
+    value: token
   })
-  return data.token
+  return data
 }
-
 export const getTrainers = async () => {
   const token = await Preferences.get({ key: 'token' });
   console.log("token = ", token)
   }
 }
 export const listCourses = async  () => {
-
+  console.log("list courses ... ")
   const token = await Preferences.get({ key: 'token' });
   console.log("token = ", token)
   const { data } = await axios.get(BASE_URL + "backend/api/courses/?ordering=-id&status=active", {
   })
   return data
 }
+export const facebookLogin = async(access_token) => {
+
+  const token = await Preferences.get({ key: 'token' });
+  console.log("access_code = ", access_token)
+  const { data } = await axios.post(BASE_URL + 'dj-rest-auth/facebook/',{access_token: access_token.token}, {
+    headers: {
+      'Content-Type': 'application/json', 
+    }
+  }).catch((error) => {
+    console.log("fb error = ", error)
+  })
+  console.log("facebook login = ", data)
+  return data
+}
+
+export const logout = async() => {
+
+  console.log("--- logout ---")
+  const token = await Preferences.get({ key: 'user_token' });
+  console.log("user_token = ", token)
+  //const { data } = await axios.post(BASE_URL + 'dj-rest-auth/logout/', {}, {
+    //headers: { 
+    //'Authorization': `Token ${token.value}`
+    //}
+  //})
+  await clearPref()
+  const { data } = await axios.post(BASE_URL + 'dj-rest-auth/logout/')
+  return data
+}
+export const clearPref = async() => {
+
+  const clear = await Preferences.clear()
+  return clear
+}
+export const isLogin = async() => {
+  const { value } = await Preferences.get({ key: 'user_token' });
+  if( value ) 
+    return true
+  else
+    return false
+}
+
+export const restSignup = async (username, email, pass1, pass2) => {
+  const { data } = await axios.post(BASE_URL + 'dj-rest-auth/registration/',{
+    username: username, 
+    email: email,
+    password1: pass1,
+    password2: pass2, 
+  }, {
+    headers: {
+      'Content-Type': 'application/json', 
+    }
+  })
+  return data
+}

src/router/index.ts

         component: () => import('@/views/SearchPage.vue')
       },
       {
+        path: 'signup/',
+        name: 'signup', 
+        component: () => import('@/views/SignupPage.vue')
+      },
+      {
         path: 'post_detail/:id/',
         name: 'post_detail', 
         component: () => import('@/views/PostDetailPage.vue')

src/views/CourseMatDetailPage.vue

 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
     IonButton,
     IonButtons,
-    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol, IonItem, IonList, IonAvatar, IonLabel, IonItemDivider} from '@ionic/vue';
+    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol, IonItem, IonList, IonAvatar, IonLabel, IonItemDivider,
+    useIonRouter } from '@ionic/vue';
 
 import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import '@ionic/vue/css/ionic-swiper.css';
 
 import { useRoute } from 'vue-router';
-import { getMat, BASE_URL, listMats } from '@/composable/settings';
+import { getMat, BASE_URL, listMats, isLogin} from '@/composable/settings';
 import { ref } from 'vue';
 import CourseMat from '@/components/CourseMat.vue'
 
 const name = ref()
 const mats = ref()
 
+const ionRouter = useIonRouter();
 
 onIonViewWillEnter(async () => {
+  const rl  = await isLogin()
+  if( rl == false ) {
+    ionRouter.navigate('/tabs/tab4', 'forward', 'replace');
+  }
   mat.value = await getMat(id)
   console.log(mat.value)
   name.value = mat.value.vimeo_name || mat.value.course_name
   mats.value  = await listMats(mat.value.related_mats)
+
 })
 </script>
 

src/views/ProfilePage.vue

     </ion-header>
     <ion-content>
       <div class="example-content">Listen now content</div>
+      <ion-button @click='clear'>Clear Pref</ion-button>
+      <ion-button @click='btnLogout'>Btn Logout</ion-button>
+      <ion-button router-link="/tabs/signup">Signup</ion-button>
       <template v-if="isLogin">
       <ion-button @click='fbLogout'>Logout</ion-button>
       </template>
 import ExploreContainer from '@/components/ExploreContainer.vue';
 import { defineComponent, onMounted } from 'vue';
 import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
+import { facebookLogin, setUserToken, logout, clearPref } from '@/composable/settings';
 
 onMounted(() => {
   GoogleAuth.initialize();
   const result = await (<FacebookLoginResponse>(
     FacebookLogin.login({ permissions: FACEBOOK_PERMISSIONS })
   ));
-
+  console.log("-- fbLogin --")
+  console.info(result.accessToken)
   if (result.accessToken) {
+    let d = await facebookLogin(result.accessToken)
+    console.log("facebook authen ", d)
+    await setUserToken(d.key)
+    
     // Login successful.
     isLogin.value = true
     console.log(`Facebook access token is ${result.accessToken.token}`);
 const fbLogout = async () => {
   await FacebookLogin.logout();
   isLogin.value = false
+  await logout()
+}
+const btnLogout = async () => {
+  isLogin.value = false
+  await logout()
 }
 onIonViewWillEnter(async () => {
   const result = await (<FacebookLoginResponse>(
             }
         });
 }
+const clear = async() => {
+  await clearPref()
+}
 </script>

src/views/SignupPage.vue

+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>
+          Signup
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class='ion-padding'>
+      <ion-input label="Username"  ref="username" label-placement="floating" fill="outline" placeholder="Example, john"
+      error-text="Help me" 
+        ></ion-input>
+      <ion-list>
+        <ion-item>
+          <ion-input label="Email" label-placement="floating" ref='email' fill="outline" type="email" placeholder="Example, hello@gmail.com"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-input label="Password" label-placement='floating' fill='outline' ref="password" type="password" placeholder="Password"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-input label="Password Confirmation" label-placement='floating' fill='outline' ref="password2" type="password" placeholder="Password Confirmation"></ion-input>
+        </ion-item>
+      </ion-list>
+      <div>
+      <ion-button @click="signup" class=' ion-margin-top'>Signup</ion-button>
+      </div>
+      <br>
+       <ion-input
+    ref="input"
+    type="email"
+    fill="solid"
+    label="Email"
+    label-placement="floating"
+    helper-text="Enter a valid email"
+    error-text="Invalid email"
+    @ionInput="validate"
+    @ionBlur="markTouched"
+  ></ion-input>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonList, IonSearchbar, IonLabel,
+IonItem, IonBackButton, IonProgressBar, IonButtons, IonInfiniteScroll,
+    IonInfiniteScrollContent, InfiniteScrollCustomEvent, IonInput } from '@ionic/vue';
+import { defineComponent, onMounted } from 'vue';
+import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
+import { searchMat, callUrl,restSignup } from '@/composable/settings';
+
+import { ref } from 'vue';
+import SearchItem from '@/components/SearchItem.vue';
+
+const results = ref();
+const is_empty = ref(false);
+const processing = ref(false)
+let next_url = null
+
+const username = ref(null)
+const password = ref(null)
+const password2 = ref(null)
+const email = ref(null)
+const input = ref(null)
+
+const signup = async () => { 
+  username.value.$el.errorText = "No way"
+  username.value.$el.classList.remove('ion-valid')
+  username.value.$el.classList.remove('ion-invalid')
+  username.value.$el.classList.add('ion-invalid')
+  username.value.$el.classList.add('ion-touched');
+  try {
+    console.log("username = ", username.value.$el.value)
+    const data = await restSignup(username.value.$el.value, email.value.$el.value, password.value.$el.value, password2.value.$el.value)
+    console.log(data)
+  }catch( err ) {
+    console.log("-- error --")
+    console.log(err)
+    username.value.$el.classList.add('ion-invalid')
+  }
+}
+
+const validateEmail = (email) => {
+        return email.match(
+          /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+        );
+      }
+
+  const validate = (ev) => {
+        const value = ev.target.value;
+
+        input.value.$el.classList.remove('ion-valid');
+        input.value.$el.classList.remove('ion-invalid');
+
+        if (value === '') return;
+
+        validateEmail(value)
+          ? input.value.$el.classList.add('ion-valid')
+          : input.value.$el.classList.add('ion-invalid');
+      }
+
+const markTouched = () => {
+  input.value.$el.classList.add('ion-touched');
+}
+const markTouched2 = () => {
+  username.value.$el.classList.add('ion-touched');
+}
+</script>

src/views/Tab1Page.vue

 import { CapacitorHttp } from '@capacitor/core';
 import { ref } from 'vue';
 import { TOKEN, getProducts, setToken, getObject, getToken, getTrainers, listMats, storeAPNToken,
-getTodayProgs, getLive, getPosts} from '@/composable/settings';
+getTodayProgs, getLive, getPosts, initAPI} from '@/composable/settings';
 //import VueCoreVideoPlayer from 'vue-core-video-player'
 import { vueVimeoPlayer } from 'vue-vimeo-player'
 
 
   //const player = new Player(video, options);
 
+const liveObj = ref()
 const modules =  [Autoplay, Keyboard, Pagination, Scrollbar, Zoom]
   onIonViewWillEnter(async () => {
     //console.log("video " ,video)
     // setToken()
     // let u = getObject()
     //console.log('u ', u)
-
+    await initAPI()
     token.value = await getToken()
     getTrainers().then( (data) => {
       trainers.value = data
     getTodayProgs().then( (data) => {
       todays.value = data
     })
+    setInterval( async () => {
+      console.log("did enter")
+      if( liveObj.value == null ||  liveObj.value.result == false ) {
+        liveObj.value = await getLive()
+      }
+    }, 10000)
   })
 
   onIonViewWillLeave(() => {
 
   })
 
-const liveObj = ref()
   onIonViewDidEnter(async() => {
-    setInterval( async () => {
-      console.log("did enter")
-      if( liveObj.value == null ||  liveObj.value.result == false ) {
-        liveObj.value = await getLive()
-      }
-    }, 10000)
   })
 
   const doGet = async () => {

src/views/Tab3Page.vue

     <ion-header>
       <ion-toolbar>
         <ion-title>Schedule</ion-title>
+       <ion-buttons slot="end">
+          <ion-button :router-link="'/tabs/search_page/'">
+            <ion-icon slot="icon-only" :icon="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
     <ion-content>
 
 <script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, IonSegment, IonSegmentButton, onIonViewWillEnter, IonGrid, 
-IonRow, IonCol } from '@ionic/vue';
-import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
+IonRow, IonCol, IonButton, IonButtons } from '@ionic/vue';
+import { home, heart, pin, star, call, globe, basket, barbell, trash, person, search } from 'ionicons/icons';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 import CourseSchedule from '@/components/CourseSchedule.vue';
 import { ref } from 'vue';