signup

src/views/SignupPage.vue

@@ -11,37 +11,14 @@
       </ion-toolbar>
     </ion-header>
     <ion-content class='ion-padding'>
-      <ion-list>
-        <ion-item>
+
           <ion-input label="Username"  ref="username" label-placement="floating" fill="outline" placeholder="Example, john"
-                                                                                                error-text="Help me" 
                                                                                                 ></ion-input>
-        </ion-item>
-        <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-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>
@@ -49,7 +26,7 @@
 <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';
+    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 } from '@/composable/settings';
@@ -67,24 +44,54 @@ const password = ref(null)
 const password2 = ref(null)
 const email = ref(null)
 const input = ref(null)
+const ionRouter = useIonRouter();
+const formError = 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');
+  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)
-    username.value.$el.classList.add('ion-invalid')
+    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])?)*$/
@@ -110,4 +117,16 @@ const markTouched = () => {
 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>