* deploy to staging

* login feedback implementation
* judge editor year sorting

angular.json

@@ -47,7 +47,24 @@
               "extractCss": true,
               "namedChunks": false,
               "aot": true,
-              "extractLicenses": true,
+              "extractLicenses": false,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            },
+            "staging": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.stage.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": false,
               "vendorChunk": false,
               "buildOptimizer": true
             }

deploy.php

@@ -21,8 +21,6 @@ host('alfheim')
     ->user('yvan')
     ->forwardAgent()
     ->set('ng_basehref', '/admin/')
-    ->set('ng_target', 'production')
-    ->set('ng_environment', 'prod')
     ->set('env_vars', 'NODE_ENV=production')
     ->set('deploy_path', '/mnt/apps/granprize/admin');
 
@@ -31,15 +29,13 @@ host('granprize')
     ->user('edvidan')
     ->forwardAgent()
     ->set('ng_basehref', '/admin/')
-    ->set('ng_target', 'production')
-    ->set('ng_environment', 'prod')
     ->set('env_vars', 'NODE_ENV=production')
     ->set('deploy_path', '/var/www/granprize.swedishchamber.hu/admin');
 
 // Tasks
 desc('Prepare release');
 task('deploy:ng-prepare', function() {
-    runLocally("ng build --base-href={{ng_basehref}} --target={{ng_target}} --environment={{ng_environment}}");
+    runLocally("ng build --base-href={{ng_basehref}} --configuration={{stage}} --output-path dist");
     runLocally("tar -cJf dist.tar.xz dist");
 });
 

src/app/auth/auth.module.ts

@@ -9,7 +9,8 @@ import {
     MatButtonModule,
     MatCardModule,
     MatFormFieldModule,
-    MatInputModule
+    MatInputModule,
+    MatProgressSpinnerModule,
 } from "@angular/material";
 
 export function tokenGetterFunctionWrapper() {
@@ -36,6 +37,7 @@ export function tokenGetterFunctionWrapper() {
         MatFormFieldModule,
         MatInputModule,
         MatButtonModule,
+        MatProgressSpinnerModule,
     ],
     declarations: [AuthComponent]
 })

src/app/auth/auth.service.ts

@@ -55,9 +55,8 @@ export class AuthService {
                 this.router.navigate(['/']);
             },
             err => {
-                console.log(err);
                 this.hasError = true;
-                this.errorMessage = "Hiba történt bejelentkezés közben.";
+                this.errorMessage = "Access denied";
                 this.isLoading = false;
             }
         );

src/app/auth/auth/auth.component.css

@@ -1,9 +1,21 @@
-.mat-card {
+.mat-card.login-panel {
     min-width: 250px;
     width: 25%;
     margin: 150px auto auto;
 }
 
+.mat-card.error {
+    margin-bottom: 20px;
+    color: #ffffff;
+    /*background-color: #f44336;*/
+    background-color: #ff4081;
+    font-weight: 500;
+}
+
 .mat-form-field {
     width: 100%;
-}
+}
+
+.mat-progress-spinner {
+    margin: auto;
+}

src/app/auth/auth/auth.component.html

@@ -1,12 +1,16 @@
-<mat-card>
-  <h2 mat-card-title="">GranPrize login</h2>
-  <form name="login-form" class="login-form" (ngSubmit)="doSubmit()">
-  <mat-form-field class="full-width">
-    <input name="username" type="text" matInput placeholder="Username" [(ngModel)]="userName">
-  </mat-form-field>
-  <mat-form-field class="full-width">
-    <input name="password" type="password" matInput placeholder="Password" [(ngModel)]="password">
-  </mat-form-field>
-  <button mat-raised-button color="primary" [disabled]="!canLogin">Login</button>
-  </form>
+<mat-card class="login-panel">
+    <h2 mat-card-title>GranPrize login</h2>
+    <form name="login-form" class="login-form" (ngSubmit)="doSubmit()" *ngIf="!isLoading">
+        <mat-form-field class="full-width">
+            <input name="username" type="text" matInput placeholder="Username" [(ngModel)]="userName">
+        </mat-form-field>
+        <mat-form-field class="full-width">
+            <input name="password" type="password" matInput placeholder="Password" [(ngModel)]="password">
+        </mat-form-field>
+        <mat-card class="error mat-primary" *ngIf="hasError">{{errorMessage}}</mat-card>
+        <button mat-raised-button color="primary" [disabled]="!canLogin">Login</button>
+    </form>
+    <mat-card-content *ngIf="isLoading">
+        <mat-spinner color="warn"></mat-spinner>
+    </mat-card-content>
 </mat-card>

src/app/auth/auth/auth.component.ts

@@ -39,10 +39,10 @@ export class AuthComponent implements OnInit {
 
     public doSubmit() {
         if (this.canLogin) {
-        this.authService.login(
-            this.userName.trim(),
-            this.password.trim()
-        );
+            this.authService.login(
+                this.userName.trim(),
+                this.password.trim()
+            );
         }
     }
 

src/app/judge-editor/judge-editor.component.html

@@ -1,4 +1,4 @@
-<form class="judge-form" name="judge-form" (ngSubmit)="saveJudge()" >
+<form class="judge-form" name="judge-form" (ngSubmit)="saveJudge()">
     <mat-form-field class="full-width">
         <input name="name" type="text" matInput placeholder="Display name" [(ngModel)]="judge.name">
     </mat-form-field>
@@ -14,52 +14,55 @@
         Upload profile image
     </button>
     <mat-divider></mat-divider>
-    <mat-expansion-panel>
-        <mat-expansion-panel-header>
-            <mat-panel-title>Assign judege to year</mat-panel-title>
-            <mat-panel-description>Type the year and the title of the judge</mat-panel-description>
-        </mat-expansion-panel-header>
+    <div class="mat-elevation-z8">
+        <mat-expansion-panel class="mat-elevation-z0">
+            <mat-expansion-panel-header>
+                <mat-panel-title>Assign judege to year</mat-panel-title>
+                <mat-panel-description>Type the year and the title of the judge</mat-panel-description>
+            </mat-expansion-panel-header>
 
-        <mat-form-field class="full-width">
-            <input name="title" type="text" matInput placeholder="Title" [(ngModel)]="judgedYearInput.title">
-        </mat-form-field>
-        <mat-form-field class="year-select">
-            <input name="year" type="number" matInput placeholder="Year" [(ngModel)]="judgedYearInput.year"
-                   min="2013" max="2100">
-        </mat-form-field>
-        <button name="add_to_year" type="button" mat-raised-button color="primary" [disabled]="!canAdd"
-                (click)="addToYear()">
-            <i class="fas fa-plus"></i> Add
-        </button>
-    </mat-expansion-panel>
+            <mat-form-field class="full-width">
+                <input name="title" type="text" matInput placeholder="Title" [(ngModel)]="judgedYearInput.title">
+            </mat-form-field>
+            <mat-form-field class="year-select">
+                <input name="year" type="number" matInput placeholder="Year" [(ngModel)]="judgedYearInput.year"
+                       min="2013" max="2100">
+            </mat-form-field>
+            <button name="add_to_year" type="button" mat-raised-button color="primary" [disabled]="!canAdd"
+                    (click)="addToYear()">
+                <i class="fas fa-plus"></i> Add
+            </button>
+        </mat-expansion-panel>
 
-    <mat-card *ngIf="!judge.titles?.length">
-        <i>No records</i>
-    </mat-card>
-    <mat-table [dataSource]="judge.titles" class="title-table" *ngIf="judge.titles?.length">
-        <ng-container matColumnDef="buttons">
-            <mat-header-cell *matHeaderCellDef class="controls"></mat-header-cell>
-            <mat-cell *matCellDef="let row" class="controls">
-                <button type="button" mat-icon-button (click)="removeFromYear(row.year)">
-                    <mat-icon fontSet="fas" fontIcon="fa-trash"></mat-icon>
-                </button>
-            </mat-cell>
-        </ng-container>
 
-        <ng-container matColumnDef="year">
-            <mat-header-cell *matHeaderCellDef>Year</mat-header-cell>
-            <mat-cell *matCellDef="let row">{{row.year}}</mat-cell>
-        </ng-container>
+        <mat-card *ngIf="!judge.titles?.length">
+            <i>No records</i>
+        </mat-card>
+        <mat-table [dataSource]="judge.titles" class="title-table" *ngIf="judge.titles?.length">
+            <ng-container matColumnDef="buttons">
+                <mat-header-cell *matHeaderCellDef class="controls"></mat-header-cell>
+                <mat-cell *matCellDef="let row" class="controls">
+                    <button type="button" mat-icon-button (click)="removeFromYear(row.year)" matTooltip="Delete this entry">
+                        <mat-icon fontSet="fas" fontIcon="fa-trash"></mat-icon>
+                    </button>
+                </mat-cell>
+            </ng-container>
 
-        <!-- Name Column -->
-        <ng-container matColumnDef="title">
-            <mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
-            <mat-cell *matCellDef="let row">{{row.title}}</mat-cell>
-        </ng-container>
+            <ng-container matColumnDef="year">
+                <mat-header-cell *matHeaderCellDef>Year</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.year}}</mat-cell>
+            </ng-container>
 
-        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-    </mat-table>
+            <!-- Name Column -->
+            <ng-container matColumnDef="title">
+                <mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.title}}</mat-cell>
+            </ng-container>
+
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+        </mat-table>
+    </div>
 
     <button type="submit" mat-raised-button color="accent" class="save-button" [disabled]="!canSave">
         <i class="fas fa-save"></i> Save

src/app/judge-editor/judge-editor.component.ts

@@ -32,6 +32,7 @@ export class JudgeEditorComponent implements OnInit {
       judge: Judge,
     }) => {
       this.judge = data.judge ? data.judge : new Judge();
+      this.sortByYear();
     });
   }
 
@@ -62,4 +63,8 @@ export class JudgeEditorComponent implements OnInit {
       this.judgeService.persist(this.judge).subscribe(() => this.router.navigate(['/judges']));
     }
   }
+
+  private sortByYear() {
+      this.judge.titles.sort((a,b) => a.year < b.year ? 1 : -1);
+  }
 }

src/environments/environment.stage.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  apiUrl: 'http://granprize.dev.yvan.hu/api',
+};