Create account menu and login page

WORKSPACE

@@ -16,6 +16,15 @@ http_archive(
     ],
 )
 
+http_archive(
+    name = "io_bazel_rules_sass",
+    sha256 = "bfb89ca97a4ad452ca5f623dfde23d2a5f3a848a97478d715881b69b4767d3bb",
+    strip_prefix = "rules_sass-1.49.4",
+    urls = [
+        "https://github.com/bazelbuild/rules_sass/archive/1.49.4.zip",
+    ],
+)
+
 # Fetch rules_nodejs and install its dependencies so we can install our npm dependencies.
 http_archive(
     name = "build_bazel_rules_nodejs",
@@ -78,6 +87,10 @@ load("@rules_pkg//:deps.bzl", "rules_pkg_dependencies")
 
 rules_pkg_dependencies()
 
+load("@io_bazel_rules_sass//:defs.bzl", "sass_repositories")
+
+sass_repositories()
+
 register_toolchains(
     "//tools/git-toolchain:git_linux_toolchain",
     "//tools/git-toolchain:git_macos_x86_toolchain",

apps/prs/src/app/app-routing.module.ts

@@ -1,7 +1,9 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: 'login', loadChildren: () => import('./login/login.module').then((m) => m.LoginModule)},
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

apps/prs/src/app/app.component.html

@@ -1,4 +1,7 @@
-<mat-toolbar color="primary" class="app-header-bar"></mat-toolbar>
+<mat-toolbar color="primary" class="app-header-bar">
+  <span class="spacer"></span>
+  <account-menu-button></account-menu-button>
+</mat-toolbar>
 <mat-sidenav-container class="sidenav-container">
   <mat-sidenav #drawer class="sidenav" mode="side">
     <!-- TODO(josephperrott): Establish need and content for sidenav once appropriate. -->

apps/prs/src/app/app.component.scss

@@ -2,6 +2,10 @@
   position: sticky;
   top: 0;
   z-index: 1;
+
+  .spacer {
+    flex: 1;
+  }
 }
 
 .sidenav {

apps/prs/src/app/app.module.ts

@@ -12,6 +12,7 @@ import {environment} from '../environments/environment';
 import {LayoutModule} from '@angular/cdk/layout';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatSidenavModule} from '@angular/material/sidenav';
+import {AccountModule} from '../../../shared/account/account.module';
 
 @NgModule({
   declarations: [AppComponent],
@@ -25,6 +26,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
     LayoutModule,
     MatToolbarModule,
     MatSidenavModule,
+    AccountModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

apps/prs/src/app/login/login-routing.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {LoginComponent} from './login.component';
+
+const routes: Routes = [{path: '', component: LoginComponent}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LoginRoutingModule {}

apps/prs/src/app/login/login.component.html

@@ -0,0 +1,11 @@
+<mat-card>
+  <mat-card-title>
+    Angular PR Management
+  </mat-card-title>
+
+  <!-- TODO: expand on welcome/login screen content. -->
+
+  <mat-card-actions align="end">
+    <button mat-raised-button color="primary" (click)="signIn()">Sign In</button>
+  </mat-card-actions>
+</mat-card>

apps/prs/src/app/login/login.component.scss

@@ -0,0 +1,4 @@
+.mat-card {
+  width: 500px;
+  margin: 150px auto 0;
+}

apps/prs/src/app/login/login.component.spec.ts

@@ -0,0 +1,24 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {LoginComponent} from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LoginComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/prs/src/app/login/login.component.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {Router} from '@angular/router';
+import {AccountService} from '../../../../shared/account/account.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss'],
+})
+export class LoginComponent {
+  constructor(private account: AccountService, private router: Router) {}
+
+  signIn() {
+    this.account.signInWithGoogle().then((signedIn) => {
+      if (signedIn) {
+        this.router.navigateByUrl('');
+      }
+    });
+  }
+}

apps/prs/src/app/login/login.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {LoginRoutingModule} from './login-routing.module';
+import {LoginComponent} from './login.component';
+
+import {MatCardModule} from '@angular/material/card';
+import {MatButtonModule} from '@angular/material/button';
+import {AccountModule} from '../../../../shared/account/account.module';
+
+@NgModule({
+  declarations: [LoginComponent],
+  imports: [CommonModule, LoginRoutingModule, MatCardModule, MatButtonModule, AccountModule],
+})
+export class LoginModule {}

apps/shared/account/BUILD.bazel

@@ -0,0 +1,33 @@
+load("//tools:defaults.bzl", "ng_module")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+
+package(default_visibility = ["//visibility:private"])
+
+ng_module(
+    name = "account",
+    srcs = glob(
+        [
+            "*.ts",
+        ],
+        exclude = [
+            "*.spec.ts",
+        ],
+    ),
+    assets = [
+        ":account.component.css",
+        "account.component.html",
+    ],
+    deps = [
+        "@npm//@angular/cdk",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/fire",
+        "@npm//@angular/material",
+        "@npm//rxjs",
+    ],
+)
+
+sass_binary(
+    name = "account-style",
+    src = "account.component.scss",
+)

apps/shared/account/account.component.html

@@ -0,0 +1,50 @@
+<button (click)="open()" class="user-photo" referrerpolicy=“no-referrer” style.backgroundImage="url({{account.avatarUrl}})"></button>
+
+<ng-template #menuContent>
+  <div class="account-menu-container mat-elevation-z8 mat-menu-panel">
+    <img referrerpolicy=“no-referrer” class="user-photo" [src]="account.avatarUrl">
+
+    <div class="title-row">
+      <span class="title">{{ account.displayName || 'Welcome!' }}</span>
+      <button class="expand-button" mat-icon-button (click)="providerPanel.toggle()" *ngIf="account.isLoggedIn">
+        <mat-icon>{{providerPanel.expanded ? 'expand_less' : 'expand_more'}}</mat-icon>
+      </button>
+    </div>
+    <ng-container cdkAccordionItem #providerPanel="cdkAccordionItem">
+      <div *ngIf="providerPanel.expanded" class="provider-panel">
+        <div class="provider-row">
+          <img class="provider-icon" src="http://google.com/favicon.ico" />
+          <span class="provider-email">{{ account.googleInfo?.email || "Unknown" }}</span>
+        </div>
+        <div class="provider-row">
+          <img class="provider-icon" src="http://github.com/favicon.ico" />
+          <span class="provider-email">{{ account.githubInfo?.email || "Account Not Linked" }}</span>
+          <button matTooltip ="Link Github account" *ngIf="account.githubInfo === null" mat-icon-button class="link-provider-account"
+            (click)="account.linkWithGithub()">
+            <mat-icon>add_link</mat-icon>
+          </button>
+          <button matTooltip="Unlink Github account" *ngIf="account.githubInfo" mat-icon-button class="link-provider-account"
+            (click)="account.unlinkFromGithub()">
+            <mat-icon>link_off</mat-icon>
+          </button>
+        </div>
+      </div>
+    </ng-container>
+
+    <div class="projected-content">
+      <!--
+        This projected content allows for an application to provide applicatoin specific content or options
+        within the account menu popup.
+      -->
+      <ng-content></ng-content>
+    </div>
+
+    <div class="bottom-row">
+      <span class="spacer"></span>
+      <button *ngIf="!account.isLoggedIn" mat-stroked-button color="primary" (click)="account.signInWithGoogle()">Sign
+        In</button>
+      <button *ngIf="account.isLoggedIn" mat-stroked-button color="primary" (click)="account.signOut()">Sign
+        Out</button>
+    </div>
+  </div>
+</ng-template>

apps/shared/account/account.component.scss

@@ -0,0 +1,119 @@
+button.user-photo {
+  cursor: pointer;
+}
+
+.user-photo {
+  all: unset;
+  box-sizing: border-box;
+  background-size: contain;
+  line-height: 48px;
+  height: 48px;
+  font-size: 48px;
+  width: 48px;
+  padding: 8px;
+  border-radius: 50%;
+}
+
+.account-menu-container {
+  width: 300px;
+  animation-name: fade-in-out;
+  border-radius: 8px;
+  animation-duration: 125ms;
+  animation-timing-function: ease-in-out;
+
+  .spacer {
+    flex: 1;
+  }
+
+  .user-photo {
+    position: absolute;
+    top: -16px;
+    right: -16px;
+    padding: 0;
+    z-index: 1;
+
+    &[src=''] {
+      visibility: hidden;
+    }
+  }
+
+  .bottom-row {
+    flex-direction: row;
+    display: flex;
+    padding: 8px 8px 8px 0;
+    border-top: 1px solid #d7d7d7;
+  }
+
+  .title-row {
+    flex-direction: row;
+    display: flex;
+
+    .title {
+      font-size: 22px;
+      line-height: 48px;
+      font-weight: 500;
+      margin: 0 0 0 8px;
+    }
+
+    &:hover .expand-button {
+      display: initial;
+    }
+    .expand-button {
+      display: none;
+      margin: 4px 0 0 -8px;
+    }
+  }
+
+  .provider-row {
+    height: 48px;
+    line-height: 48px;
+    flex-direction: row;
+    display: flex;
+
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.4;
+    }
+
+    img.provider-icon {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      font-size: 24px;
+      box-sizing: content-box;
+      border-radius: 50%;
+      margin: 12px 8px;
+    }
+
+    span.provider-email {
+      line-height: inherit;
+      display: inline-block;
+      text-overflow: ellipsis;
+      width: 220px;
+      overflow: hidden;
+    }
+
+    .link-provider-account {
+      &.mat-icon {
+        margin: 8px;
+      }
+
+      &.mat-spinner {
+        width: 20px;
+        height: 20px;
+        margin: 10px;
+        visibility: visible;
+      }
+    }
+  }
+}
+
+@keyframes fade-in-out {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}