Working version of online-survey login routing

develop.sh

@@ -77,11 +77,12 @@ if echo "$T_MODULES" | grep mysql; then
   ./mysql-create-dirs.sh
 fi
 
-if echo "$T_USE_MYSQL_CONTAINER" | grep "true"; then
+  if echo "$T_USE_MYSQL_CONTAINER" | grep "true"; then
     ./mysql-start-container.sh
     echo "Waiting 60 seconds for mysql container to start..."
-        sleep 60
-        ./mysql-setup.sh
+    sleep 60
+    ./mysql-setup.sh
+  fi
 fi
 
 if echo "$T_MYSQL_PHPMYADMIN" | grep "TRUE"; then

online-survey-app/src/app/app-routing.module.ts

@@ -4,8 +4,10 @@ import { FormSubmittedSuccessComponent } from './form-submitted-success/form-sub
 import { FormsListComponent } from './forms-list/forms-list.component';
 import { TangyFormsPlayerComponent } from './tangy-forms-player/tangy-forms-player.component';
 import { LoginGuard } from './core/auth/_guards/login-guard.service';
+import { SurveyLoginComponent } from './core/auth/_components/survey-login/survey-login.component';
 
 const routes: Routes = [
+  { path: 'survey-login', component: SurveyLoginComponent },
   { path: 'forms-list', component: FormsListComponent, canActivate: [LoginGuard] },
   { path: 'form-submitted-success', component: FormSubmittedSuccessComponent, canActivate: [LoginGuard] },
   { path: 'form/:formId', component: TangyFormsPlayerComponent, canActivate: [LoginGuard] },

online-survey-app/src/app/core/auth/_components/login/login.component.ts

@@ -5,7 +5,7 @@ import { _TRANSLATE } from 'src/app/shared/_services/translation-marker';
 
 
 @Component({
-  selector: 'app-login',
+  selector: 'login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css']
 })
@@ -28,11 +28,7 @@ export class LoginComponent implements OnInit {
 
     if (await this.authenticationService.isLoggedIn()) {
       this.router.navigate([this.returnUrl]);
-    }
-    // We always want to log in from the "front door". If we log in from path of `/app/<groupId>`, then the global cookie
-    // will be tied to that pathname and not available at other pathnames such as `/csv/` that is looking for authentication.
-    if (window.location.pathname !== '/') { 
-      window.location.pathname = '/'
+      return;
     }
     this.customLoginMarkup.nativeElement.innerHTML = await this.authenticationService.getCustomLoginMarkup()
     this.ready = true
@@ -42,8 +38,8 @@ export class LoginComponent implements OnInit {
 
       if (window.location.origin.startsWith('http://localhost')) {
         // If we are running on localhost, we want to use the local server for authentication 
+        localStorage.setItem(this.user.username, this.user.password);
         this.router.navigate([this.returnUrl]);
-
       } else if (await this.authenticationService.login(this.user.username, this.user.password)) {
         this.router.navigate([this.returnUrl]);
       } else {

online-survey-app/src/app/core/auth/_components/survey-login/survey-login.component.css

@@ -0,0 +1,33 @@
+mat-card {
+  width: 300px;
+  margin: 30px auto;
+}
+.mat-title {
+  color: var(--primary-color);
+  font-size: 1.5em;
+  font-weight: 400;
+  font-family: Roboto, 'Helvetica Nue', sans-serif;
+}
+#logo {
+  margin-bottom: 15px;
+}
+mat-placeholder i {
+  margin-right: 0.075em;
+}
+
+input.mat-input-element {
+  margin-top: 1em;
+}
+
+.mat-placeholder-required.mat-form-field-required-marker.ng-tns-c6-2
+  .mat-form-field-invalid
+  .mat-form-field-placeholder.mat-accent,
+.mat-form-field-invalid
+  .mat-form-field-placeholder
+  .mat-form-field-required-marker {
+  position: relative;
+  bottom: 1em !important;
+}
+.mat-form-field {
+  width: 100%;
+}

online-survey-app/src/app/core/auth/_components/survey-login/survey-login.component.html

@@ -0,0 +1,22 @@
+<mat-card *ngIf="!ready">
+  Loading...
+</mat-card>
+<mat-card *ngIf="ready">
+    <form role="form" #login='ngForm' novalidate>
+      <img id="logo" src="/logo.png" width="100%">
+      <mat-form-field>
+        <input matInput type="text" required [(ngModel)]="user.accessCode" id="username" name="username">
+        <mat-placeholder>
+          <i class="material-icons app-input-icon">key</i>
+          <span>{{'Access Code'|translate}}</span>
+        </mat-placeholder>
+      </mat-form-field>
+      <br>
+      <br>
+      <button (click)="loginUser()" mat-raised-button color="accent" name="action">{{'LOGIN'|translate}}</button>
+      <span id="err">
+        <small>{{errorMessage}}</small>
+      </span>
+    </form>
+</mat-card>
+<span #customLoginMarkup></span>

online-survey-app/src/app/core/auth/_components/survey-login/survey-login.component.ts

@@ -0,0 +1,55 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthenticationService } from '../../_services/authentication.service';
+import { _TRANSLATE } from 'src/app/shared/_services/translation-marker';
+import { AppConfigService } from 'src/app/shared/_services/app-config.service';
+
+
+@Component({
+  selector: 'survey-login',
+  templateUrl: './survey-login.component.html',
+  styleUrls: ['./survey-login.component.css']
+})
+export class SurveyLoginComponent implements OnInit {
+
+  errorMessage = '';
+  returnUrl: string; // stores the value of the url to redirect to after login
+  user = { accessCode: '' };
+  @ViewChild('customLoginMarkup', {static: true}) customLoginMarkup: ElementRef;
+  ready = false
+
+  constructor(
+    private authenticationService: AuthenticationService,
+    private appConfigService: AppConfigService,
+    private route: ActivatedRoute,
+    private router: Router,
+  ) { }
+
+  async ngOnInit() {
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || 'forms-list';
+
+    if (await this.authenticationService.isLoggedIn()) {
+      this.router.navigate([this.returnUrl]);
+      return;
+    }
+    this.customLoginMarkup.nativeElement.innerHTML = await this.authenticationService.getCustomLoginMarkup()
+    this.ready = true
+  }
+  async loginUser() {
+    try {
+
+      const appConfig = await this.appConfigService.getAppConfig();
+      const groupId = appConfig['groupId'];
+
+      if (await this.authenticationService.surveyLogin(groupId, this.user.accessCode)) {
+        this.router.navigate([this.returnUrl]);
+      } else {
+        this.errorMessage = _TRANSLATE('Login Unsuccessful');
+      }
+    } catch (error) {
+      this.errorMessage = _TRANSLATE('Login Unsuccessful');
+      console.error(error);
+    }
+  }
+
+}

online-survey-app/src/app/core/auth/_guards/login-guard.service.ts

@@ -13,7 +13,7 @@ export class LoginGuard implements CanActivate {
     if (await this.authenticationService.isLoggedIn()) {
       return true;
     }
-    this.router.navigate([route, 'login'], { queryParams: { returnUrl: state.url } });
+    this.router.navigate(['survey-login'], { queryParams: { returnUrl: state.url } });
     return false;
   }
 }