TMTApp/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-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-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>