login page

src/app/extpages/login/login.page.html

@@ -54,6 +54,7 @@
           size="small"
           shape="round"
           expand="block"
+          style="padding: 0px 30px 0px 30px;"
           (click)="startSignup()"
         >
           Sign up
@@ -62,4 +63,33 @@
     </ion-row>
 
   </ion-grid>
+  <div *ngIf="showSocial == true ">
+
+    <div style="background-color: #fdf9fc;
+        margin-left: 20px;
+        margin-right: 20px;
+        border-radius: 10px; padding: 0px 15px 0px 15px;">
+      <div class="simp_lbl_tx">Or Continue With</div>
+      <div class="button">
+        <ion-buttons>
+          <ion-button (click) ="onLoginFacebook()">
+            <ion-icon name="logo-facebook"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-buttons>
+          <ion-button (click) ="onLoginGoogle()" >
+            <ion-icon name="logo-google"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-buttons *ngIf="ios">
+          <ion-button (click) ="onLoginApple()" >
+            <ion-icon name="logo-apple"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </div>
+    </div>
+
+  </div>
 </ion-content>

src/app/extpages/login/login.page.scss

@@ -56,3 +56,23 @@ ion-button {
   font-size: 14px;
   color: var(--ion-color-primary);
 }
+
+.button {
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  justify-content: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+
+  ion-buttons {
+    margin: 0 10px;
+
+    ion-button {
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+      border-radius: 10px;
+      width: 40px;
+      height: 40px;
+    }
+  }
+}

src/app/extpages/login/login.page.ts

@@ -11,6 +11,9 @@ export class LoginPage implements OnInit {
   @ViewChild('password') password! : string;
 
 isDisabled:boolean=true;
+showSocial:boolean=true;
+ios:boolean=true;
+
 
   constructor( private router: Router) { }
 
@@ -33,4 +36,13 @@ isDisabled:boolean=true;
   startSignup(){
     this.router.navigate(['register']);
   }
+  onLoginFacebook(){
+
+  }
+  onLoginGoogle(){
+
+  }
+  onLoginApple(){
+
+  }
 }

src/app/extpages/register/register.page.html

@@ -1,13 +1,14 @@
-<ion-header [translucent]="true">
+<ion-header mode="ios" class="ion-no-border">
   <ion-toolbar>
-    <ion-title>register</ion-title>
+    <ion-buttons slot="start" (click)="onBack()">
+      <ion-button>
+        <ion-icon name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Register</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">register</ion-title>
-    </ion-toolbar>
-  </ion-header>
+
 </ion-content>

src/app/extpages/register/register.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {NavController} from "@ionic/angular";
 
 @Component({
   selector: 'app-register',
@@ -7,9 +8,11 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RegisterPage implements OnInit {
 
-  constructor() { }
+  constructor(private navctr: NavController) { }
 
   ngOnInit() {
   }
-
+  onBack(){
+    this.navctr.back();
+  }
 }