diff --git a/frontend/src/app/components/login/login.component.css b/frontend/src/app/components/login/login.component.css
index 793f9b777..0379f328f 100644
--- a/frontend/src/app/components/login/login.component.css
+++ b/frontend/src/app/components/login/login.component.css
@@ -1,9 +1,9 @@
:host app-alert:not(:empty) {
- --alert-margin: 24px;
+ --alert-margin: 24px;
position: absolute;
- top: var(--mat-toolbar-standard-height);
- width: calc(100% - 48px);
+ top: var(--mat-toolbar-standard-height);
+ width: calc(100% - 48px);
}
.wrapper {
@@ -360,3 +360,16 @@
transform: translateX(100%);
}
}
+
+.demo-loader {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 24px;
+}
+
+.demo-loader__text {
+ color: var(--mat-sidenav-content-text-color);
+ margin: 0;
+}
diff --git a/frontend/src/app/components/login/login.component.html b/frontend/src/app/components/login/login.component.html
index 13d742263..86266b272 100644
--- a/frontend/src/app/components/login/login.component.html
+++ b/frontend/src/app/components/login/login.component.html
@@ -1,5 +1,13 @@
+@if (isDemoMode) {
+
+
+
+
Loading demo account...
+
+
+} @else {
+}
diff --git a/frontend/src/app/components/login/login.component.ts b/frontend/src/app/components/login/login.component.ts
index cb0b0161f..0bfebeef5 100644
--- a/frontend/src/app/components/login/login.component.ts
+++ b/frontend/src/app/components/login/login.component.ts
@@ -6,8 +6,9 @@ import { MatDialog } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
-import { Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Angulartics2, Angulartics2OnModule } from 'angulartics2';
import { accounts } from 'google-one-tap';
import { EmailValidationDirective } from 'src/app/directives/emailValidator.directive';
@@ -35,6 +36,7 @@ declare var google: any;
MatSelectModule,
MatIconModule,
MatButtonModule,
+ MatProgressSpinnerModule,
EmailValidationDirective,
AlertComponent,
Angulartics2OnModule,
@@ -55,6 +57,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
public submitting: boolean;
public isPasswordFieldShown: boolean = false;
public is2FAShown: boolean = false;
+ public isDemoMode: boolean = false;
public errors = {
'No_user_registered_with_this_GitHub_account.': 'No user registered with this GitHub account.',
'GitHub_login_failed._Please_contact_our_support_team.': 'GitHub login failed. Please contact our support team.',
@@ -63,6 +66,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
constructor(
private _auth: AuthService,
public router: Router,
+ private _route: ActivatedRoute,
private angulartics2: Angulartics2,
private ngZone: NgZone,
private _notifications: NotificationsService,
@@ -71,6 +75,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
) {}
ngOnInit(): void {
+ this.isDemoMode = this._route.snapshot.queryParams['mode'] === 'demo';
this.isCustomDomain = this._company.isCustomDomain() && this.isSaas;
const error = new URLSearchParams(location.search).get('error');
@@ -85,7 +90,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
}
ngAfterViewInit() {
- if (this.isSaas) {
+ if (this.isSaas && !this.isDemoMode) {
const gAccounts: accounts = google.accounts;
gAccounts.id.initialize({
client_id: '681163285738-e4l0lrv5vv7m616ucrfhnhso9r396lum.apps.googleusercontent.com',