Revert "Remove login mask"

This reverts commit c58b60d.

client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.html

@@ -0,0 +1,124 @@
+<div class="form-wrapper">
+    @if ({ meeting: meetingObservable | async, organization: organizationObservable | async }; as observables) {
+        @if (observables.meeting || observables.organization) {
+            <div class="header-name" [@fadeIn]>
+                <!-- Meeting's name -->
+                @if (observables.meeting) {
+                    <h1>{{ observables.meeting.name }}</h1>
+                }
+                <!-- Organization's name -->
+                @if (observables.organization && !observables.meeting) {
+                    <h1>
+                        {{ observables.organization.name }}
+                    </h1>
+                }
+            </div>
+        }
+    }
+
+    <!-- Install notice -->
+    @if (installationNotice) {
+        <div class="login-container">
+            <mat-card>
+                <mat-card-content [innerHTML]="installationNotice | translate"></mat-card-content>
+            </mat-card>
+        </div>
+    }
+    @if (!samlEnabled && !loading) {
+        <ng-container *ngTemplateOutlet="loginform; context: { showExtra: true }"></ng-container>
+    }
+    @if (samlEnabled && !loading) {
+        <div class="login-container">
+            @if (samlEnabled) {
+                <button
+                    class="login-button"
+                    color="primary"
+                    mat-raised-button
+                    osAutofocus
+                    type="button"
+                    (click)="samlLogin()"
+                >
+                    {{ samlLoginButtonText || 'SAML Login' | translate }}
+                </button>
+            }
+            <br />
+            @if (guestsEnabled) {
+                <button class="login-button" mat-stroked-button type="button" (click)="guestLogin()">
+                    {{ 'Login as guest' | translate }}
+                </button>
+            }
+            <br />
+            <mat-expansion-panel
+                class="spacer-bottom-10"
+                style="border-radius: 4px !important"
+                (afterCollapse)="setLoginAreaExpansion(false)"
+                (afterExpand)="setLoginAreaExpansion(true)"
+            >
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        {{ 'Internal login' | translate }}
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                @if (loginAreaExpanded) {
+                    <div>
+                        <ng-container *ngTemplateOutlet="loginform; context: { showExtra: false }"></ng-container>
+                    </div>
+                }
+            </mat-expansion-panel>
+        </div>
+    }
+</div>
+
+<ng-template #loginform let-showExtra="showExtra">
+    <form [formGroup]="loginForm" [ngClass]="{ 'login-container': showExtra }" (ngSubmit)="formLogin()">
+        <mat-form-field>
+            <mat-label>{{ 'Username' | translate }}</mat-label>
+            <input data-cy="loginUsernameInput" formControlName="username" matInput osAutofocus required />
+        </mat-form-field>
+        <br />
+        <mat-form-field>
+            <mat-label>{{ 'Password' | translate }}</mat-label>
+            <input
+                data-cy="loginPasswordInput"
+                formControlName="password"
+                matInput
+                required
+                [type]="!hide ? 'password' : 'text'"
+            />
+            <mat-icon color="primary" matSuffix (click)="hide = !hide">
+                {{ hide ? 'visibility_off' : 'visibility_on' }}
+            </mat-icon>
+        </mat-form-field>
+        <mat-error>{{ loginErrorMsg | translate }}</mat-error>
+
+        <!-- login button -->
+        <br />
+        <!-- TODO: Next to each other...-->
+        <button
+            class="login-button"
+            color="primary"
+            data-cy="loginButton"
+            mat-raised-button
+            type="submit"
+            [disabled]="loginForm.invalid || isWaitingOnLogin"
+        >
+            @if (!isWaitingOnLogin) {
+                <span>{{ 'Login' | translate }}</span>
+            }
+            @if (isWaitingOnLogin) {
+                <os-spinner [height]="20" [showText]="false" [width]="20"></os-spinner>
+            }
+        </button>
+        @if (guestsEnabled && showExtra) {
+            <button class="login-button" mat-stroked-button type="button" (click)="guestLogin()">
+                {{ 'Login as guest' | translate }}
+            </button>
+        }
+
+        <!-- forgot password button -->
+        <br />
+        <button class="forgot-password-button" color="primary" mat-button type="button" (click)="resetPassword()">
+            {{ 'Forgot Password?' | translate }}
+        </button>
+    </form>
+</ng-template>

client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.scss

@@ -0,0 +1,54 @@
+mat-form-field {
+    width: 100%;
+}
+
+.forgot-password-button {
+    float: right;
+    padding: 0;
+    text-align: right;
+}
+
+.login-button {
+    margin-top: 30px;
+    height: 37px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.form-wrapper {
+    padding-left: 30px;
+    padding-right: 30px;
+    mat-spinner {
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        z-index: 2;
+    }
+}
+
+.login-container {
+    padding-top: 50px;
+    margin: 0 auto;
+    max-width: 400px;
+
+    mat-icon {
+        cursor: pointer;
+    }
+}
+
+.header-name {
+    padding-top: 50px;
+    text-align: center;
+}
+
+.expansion-button {
+    padding-left: 0;
+}
+
+.expandable-area {
+    padding-bottom: 30px;
+    padding-top: 10px;
+}

client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.spec.ts

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