UI update

ui/src/app/pages/login/login.page.html

@@ -1,9 +1,35 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>login</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
-
+  <div class="flex-center">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title color="primary">Login</ion-card-title>
+        <ion-card-subtitle color="secondary">Please sign in with your credentials</ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-item fill="solid">
+          <ion-label position="floating">Email</ion-label>
+          <ion-input type="email" ngModel email></ion-input>
+          <ion-note slot="helper">Enter a valid email</ion-note>
+          <ion-note slot="error">Invalid email</ion-note>
+          <ion-note slot="success">Valid email</ion-note>
+        </ion-item>
+        <ion-item fill="solid">
+          <ion-label position="floating">Password</ion-label>
+          <ion-input type="Password" ngModel password></ion-input>
+          <ion-note slot="helper">Choose a secure password</ion-note>
+        </ion-item>  
+        <ion-button fill="clear" >
+          Forgot Email/Password
+        </ion-button>
+        <ion-button size="full">
+          Login
+          <ion-icon slot="end" name="log-in-outline"></ion-icon>
+        </ion-button>
+        <ion-button fill="clear" color="secondary" size="full">
+          Register
+          <ion-icon slot="end" name="create-outline"></ion-icon>
+        </ion-button>
+      </ion-card-content>
+    </ion-card>
+  </div>
 </ion-content>