welcome screen

src/app/modules/user/info/info.component.html

@@ -1,5 +1,8 @@
 <app-card *ngIf="user$|async as user" heading="Hallo {{user.name}}">
-  <p>{{user.role|role}}</p>
+  <p>
+    <span *ngIf="getUserRoles(user.role).length===0" class="warn">Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den Administrator!</span>
+    <span>{{transdormUserRoles(user.role)}}</span>
+  </p>
 
   <mat-form-field appearance="outline">
     <mat-label>bevorzugte Anzeige der Akkorde</mat-label>

src/app/modules/user/info/info.component.less

@@ -1,3 +1,7 @@
-.mat-form-field {
-  width: 100%;
+.warn {
+  color: #621700;
+}
+
+p {
+  margin-bottom: 20px;
 }

src/app/modules/user/info/info.component.ts

@@ -25,4 +25,7 @@ export class InfoComponent implements OnInit {
     await this.userService.update$(uid, {chordMode: value});
   }
 
+  public getUserRoles = (roles: string): string[] => roles?.split(';') ?? [];
+  public transdormUserRoles = (roles: string): string => this.getUserRoles(roles).join(', ');
+
 }

src/app/modules/user/login/login.component.html

@@ -1,4 +1,4 @@
-<app-card>
+<!--<app-card>
   <div [formGroup]="form" class="form">
     <mat-form-field appearance="outline">
       <mat-label>E-Mail Addresse</mat-label>
@@ -18,4 +18,27 @@
 
   </div>
 
-</app-card>
+</app-card>-->
+
+<div class="frame">
+  <app-logo></app-logo>
+  <div class="login">
+    <div [formGroup]="form" class="form">
+      <mat-form-field appearance="outline">
+        <mat-label>E-Mail Addresse</mat-label>
+        <input (keyup.enter)="onLogin()" formControlName="user" matInput>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Passwort</mat-label>
+        <input (keyup.enter)="onLogin()" formControlName="pass" matInput type="password">
+      </mat-form-field>
+      <p *ngIf="errorMessage" class="error">{{errorMessage|authMessage}}</p>
+      <button (click)="onLogin()" class="btn-login" color="primary" mat-stroked-button>Anmelden</button>
+      <button class="btn-password" mat-stroked-button routerLink="/user/password">Passwort zurücksetzen</button>
+      <button class="btn-user" mat-stroked-button routerLink="/user/new">neuen Benutzer anlegen</button>
+
+
+    </div>
+  </div>
+</div>

src/app/modules/user/login/login.component.less

@@ -6,3 +6,47 @@ p.error {
   margin: 8px 10px;
   color: darkred;
 }
+
+.login {
+  padding: 20px;
+  width: 400px;
+  margin: 100px 0;
+  background: #fffc;
+  border-radius: 8px;
+  font-size: 18px;
+  @media screen and (max-width: 860px) {
+    margin: 20px;
+    box-sizing: border-box;
+    width: 90vw;
+  }
+}
+
+button {
+  font-size: 18px;
+}
+
+.btn-login {
+  margin-bottom: 40px;
+}
+
+.btn-password {
+  margin-bottom: 20px;
+  color: #888;
+}
+
+.btn-user {
+  color: #888;
+}
+
+.frame {
+  display: flex;
+  position: relative;
+  flex-wrap: wrap;
+}
+
+app-logo {
+  transform: scale(0.84);
+  @media screen and (max-width: 860px) {
+    display: none;
+  }
+}

src/app/modules/user/user.module.ts

@@ -20,6 +20,7 @@ import {RoleModule} from '../../services/user/role.module';
 import {UserComponent} from './info/users/user/user.component';
 import {NewComponent} from './new/new.component';
 import {ButtonModule} from '../../widget-modules/components/button/button.module';
+import {LogoModule} from '../../widget-modules/components/logo/logo.module';
 
 
 @NgModule({
@@ -37,6 +38,7 @@ import {ButtonModule} from '../../widget-modules/components/button/button.module
     FormsModule,
     RoleModule,
     ButtonModule,
+    LogoModule,
 
 
   ]