From 092aa743e9492728f8adb6228d3d58b39d6655f9 Mon Sep 17 00:00:00 2001
From: Chris Veilleux <veilleux.chris@gmail.com>
Date: Thu, 21 Feb 2019 19:14:31 -0600
Subject: [PATCH] refactored to include username and action buttons.

---
 .../app/profile/login/login.component.html    | 30 +++++++++++--------
 .../app/profile/login/login.component.scss    | 27 +++++++++++++++--
 .../src/app/profile/login/login.component.ts  |  3 ++
 3 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/projects/account/src/app/profile/login/login.component.html b/projects/account/src/app/profile/login/login.component.html
index f9c3def..45f5f9f 100644
--- a/projects/account/src/app/profile/login/login.component.html
+++ b/projects/account/src/app/profile/login/login.component.html
@@ -1,17 +1,21 @@
 <mat-card>
     <mat-toolbar>
-        <span>Login</span>
+        <span>Profile</span>
     </mat-toolbar>
-    <div fxLayout.gt-sm="row" fxLayout="column">
-        <mat-form-field fxFlex.gt-sm="50%" appearance="outline">
-            <mat-label>Email Address</mat-label>
-            <input
-                matInput
-                required
-                type="email"
-                value="{{account.emailAddress}}"
-            >
-            <mat-hint>Uniquely identifies your account</mat-hint>
-        </mat-form-field>
-    </div>
+    <mat-card-content fxLayout="row" fxLayout.lt-md="column"  fxLayoutAlign="space-between center">
+        <div fxFlex>
+            <div class="profile-text" fxLayout="row" fxLayoutAlign="start center">
+                <span class="mat-subheading-2">Email:</span>
+                <p class="mat-body">{{account.emailAddress}}</p>
+            </div>
+            <div fxLayout="row" fxLayoutAlign="start center">
+                <span class="mat-subheading-2">Username:</span>
+                <p class="mat-body">{{account.username}}</p>
+            </div>
+        </div>
+        <div fxLayout="column" fxLayoutAlign="center">
+            <button mat-button>CHANGE USERNAME</button>
+            <button mat-button>CHANGE PASSWORD</button>
+        </div>
+    </mat-card-content>
 </mat-card>
diff --git a/projects/account/src/app/profile/login/login.component.scss b/projects/account/src/app/profile/login/login.component.scss
index e07e674..ba24334 100644
--- a/projects/account/src/app/profile/login/login.component.scss
+++ b/projects/account/src/app/profile/login/login.component.scss
@@ -1,9 +1,32 @@
+@import "~@angular/material/theming";
+@import "mycroft-colors";
+@import "~src/stylesheets/components/buttons";
 @import "~src/stylesheets/components/cards";
 
+
 mat-card {
     @include section-card;
-    margin-left: auto;
-    margin-right: auto;
+
+    mat-card-content {
+        margin-left: 16px;
+        margin-right: 8px;
+
+        .mat-subheading-2 {
+            color: mat-color($mycroft-accent, A700);
+            font-weight: bold;
+            margin: 8px;
+            min-width: 120px;
+        }
+        .mat-body {
+            margin: 0;
+            min-width: 200px;
+        }
+
+        button {
+            @include action-button-primary;
+            margin: 8px;
+        }
+    }
 }
 
 
diff --git a/projects/account/src/app/profile/login/login.component.ts b/projects/account/src/app/profile/login/login.component.ts
index b368fa5..5f1bdb1 100644
--- a/projects/account/src/app/profile/login/login.component.ts
+++ b/projects/account/src/app/profile/login/login.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
 
+import { faEdit } from '@fortawesome/free-solid-svg-icons';
+
 import { Account } from '../profile.service';
 
 @Component({
@@ -9,6 +11,7 @@ import { Account } from '../profile.service';
 })
 export class LoginComponent {
     @Input() account: Account;
+    public editIcon = faEdit;
 
     constructor() { }
 }