fixup! feat(apps): create the code of conduct frontend application

Author: josephperrott

apps/code-of-conduct/app/BUILD.bazel

@@ -23,7 +23,7 @@ ng_module(
 )
 
 sass_binary(
-    name = "app-style",
+    name = "style",
     src = "app.component.scss",
 )
 

apps/code-of-conduct/app/block-user/BUILD.bazel

@@ -1,11 +1,14 @@
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "karma_web_test_suite", "ng_module", "ts_library")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 
 package(default_visibility = ["//apps/code-of-conduct:__subpackages__"])
 
 ng_module(
     name = "block-user",
-    srcs = glob(["*.ts"]),
+    srcs = glob(
+        ["*.ts"],
+        exclude = ["*.spec.ts"],
+    ),
     assets = [
         ":block-user.component.css",
         ":block-user.component.html",
@@ -24,3 +27,25 @@ sass_binary(
     name = "block-user-style",
     src = "block-user.component.scss",
 )
+
+ts_library(
+    name = "test_lib",
+    testonly = True,
+    srcs = glob(["*.spec.ts"]),
+    deps = [
+        ":block-user",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/fire",
+        "@npm//@angular/forms",
+        "@npm//@angular/material",
+        "@npm//@types/jasmine",
+    ],
+)
+
+karma_web_test_suite(
+    name = "test",
+    deps = [
+        ":test_lib",
+    ],
+)

apps/code-of-conduct/app/block-user/block-user.component.html

@@ -8,7 +8,7 @@ <h1 class="mat-headline-3" mat-dialog-title>
   <form [formGroup]="blockUserForm">
     <div class="two-column-row form-item">
       <span class="username">
-        <mat-form-field floatLabel="always">
+        <mat-form-field>
           <input
             [readonly]="editMode"
             required
@@ -24,19 +24,19 @@ <h1 class="mat-headline-3" mat-dialog-title>
         <mat-form-field>
           <mat-label>Block Until</mat-label>
           <input
-            [style.display]="blockUserForm.controls.blockUntil.value === false ? 'none': ''"
+            [style.display]="blockUserForm.controls.blockUntil.value !== false"
             readonly
             required
             matInput
             [min]="tomorrow"
             [max]="fiveYearsFromToday"
             formControlName="blockUntil"
             [matDatepicker]="picker">
-            <span class="block-until-indefinite" *ngIf="blockUserForm.controls.blockUntil.value === false">Blocked Indefinitely</span>
-            <mat-datepicker #picker></mat-datepicker>
-            <button #blockUntilMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="blockUntilMenu" mat-icon-button matSuffix>
-              <mat-icon>arrow_drop_down</mat-icon>
-            </button>
+          <span class="block-until-indefinite" *ngIf="blockUserForm.controls.blockUntil.value === false">Blocked Indefinitely</span>
+          <mat-datepicker #picker></mat-datepicker>
+          <button #blockUntilMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="blockUntilMenu" mat-icon-button matSuffix>
+            <mat-icon>arrow_drop_down</mat-icon>
+          </button>
         </mat-form-field>
         <mat-menu #blockUntilMenu="matMenu" yPosition="below" xPosition="before">
           <button mat-menu-item (click)="picker.select(week)">
@@ -75,6 +75,7 @@ <h1 class="mat-headline-3" mat-dialog-title>
       <mat-form-field>
         <mat-label>Comments</mat-label>
         <textarea
+          rows="3"
           formControlName="comments"
           matInput
           placeholder="The user broke the code of conduct by..."
@@ -83,7 +84,7 @@ <h1 class="mat-headline-3" mat-dialog-title>
     </div>
     <div class="two-column-row form-item" *ngIf="editMode">
       <span>
-        <mat-form-field floatLabel="always">
+        <mat-form-field>
           <mat-label>Blocked By</mat-label>
           <input
           formControlName="blockedBy"
@@ -92,7 +93,7 @@ <h1 class="mat-headline-3" mat-dialog-title>
         </mat-form-field>
       </span>
       <span>
-        <mat-form-field floatLabel="always">
+        <mat-form-field>
           <input
             readonly
             matInput

apps/code-of-conduct/app/block-user/block-user.component.ts

@@ -86,7 +86,7 @@ export class BlockUserComponent {
     blockedBy: new FormControl<string>('', {nonNullable: true}),
   });
 
-  async blockUser() {
+  blockUser() {
     this.blockUserForm.disable();
     this.dialogRef.disableClose = true;
 
@@ -101,7 +101,7 @@ export class BlockUserComponent {
       });
   }
 
-  async updateUser() {
+  updateUser() {
     this.dialogRef.disableClose = true;
     this.blockService
       .update(this.providedData.user!, this.blockUserForm.value)

apps/code-of-conduct/app/block.service.ts

@@ -15,23 +15,32 @@ import {httpsCallable, getFunctions} from '@angular/fire/functions';
 import {BehaviorSubject} from 'rxjs';
 
 export interface BlockUserParams {
+  /** The username of the user being blocked. */
   username: string;
+  /** The date to block the user until, or false if the block is indefinite. */
   blockUntil: Date | false;
+  /** A statement or link to the context for the blocking. */
   context: string;
+  /** Additional comments about the user block. */
   comments: string;
 }
 
 export interface UnblockUserParams {
+  /** The username of the user being unblocked. */
   username: string;
 }
 
 export interface BlockedUser extends BlockUserParams {
+  /** The display name of the person who blocked the user. */
   blockedBy: string;
+  /** The date the block began. */
   blockedOn: Date;
 }
 
 export type BlockedUserFromFirestore = BlockedUser & {
+  /** The date the block began, as a unix timestamp */
   blockedOn: number;
+  /** The date the block ends, as a unix timestamp, or false if the block is indefinite. */
   blockUntil: number | false;
 };
 

apps/code-of-conduct/styles.scss

@@ -1,41 +1,27 @@
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
 @include mat.core();
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
 $code-of-conduct-primary: mat.define-palette(mat.$teal-palette);
 $code-of-conduct-accent: mat.define-palette(mat.$blue-palette, A200, A100, A400);
+$code-of-conduct-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $code-of-conduct-primary,
+      accent: $code-of-conduct-accent,
+    ),
+    typography: mat.define-typography-config(),
+    density: -1,
+  )
+);
 
-// The warn palette is optional (defaults to red).
-$code-of-conduct-warn: mat.define-palette(mat.$red-palette);
-
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$code-of-conduct-theme: mat.define-light-theme((
-  color: (
-    primary: $code-of-conduct-primary,
-    accent: $code-of-conduct-accent,
-    warn: $code-of-conduct-warn,
-  ),
-  typography: mat.define-typography-config(),
-  density: -1,
-));
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
 @include mat.all-component-themes($code-of-conduct-theme);
 
-/* You can add global styles to this file, and also import other style files */
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}

apps/firebase.json

@@ -17,15 +17,6 @@
               "value": "public,max-age=31536000,immutable"
             }
           ]
-        },
-        {
-          "source": "/@(ngsw-worker.js|ngsw.json)",
-          "headers": [
-            {
-              "key": "Cache-Control",
-              "value": "no-cache"
-            }
-          ]
         }
       ],
       "rewrites": [

apps/shared/account/account.guard.ts

@@ -8,6 +8,7 @@ export const isLoggedInGuard = async () => {
   const router = inject(Router);
 
   if (!(await firstValueFrom(account.isLoggedIn$))) {
+    // TODO: Determine a way to better manage the path used.
     router.navigate(['login']);
     return false;
   }