refer page

src/app/pages/invite/invite.page.html

@@ -31,17 +31,17 @@
       <ion-card-content>
         <ion-item lines="none">
           <ion-icon slot="start" name="mail-outline"></ion-icon>
-          <ion-input type="email" placeholder="Email"  [(ngModel)]='email'></ion-input>
+          <ion-input type="email" placeholder="Email"  maxlength="55"  [(ngModel)]='email'></ion-input>
         </ion-item>
 
         <ion-item lines="none">
-          <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
-          <ion-input type="text" placeholder="Firstname"  [(ngModel)]='ref_firstname'></ion-input>
+          <ion-icon slot="start" name="text-outline"></ion-icon>
+          <ion-input type="text" placeholder="Firstname" maxlength="15" [(ngModel)]='ref_firstname'></ion-input>
         </ion-item>
 
         <ion-item lines="none">
-          <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
-          <ion-input type="text" placeholder="Lastname"  [(ngModel)]='lastname'></ion-input>
+          <ion-icon slot="start" name="text-outline"></ion-icon>
+          <ion-input type="text" placeholder="Lastname" maxlength="15" [(ngModel)]='lastname'></ion-input>
         </ion-item>
 
         <ion-grid>

src/app/pages/invite/invite.page.scss

@@ -13,9 +13,10 @@ ion-item {
     font-size: 22px;
   }
 }
+ion-card{
+  margin: 0px;
+}
 ion-header {
-
-
   ion-toolbar {
     --background: var(--ion-color-primary);
 

src/app/pages/invite/invite.page.ts

@@ -4,6 +4,7 @@ import {Router} from "@angular/router";
 import { WrenchService } from 'src/app/services/wrench.service';
 import {SessionDataProviderService} from "../../store/session-data-provider.service";
 import {last} from "rxjs/operators";
+import { AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-invite',
@@ -21,7 +22,8 @@ export class InvitePage implements OnInit {
       private navctr: NavController,
       private router: Router,
       public sessionDataProviderService: SessionDataProviderService,
-      private wrenchService: WrenchService
+      private wrenchService: WrenchService,
+      private alertController: AlertController
   ) {
   }
 /*
@@ -40,6 +42,7 @@ export class InvitePage implements OnInit {
   sendRefer(){
 
     if (this.ref_firstname=="" || this.lastname=="" || !this.validateEmail(this.email) ){
+      this.showAlert('Refer Error', 'Email and names required');
       return;
     }
     this.referSendData =
@@ -97,4 +100,24 @@ export class InvitePage implements OnInit {
     );
 
   }
+
+  async showAlert(mtitle: string, amessage: string) {
+
+    const alert = await this.alertController.create({
+      header: 'WrenchBoard',
+      subHeader: mtitle,
+      message: amessage,
+      buttons: ['OK'],
+    });
+
+    await alert.present();
+    //
+    //    let alert = this.alertCtrl.create({
+    //      title: mtitle,
+    //      subTitle: amessage,
+    //      buttons: ['OK']
+    //    });
+    //    alert.present();
+    // //  alert(amessage);
+  }
 }