profile

src/components/LoginForm.vue

 const login = async () => {
   try{
     const data = await userLogin(username.value, password.value)
-    emit('userLogin', {data:data})
+    emit('userLogin', {key:data.key})
   }
   catch(error){
     console.info("error ", error)

src/composable/settings.ts

   console.log("facebook login = ", data)
   return data
 }
+export const ggLogin = async(access_token, id_token) => {
+
+  const token = await Preferences.get({ key: 'token' });
+  console.log("access_code = ", access_token)
+  console.log("id token = ", id_token)
+  const { data } = await axios.post(BASE_URL + 'dj-rest-auth/google/',{access_token: access_token}, {
+    headers: {
+      'Content-Type': 'application/json', 
+    }
+  }).catch((error) => {
+    console.log("gg error = ", error)
+  })
+  console.log("gg login = ", data)
+  return data
+}
 export const userLogin = async(username, password) => {
 
   const { data } = await axios.post(BASE_URL + 'dj-rest-auth/login/',{username: username, password: password}, {
 }
 export const isLogin = async() => {
   const { value } = await Preferences.get({ key: 'user_token' });
+  console.log('-- is Login --')
+  console.log(value)
   if( value ) 
     return true
   else
   })
   return data
 }
+
+
+export const getPref = async () => {
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + `backend/api/profiles/myprofile/`, {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  //await Preferences.set({
+    //key: 'profile', 
+    //value: data 
+  //})
+  //console.info(data)
+  return data
+}
+export const likeCourse = async (cid) => {
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + `backend/api/profiles/like_course/?cid=${cid}`, {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  console.info(data)
+  return data
+}

src/views/ProfilePage.vue

       <!--
       <ion-button @click='clear'>Clear Pref</ion-button>
       <ion-button @click='btnLogout'>Btn Logout</ion-button> -->
-      <template v-if="isLogin">
+      <template v-if="refIsLogin && myprofile">
+        
         <ion-list>
           <ion-list-header>
             <ion-label>Notifications</ion-label>
             <ion-label>Select Courses You like</ion-label>
           </ion-list-header>
           <ion-item>
-          <ion-select aria-label="Fruit" placeholder="Select all fruits that apply" 
+          <ion-select aria-label="Training Courses" placeholder="Select Course You like" 
               :compareWith="compareWith" @ionChange="handleChange($event)">
             <ion-select-option :value="c" v-for="c in list_courses">{{ c.name }}</ion-select-option>
           </ion-select>
           </ion-item>
         </ion-list>
-        <div class='ion-padding'>
+        <div class='ion-padding' v-if="myprofile">
           <h1>I love ...</h1>
-          <ion-chip v-for="s in selecteds">
-            <ion-label>{{ s }}</ion-label>
+          <ion-chip v-for="s in myprofile.course_likes">
+            <ion-label>{{ s.name }}</ion-label>
             <ion-icon :icon="close" @click="removeItem(s)"></ion-icon>
           </ion-chip>
         </div>
               <ion-button @click='fbLogin' expand='full'>Facebook Login</ion-button>
             </ion-col>
             <ion-col size=6>
-              <ion-button @click='ggLogin' expand='full'>Google Login</ion-button>
+              <ion-button @click='ggLoginClick' expand='full'>Google Login</ion-button>
             </ion-col>
           </ion-row>
         </ion-grid>
+        <ion-text color="danger" v-if="formError">{{ formError }}</ion-text>
       </template>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonRow, IonCol, IonGrid, IonToggle, IonLabel, IonChip, IonIcon, IonSelect, IonSelectOption } from '@ionic/vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonRow, IonCol, IonGrid, IonToggle, IonLabel, IonChip, IonIcon, IonSelect, IonSelectOption, IonList, IonListHeader, IonItem, IonText } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 import LoginForm from '@/components/LoginForm.vue';
 import { defineComponent, onMounted } from 'vue';
 import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
-import { facebookLogin, setUserToken, logout, clearPref, BASE_URL, listCourses } from '@/composable/settings';
+import { facebookLogin, setUserToken, logout, clearPref, BASE_URL, listCourses, getPref, likeCourse, isLogin, ggLogin } from '@/composable/settings';
 import { InAppBrowser } from '@capgo/inappbrowser'
 import { close, closeCircle, pin } from 'ionicons/icons';
 
   //'user_gender',
 ];
 
-const isLogin = ref(false)
+const refIsLogin = ref(false)
 const liveNoti = ref(true)
 const favCourseNoti = ref(true)
 const newsNoti = ref(true)
 const list_courses = ref([])
-
+const formError = ref(null)
 const selecteds = ref([])
+const myprofile = ref()
 
 const openReset = async () => {
   console.log("open Reset")
   console.info("bw ", browser)
   InAppBrowser.addListener("urlChangeEvent", urlChange)
 }
-const removeItem = (s) => {
+const removeItem = async(s) => {
+  /*
   let temp = selecteds.value 
   temp = temp.filter( e => e !== s)
   console.log(temp)
-  selecteds.value = temp
+  selecteds.value = temp*/
+  myprofile.value  = await likeCourse(s.id)
 }
 const urlChange = (event) => {
   console.info("url change ", event)
   //accounts/password_reset/done/
 }
 
-const ggLogin = async () => {
+const ggLoginClick = async () => {
+  console.log("ggLogin")
   const response = await GoogleAuth.signIn();
-  console.log(response);
-  console.log(response.accessToken)
-  if( response.authentication.accessToken ) {
-    isLogin.value = true
+  let t1 = response.authentication.accessToken;
+  let t2 = response.authentication.idToken;
+  let t3 = response.authentication.refreshToken;
+  let token = response.authentication.idToken
+  console.log(token)
+  if(response.authentication) {
+    try{ 
+      let d = await ggLogin(t1, t2)
+      await setUserToken(d.key)
+      myprofile.value  = await getPref()
+      refIsLogin.value = true
+      
+    }catch(error) {
+      formError.value = "Please Check Your UserId/Password"
+      console.log(error)
+    }
   }
 }
 
   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
+    try{
+      let d = await facebookLogin(result.accessToken)
+      console.log("facebook authen ", d)
+      await setUserToken(d.key)
+      myprofile.value  = await getPref()
+      await getProfile()
+      // Login successful.
+      refIsLogin.value = true
+    }catch(error) {
+      formError.value = "Please Check Your UserId/Password"
+    }
     console.log(`Facebook access token is ${result.accessToken.token}`);
   }
 }
 const fbLogout = async () => {
   await FacebookLogin.logout();
-  isLogin.value = false
+  await GoogleAuth.signOut()
+  refIsLogin.value = false
   await logout()
 }
 const btnLogout = async () => {
-  isLogin.value = false
+  refIsLogin.value = false
   await logout()
 }
 onIonViewWillEnter(async () => {
+  console.log("ion view will enter")
+  console.log(await isLogin())
   const result = await (<FacebookLoginResponse>(
     FacebookLogin.getCurrentAccessToken()
   ));
   console.log(result == undefined)
   if (result != undefined && result.accessToken) {
     console.log(`Facebook access token is ${result.accessToken.token}`);
-    isLogin.value = true
+    refIsLogin.value = true
     await getProfile()
   }else {
-    isLogin.value = false
+    refIsLogin.value = false
   }
 
   list_courses.value = await listCourses()
   ggCheckLogin()
+  refIsLogin.value = await isLogin()
+  if( refIsLogin.value == true ) {
+    myprofile.value  = await getPref()
+  }
 
 })
 const getProfile = async () => {
 }
 const ggCheckLogin = async() => {
     GoogleAuth.refresh()
-        .then((data) => {
+        .then(async (data) => {
             if (data.accessToken) {
-                isLogin.value = true
+                refIsLogin.value = true
+                myprofile.value  = await getPref()
             }
         })
         .catch((error) => {
   await clearPref()
 }
 const userLogin = async (data) => {
-  console.info("user login ", data)
+  console.info("user login = ", data)
+  console.info(data.key)
   if(data.error) {
     console.log("ERROR")
   }else {
     await setUserToken(data.key)
     
     // Login successful.
-    isLogin.value = true
+    refIsLogin.value = true
   }
 }
 
 const compareWith = (o1, o2) =>  {
   return o1 && o2 ? o1.id === o2.id : o1 === o2;
 }
-const handleChange = (ev) =>{
+const handleChange = async (ev) =>{
   console.log('Current value:', ev.detail.value);
-  selecteds.value.push(ev.detail.value.name)
+  let v = ev.detail.value
+  myprofile.value  = await likeCourse(v.id)
+  if( selecteds.value.indexOf(v.name) == -1 ) {
+    selecteds.value.push(v.name)
+  }
+
 }
 </script>