profile

ios/App/Podfile

   pod 'CapacitorPushNotifications', :path => '../../node_modules/@capacitor/push-notifications'
   pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+  pod 'CapgoInappbrowser', :path => '../../node_modules/@capgo/inappbrowser'
   pod 'CodetrixStudioCapacitorGoogleAuth', :path => '../../node_modules/@codetrix-studio/capacitor-google-auth'
 end
 

ios/App/Podfile.lock

     - Capacitor
   - CapacitorStatusBar (5.0.6):
     - Capacitor
+  - CapgoInappbrowser (1.2.19):
+    - Capacitor
   - CodetrixStudioCapacitorGoogleAuth (0.0.1):
     - Capacitor
     - GoogleSignIn (~> 6.2.4)
   - "CapacitorPushNotifications (from `../../node_modules/@capacitor/push-notifications`)"
   - "CapacitorShare (from `../../node_modules/@capacitor/share`)"
   - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
+  - "CapgoInappbrowser (from `../../node_modules/@capgo/inappbrowser`)"
   - "CodetrixStudioCapacitorGoogleAuth (from `../../node_modules/@codetrix-studio/capacitor-google-auth`)"
   - Firebase/Messaging
 
     :path: "../../node_modules/@capacitor/share"
   CapacitorStatusBar:
     :path: "../../node_modules/@capacitor/status-bar"
+  CapgoInappbrowser:
+    :path: "../../node_modules/@capgo/inappbrowser"
   CodetrixStudioCapacitorGoogleAuth:
     :path: "../../node_modules/@codetrix-studio/capacitor-google-auth"
 
   CapacitorPushNotifications: b31e326c6e4eb216a622041d6ca21a973f34943f
   CapacitorShare: cd41743331cb71d217c029de54b681cbd91e0fcc
   CapacitorStatusBar: 565c0a1ebd79bb40d797606a8992b4a105885309
+  CapgoInappbrowser: a1d7b17df89659ece82ad102a0775786c6166512
   CodetrixStudioCapacitorGoogleAuth: fcce058390347c1ce5d8ac4764bdf1f5c1ee233b
   FBAEMKit: af2972f39bb0f3f7c45998f435b007833c32ffb2
   FBSDKCoreKit: 19e2e18b3be578d7a51fed8fdd8c152bef0b9511
   nanopb: d4d75c12cd1316f4a64e3c6963f879ecd4b5e0d5
   PromisesObjC: c50d2056b5253dadbd6c2bea79b0674bd5a52fa4
 
-PODFILE CHECKSUM: b5088696bfe6f308f08046e80f0b75910bd6bc77
+PODFILE CHECKSUM: e092ee1cde7b2ee2c683b5d37e9df1aa750682e4
 
 COCOAPODS: 1.12.1

package-lock.json

         "@capacitor/push-notifications": "^5.1.0",
         "@capacitor/share": "^5.0.6",
         "@capacitor/status-bar": "5.0.6",
+        "@capgo/inappbrowser": "^1.2.19",
         "@codetrix-studio/capacitor-google-auth": "^3.3.4",
         "@ionic/vue": "^7.5.4",
         "@ionic/vue-router": "^7.5.4",
         "@capacitor/core": "^5.0.0"
       }
     },
+    "node_modules/@capgo/inappbrowser": {
+      "version": "1.2.19",
+      "resolved": "https://registry.npmjs.org/@capgo/inappbrowser/-/inappbrowser-1.2.19.tgz",
+      "integrity": "sha512-Koyg3a7D2lpccZfW+CZ9JEKE5to5iGbi12DFgPN+TOmMuJLCVAYcWVsR9Q4nXIQCg5f4ExCz7XfBrHNKUBULrQ==",
+      "peerDependencies": {
+        "@capacitor/core": "^5.0.0"
+      }
+    },
     "node_modules/@codetrix-studio/capacitor-google-auth": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@codetrix-studio/capacitor-google-auth/-/capacitor-google-auth-3.3.4.tgz",

package.json

     "@capacitor/push-notifications": "^5.1.0",
     "@capacitor/share": "^5.0.6",
     "@capacitor/status-bar": "5.0.6",
+    "@capgo/inappbrowser": "^1.2.19",
     "@codetrix-studio/capacitor-google-auth": "^3.3.4",
     "@ionic/vue": "^7.5.4",
     "@ionic/vue-router": "^7.5.4",

src/components/LoginForm.vue

+<template>
+  <div class='ion-padding'>
+          <ion-input label="Username"  v-model="username" label-placement="floating" fill="outline" placeholder="Example, john"
+                                                                                                ></ion-input>
+          <ion-input label="Password" label-placement='floating' fill='outline' v-model="password" type="password" placeholder="Password"></ion-input>
+          <ion-text color="danger" v-if="formError">{{ formError }}</ion-text>
+          <ion-button @click="login" class=' ion-margin-top' expand='full'>Login</ion-button>
+  </div>
+</template>
+<script setup>
+
+import {  IonButton, IonList,IonLabel,
+IonItem, IonInput, toastController, useIonRouter, IonText } from '@ionic/vue';
+import { defineComponent, onMounted } from 'vue';
+
+import { userLogin } from '@/composable/settings';
+
+import { ref } from 'vue';
+
+const username = ref()
+const password = ref()
+const formError = ref(null)
+
+const emit = defineEmits(['userLogin'])
+onMounted( () => {
+  
+})
+const login = async () => {
+  try{
+    const data = await userLogin(username.value, password.value)
+    emit('userLogin', {data:data})
+  }
+  catch(error){
+    console.info("error ", error)
+    formError.value = error.response.data.non_field_errors[0]
+    emit('userLogin', {error:error})
+  }
+}
+</script>

src/composable/settings.ts

 import { CapacitorHttp } from '@capacitor/core';
-import Axios from "axios";
-//import axios from "axios";
+//import Axios from "axios";
+import axios from "axios";
 import { setupCache } from 'axios-cache-interceptor';
 
 
 export const BASE_URL = 'http://localhost:8020/'
 //export const BASE_URL = 'https://www.tigermuaythai.live/'
 
-const axios = setupCache(Axios); 
+//const axios = setupCache(Axios); 
 //
 //axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
 //axios.defaults.xsrfCookieName = "csrftoken";
   console.log("facebook 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}, {
+    headers: {
+      'Content-Type': 'application/json', 
+    }
+  })
+  console.log("login =  data", data)
+  return data
+}
 
 export const logout = async() => {
 
   })
   return data
 }
+export const resetPassword = async (email) => {
+  console.info(" email ", email)
+  const { data } = await axios.post(BASE_URL + 'password-reset/',{
+    email: email,
+  }, {
+    headers: {
+      'Content-Type': 'application/json', 
+    }
+  })
+  return data
+}

src/router/index.ts

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

src/views/ProfilePage.vue

    <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Listen now</ion-title>
+        <ion-title>User Profile</ion-title>
       </ion-toolbar>
     </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>
+      <ion-button @click='btnLogout'>Btn Logout</ion-button> -->
       <template v-if="isLogin">
-      <ion-button @click='fbLogout'>Logout</ion-button>
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Notifications</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-toggle v-model="liveNoti">Receive Live Notifications</ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-toggle v-model="newsNoti">Receive News Update</ion-toggle>
+          </ion-item>
+          <ion-list-header>
+            <ion-label>Martial Arts, I Love</ion-label>
+          </ion-list-header>
+        </ion-list>
+      <ion-button @click='fbLogout' expand='full'>Logout</ion-button>
       </template>
       <template v-else>
-        <ion-button @click='fbLogin'>Facebook Login</ion-button>
-        <ion-button @click='ggLogin'>Google Login</ion-button>
+        <LoginForm @user-login="userLogin" />
+        <ion-grid>
+            <ion-row>
+              <ion-col size=6>
+                <ion-button fill='clear' router-link="/tabs/signup">Signup</ion-button>
+              </ion-col>
+              <ion-col  size=6>
+                  <ion-button @click="openReset" fill='clear' class='ion-float-right'>Reset Password</ion-button>
+              </ion-col>
+            </ion-row>
+        </ion-grid>
+        <ion-grid>
+          <ion-row class='ion-justify-content-center'>
+            <ion-col size=6>
+              <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-col>
+          </ion-row>
+        </ion-grid>
       </template>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter } from '@ionic/vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonRow, IonCol, IonGrid, IonToggle, IonLabel } 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 } from '@/composable/settings';
+import { facebookLogin, setUserToken, logout, clearPref, BASE_URL } from '@/composable/settings';
+import { InAppBrowser } from '@capgo/inappbrowser'
+
+
 
 onMounted(() => {
   GoogleAuth.initialize();
 ];
 
 const isLogin = ref(false)
+const liveNoti = ref(true)
+const favCourseNoti = ref(true)
+const newsNoti = ref(true)
+
+
+const openReset = async () => {
+  console.log("open Reset")
+  const browser = await InAppBrowser.open({ url: BASE_URL + "accounts/password_reset/" });
+  console.info("bw ", browser)
+  InAppBrowser.addListener("urlChangeEvent", urlChange)
+}
+
+const urlChange = (event) => {
+  console.info("url change ", event)
+  if(event.url.includes("/accounts/password_reset/done/")) {
+    setTimeout(async () => {
+      InAppBrowser.close()
+    }, 3000)
+  }else {
+  
+  }
+  //accounts/password_reset/done/
+}
 
 const ggLogin = async () => {
   const response = await GoogleAuth.signIn();
 const clear = async() => {
   await clearPref()
 }
+const userLogin = async (data) => {
+  console.info("user login ", data)
+  if(data.error) {
+    console.log("ERROR")
+  }else {
+    console.log("Success")
+    await setUserToken(data.key)
+    
+    // Login successful.
+    isLogin.value = true
+  }
+}
 </script>

src/views/ResetPassPage.vue

+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>
+          Reset Password
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class='ion-padding'>
+
+          <ion-input label="Email" label-placement="floating" v-model="email" fill="outline" type="email" placeholder="Example, hello@gmail.com"></ion-input>
+          <ion-button @click="resetPasswordBtn">Reset Password</ion-button>
+          <ion-input label="Username"  ref="username" label-placement="floating" fill="outline" placeholder="Example, john"
+                                                                                                ></ion-input>
+          <ion-input label="Password" label-placement='floating' fill='outline' ref="password" type="password" placeholder="Password"></ion-input>
+          <ion-input label="Password Confirmation" label-placement='floating' fill='outline' ref="password2" type="password" placeholder="Password Confirmation"></ion-input>
+          <ion-text color="danger" v-if="formError">{{ formError }}</ion-text>
+          <ion-button @click="signup" class=' ion-margin-top'>Signup</ion-button>
+    </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, toastController, useIonRouter } from '@ionic/vue';
+import { defineComponent, onMounted } from 'vue';
+import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
+import { searchMat, callUrl,restSignup, resetPassword } 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 ionRouter = useIonRouter();
+const formError = ref(null)
+
+
+const resetPasswordBtn = async() => {
+  console.log("reset password")
+  try{
+    const data = await resetPassword(email.value)
+    console.info(data)
+  }catch(error) {
+    console.info(error)
+  }
+}
+const signup = async () => { 
+  clearError(username)
+  clearError(email)
+  clearError(password)
+  clearError(password2)
+  formError.value = null
+  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)
+    await presentToast("Sign up successful", "top")
+    ionRouter.navigate('/tabs/tab4', 'forward', 'replace');
+  }catch( err ) {
+    console.log("-- error --")
+    console.log(err)
+    for(const [k,v] of Object.entries(err.response.data))  {
+      if( k == "username" ){
+        showError(username, v[0])
+      }
+      if( k == "email" ){
+        showError(email, v[0])
+      }
+      if( k == "password1" ){
+        showError(password, v[0])
+      }
+      if( k == "password2" ){
+        showError(password2, v[0])
+      }
+      if( k == "non_field_errors" ) {
+        formError.value = v[0]
+      }
+    }
+  }
+}
+
+const showError = (obj, error) => {
+  obj.value.$el.errorText = error
+  obj.value.$el.classList.add('ion-invalid')
+  obj.value.$el.classList.add('ion-touched');
+}
+const clearError = (obj) => {
+  obj.value.$el.classList.remove("ion-valid")
+  obj.value.$el.classList.remove("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');
+}
+const presentToast = async (msg, position: 'top' | 'middle' | 'bottom') => {
+  console.log("present toast")
+  const toast = await toastController.create({
+    message: msg,
+    duration: 3000,
+    position: position,
+    positionAnchor: "header",
+    color: "success"
+  });
+
+  await toast.present();
+}
+</script>

src/views/SignupPage.vue

           <ion-input label="Password" label-placement='floating' fill='outline' ref="password" type="password" placeholder="Password"></ion-input>
           <ion-input label="Password Confirmation" label-placement='floating' fill='outline' ref="password2" type="password" placeholder="Password Confirmation"></ion-input>
           <ion-text color="danger" v-if="formError">{{ formError }}</ion-text>
-          <ion-button @click="signup" class=' ion-margin-top'>Signup</ion-button>
+          <ion-button @click="signup" expand='full' class=' ion-margin-top'>Signup</ion-button>
     </ion-content>
   </ion-page>
 </template>