Merge pull request #87 from MycroftAI/feature/enhance-profile

Feature/enhance profile

projects/account/src/app/modules/profile/components/cards/agreements/agreements.component.html

@@ -1,36 +1,21 @@
 <mat-card>
-    <mat-toolbar>
-        <span>Agreements</span>
-    </mat-toolbar>
-    <mat-card-content fxLayout="column" fxLayoutAlign="start none">
-        <ng-container *ngFor="let agreement of account.agreements">
-            <div
-                    *ngIf="agreement.type !== 'Open Dataset'"
-                    class="profile-text"
-                    fxLayout="row"
-                    fxLayout.lt-md="column"
-                    fxLayoutAlign="space-between center"
-            >
-                <span fxFlex.gt-sm="30" class="mat-subheading-2">{{agreement.type}}:</span>
-                <p fxFlex class="mat-body">Accepted {{agreement.acceptDate}}</p>
-                <a fxFlex.gt-sm="20" mat-button target="_blank" href="{{buildAgreementUrl(agreement.type)}}">
-                    <fa-icon [icon]="documentIcon"></fa-icon>
-                    View Document
-                </a>
-            </div>
-        </ng-container>
-        <div
-                class="profile-text"
-                fxLayout="row"
-                fxLayout.lt-md="column"
-                fxLayoutAlign="space-between center"
-        >
-            <span fxFlex.gt-sm="30" class="mat-subheading-2">Open Dataset:</span>
-            <p fxFlex class="mat-body">{{openDatasetOptInDate}}</p>
-            <button fxFlex.gt-sm="20" mat-button (click)="onOptInOrOut()">
-                <fa-icon [icon]="optInOutIcon"></fa-icon>
-                {{openDatasetButtonText}}
-            </button>
+    <mat-card-header>
+        <fa-icon mat-card-avatar [icon]="agreementIcon"></fa-icon>
+        <mat-card-title>Agreements</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <div fxLayout="row">
+            <ng-container *ngFor="let agreement of account.agreements">
+                <div *ngIf="agreement.type !== 'Open Dataset'" fxFlex="50">
+                    <mat-card-subtitle>
+                        {{agreement.type}}
+                    <a mat-icon-button color="primary" target="_blank" href="{{buildAgreementUrl(agreement.type)}}">
+                        <fa-icon [icon]="documentIcon"></fa-icon>
+                    </a>
+                    </mat-card-subtitle>
+                    <p class="mat-body">Accepted {{agreement.acceptDate}}</p>
+                </div>
+            </ng-container>
         </div>
     </mat-card-content>
 </mat-card>

projects/account/src/app/modules/profile/components/cards/agreements/agreements.component.scss

@@ -1,35 +1,17 @@
 @import "@angular/material/theming";
 @import "components/cards";
-@import "mycroft-colors";
 
 mat-card {
-    @include section-card;
+    @include selene-card;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 800px;
 
-    mat-card-content {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: 700px;
-
-        .mat-subheading-2 {
-            color: mat-color($mycroft-accent, A700);
-            font-weight: bolder;
-            margin: 8px;
-            min-width: 120px;
-        }
-        .mat-body {
-            margin: 0;
-        }
-
-        button {
-            color: mat-color($mycroft-primary);
-        }
-
-        a {
-            color: mat-color($mycroft-primary);
-        }
-
-        fa-icon {
-            margin-right: 8px;
-        }
+    mat-card-subtitle {
+        margin-bottom: 0;
+    }
+    .mat-body {
+        margin-top: 4px;
+        margin-bottom: 16px;
     }
 }

projects/account/src/app/modules/profile/components/cards/agreements/agreements.component.ts

@@ -18,7 +18,7 @@ and limitations under the License.
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
-import { faFileAlt, faSignInAlt, faSignOutAlt, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { faFileAlt, faHandshake, faSignInAlt, faSignOutAlt, IconDefinition } from '@fortawesome/free-solid-svg-icons';
 
 import { Account } from '@account/models/account.model';
 
@@ -30,6 +30,7 @@ import { Account } from '@account/models/account.model';
 export class AgreementsComponent implements OnInit {
     @Input() account: Account;
     @Output() openDatasetOptIn = new EventEmitter<boolean>();
+    public agreementIcon: IconDefinition = faHandshake;
     public documentIcon = faFileAlt;
     public optInOutIcon: IconDefinition;
     public openDatasetOptInDate: string;

projects/account/src/app/modules/profile/components/cards/delete/delete.component.html

@@ -1,12 +1,28 @@
 <mat-card>
-    <mat-toolbar>
-        <span>Delete Account</span>
-    </mat-toolbar>
-    <div fxLayout="column" fxLayoutAlign="start center">
+    <mat-card-header>
+        <fa-icon mat-card-avatar [icon]="deleteIcon"></fa-icon>
+        <mat-card-title>Delete Account</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
         <span class="mat-h3">CAUTION</span>
         <div id="delete-warning">
             <div *ngFor="let paragraph of deleteWarning" class="mat-body-2">{{paragraph}}</div>
         </div>
-        <button mat-raised-button color="warn" (click)="confirmDelete()">DELETE ACCOUNT</button>
-    </div>
+    </mat-card-content>
+    <mat-card-actions>
+        <button mat-button (click)="confirmDelete()">DELETE ACCOUNT</button>
+    </mat-card-actions>
 </mat-card>
+
+<!--<mat-card>-->
+<!--    <mat-toolbar>-->
+<!--        <span>Delete Account</span>-->
+<!--    </mat-toolbar>-->
+<!--    <div fxLayout="column" fxLayoutAlign="start center">-->
+<!--        <span class="mat-h3">CAUTION</span>-->
+<!--        <div id="delete-warning">-->
+<!--            <div *ngFor="let paragraph of deleteWarning" class="mat-body-2">{{paragraph}}</div>-->
+<!--        </div>-->
+<!--        <button mat-button color="warn" (click)="confirmDelete()">DELETE ACCOUNT</button>-->
+<!--    </div>-->
+<!--</mat-card>-->

projects/account/src/app/modules/profile/components/cards/delete/delete.component.scss

@@ -1,25 +1,20 @@
+@import "@angular/material/theming";
 @import "components/cards";
 
 mat-card {
-    @include section-card;
+    @include selene-card;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 800px;
 
-    button {
-        color: white;
-        margin-bottom: 10px;
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    #delete-warning {
-        margin-bottom: 24px;
-
-        .mat-body-2 {
-            text-align: center;
+    mat-card-header {
+        fa-icon {
+            color: mat-color($mycroft-warn)
         }
     }
-
-    .mat-h3 {
-        text-align: center;
-        font-weight: bold;
+    button {
+        @include action-button-warn;
+        margin-right: 16px;
+        margin-bottom: 16px;
     }
 }

projects/account/src/app/modules/profile/components/cards/delete/delete.component.ts

@@ -19,6 +19,8 @@ and limitations under the License.
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 
+import { faUserXmark, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+
 import { DeleteConfirmComponent } from '../../modals/delete-confirm/delete-confirm.component';
 
 @Component({
@@ -27,6 +29,7 @@ import { DeleteConfirmComponent } from '../../modals/delete-confirm/delete-confi
     styleUrls: ['./delete.component.scss']
 })
 export class DeleteComponent implements OnInit {
+    public deleteIcon: IconDefinition = faUserXmark;
     public deleteWarning: string[];
 
     constructor(public confirmDialog: MatDialog) { }

projects/account/src/app/modules/profile/components/cards/login/login.component.html

@@ -1,21 +1,26 @@
 <mat-card>
-    <mat-toolbar>
-        <span>Profile</span>
-    </mat-toolbar>
-    <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>
+    <mat-card-header>
+        <fa-icon mat-card-avatar [icon]="loginIcon"></fa-icon>
+        <mat-card-title>Login Information</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <div fxLayout="row">
+            <div fxFlex="50">
+                <mat-card-subtitle>Email Address*</mat-card-subtitle>
                 <p class="mat-body">{{account.emailAddress}}</p>
             </div>
-            <div fxLayout="row" fxLayoutAlign="start center">
-                <span class="mat-subheading-2">Username:</span>
+            <div fxFlex="50">
+                <mat-card-subtitle>Username</mat-card-subtitle>
                 <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>
+        <p class="mat-body">
+            * Your email address uniquely identifies your account.  It will be used to send
+            messages related to actions taken on your account, such as a password change request.
+        </p>
     </mat-card-content>
+    <mat-card-actions>
+        <a mat-button>CHANGE EMAIL ADDRESS</a>
+        <a mat-button>CHANGE PASSWORD</a>
+    </mat-card-actions>
 </mat-card>

projects/account/src/app/modules/profile/components/cards/login/login.component.scss

@@ -1,33 +1,19 @@
-@import "../../../../../../../../../node_modules/@angular/material/theming";
-@import "mycroft-colors";
-@import "../../../../../../../../../src/stylesheets/components/buttons";
-@import "../../../../../../../../../src/stylesheets/components/cards";
-
+@import "@angular/material/theming";
+@import "components/cards";
 
 mat-card {
-    @include section-card;
+    @include selene-card;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 800px;
 
     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-card-subtitle {
+            margin-bottom: 0;
         }
         .mat-body {
-            margin: 0;
-            min-width: 200px;
-        }
-
-        button {
-            @include action-button-primary;
-            margin: 8px;
+            margin-top: 4px;
+            margin-bottom: 16px;
         }
     }
 }
-
-
-

projects/account/src/app/modules/profile/components/cards/login/login.component.ts

@@ -18,6 +18,8 @@ and limitations under the License.
 
 import { Component, Input } from '@angular/core';
 
+import { faAddressCard, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+
 import { Account } from '@account/models/account.model';
 
 @Component({
@@ -27,6 +29,7 @@ import { Account } from '@account/models/account.model';
 })
 export class LoginComponent {
     @Input() account: Account;
+    public loginIcon: IconDefinition = faAddressCard;
 
     constructor() { }
 }

projects/account/src/app/modules/profile/components/cards/membership/membership.component.html

@@ -1,17 +1,37 @@
-<mat-card>
-    <mat-toolbar>
-        <span>Support Mycroft</span>
-    </mat-toolbar>
-    <mat-card-content fxLayout="column" fxLayoutAlign="center center">
-        <span>Mycroft supporters ensure we can keep the services open and available.</span>
-        <account-membership-options
-                [accountMembership]="accountMembership"
-                [membershipTypes]="membershipTypes"
-                (membershipChange)="updateAccount($event)"
-        >
-        </account-membership-options>
-        <span *ngIf="accountMembership && accountMembership.duration" id="subscription-date" class="mat-body">
-            Proudly supporting Mycroft for {{accountMembership.duration}}!
-        </span>
+<mat-card *ngIf="!accountMembership">
+    <mat-card-header>
+        <fa-icon mat-card-avatar [icon]="membershipIcon"></fa-icon>
+        <mat-card-title>Membership Status</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <p class="mat-body">
+            You have chosen not to subscribe to Mycroft's membership program.
+        <p class="mat-body">
+            Mycroft supporters
+            ensure we can keep the services open and available.  Your credit card information is
+            sent to the payment service and not stored on Mycroft's servers.
+        </p>
     </mat-card-content>
+    <mat-card-actions>
+        <a mat-button>$1.99 USD MONTHLY</a>
+        <a mat-button>$19.99 USD YEARLY</a>
+    </mat-card-actions>
+</mat-card>
+
+<mat-card *ngIf="accountMembership">
+    <mat-card-header>
+        <fa-icon mat-card-avatar [icon]="membershipIcon"></fa-icon>
+        <mat-card-title>Membership Status</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <p *ngIf="accountMembership.duration" class="mat-body">
+            Proudly supporting Mycroft for {{accountMembership.duration}}!
+        </p>
+        <p *ngIf="!accountMembership.duration" class="mat-body">
+            Thank you for supporting Mycroft!
+        </p>
+    </mat-card-content>
+    <mat-card-actions>
+        <a mat-button color="warn">CANCEL MEMBERSHIP</a>
+    </mat-card-actions>
 </mat-card>

projects/account/src/app/modules/profile/components/cards/membership/membership.component.scss

@@ -1,25 +1,8 @@
-@import "../../../../../../../../../src/stylesheets/components/buttons";
-@import "../../../../../../../../../src/stylesheets/components/cards";
+@import "components/cards";
 
 mat-card {
-    @include section-card;
-
-    .mat-h3 {
-        font-weight: bold;
-        margin-bottom: 10px;
-    }
-
-    mat-button-toggle-group {
-        @include options-button-group;
-        border: none;
-        padding: 16px;
-
-        mat-button-toggle {
-            margin: 8px;
-        }
-    }
-
-    #subscription-date {
-        margin-bottom: 16px;
-    }
+    @include selene-card;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 800px;
 }

projects/account/src/app/modules/profile/components/cards/membership/membership.component.ts

@@ -21,6 +21,8 @@ import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Subscription } from 'rxjs';
 
+import { faCreditCard, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+
 import { AccountMembership } from '@account/models/account-membership.model';
 import { MembershipType } from '@account/models/membership.model';
 import { MembershipUpdate } from '@account/models/membership-update.model';
@@ -39,6 +41,7 @@ export class MembershipComponent implements OnDestroy {
     @Input() membershipTypes: MembershipType[];
     public alignVertical: boolean;
     private mediaWatcher: Subscription;
+    public membershipIcon: IconDefinition = faCreditCard;
 
     constructor(
         public mediaObserver: MediaObserver,

projects/account/src/app/modules/profile/pages/edit/edit.component.html

@@ -1,13 +1,15 @@
 <router-outlet></router-outlet>
-<account-login-edit [account]="account"></account-login-edit>
-<account-membership-edit
-        [accountMembership]="account.membership"
-        [membershipTypes]="membershipTypes"
->
-</account-membership-edit>
-<account-agreements-edit
-        [account]="account"
-        (openDatasetOptIn)="updateOpenDataset($event)"
->
-</account-agreements-edit>
-<account-delete></account-delete>
+<div id="profile" fxLayout="column" fxLayoutAlign="center" fxLayout.xs="column">
+    <account-login-edit [account]="account"></account-login-edit>
+    <account-membership-edit
+            [accountMembership]="account.membership"
+            [membershipTypes]="membershipTypes"
+    >
+    </account-membership-edit>
+    <account-agreements-edit
+            [account]="account"
+            (openDatasetOptIn)="updateOpenDataset($event)"
+    >
+    </account-agreements-edit>
+    <account-delete></account-delete>
+</div>

projects/account/src/app/modules/profile/pages/edit/edit.component.scss

@@ -0,0 +1,5 @@
+#profile {
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}

src/stylesheets/components/_cards.scss

@@ -68,7 +68,6 @@
     margin: 16px;
     max-width: 500px;
     min-width: 300px;
-    //padding: 16px;
 
     mat-card-header {
         fa-icon {
@@ -91,11 +90,12 @@
     }
 
     mat-card-actions {
-        padding-left: 16px;
+        padding-left: 32px;
 
         a {
             @include action-button-primary;
-            margin: 16px;
+            margin-right: 16px;
+            margin-bottom: 16px;
         }
     }
 }