PasswordTileComponent is a Tile now

src/main/angular/src/app/pages/group/group/group.component.html

@@ -1,15 +1,6 @@
 <div class="tileContainer">
 
-  <div class="tile" *ngIf="group === null && granted === false">
-    <div class="tileInner">
-      <div class="tileTitle">
-        Passwort
-      </div>
-    </div>
-    <div class="tileContent">
-      <app-password [visible]="true" (join)="join($event)"></app-password>
-    </div>
-  </div>
+  <app-password-tile [visible]="group === null && granted === false" (join)="join($event)"></app-password-tile>
 
   <ng-container *ngIf="group">
 

src/main/angular/src/app/pages/group/group/group.component.ts

@@ -7,7 +7,7 @@ import {GroupService} from "../../../api/group/group.service";
 import {UserService} from "../../../api/User/user.service";
 import {Group} from "../../../api/group/Group";
 import {NumbersService} from "../../../api/tools/Numbers/numbers.service";
-import {PasswordComponent} from "../../../shared/password/password.component";
+import {PasswordTileComponent} from "../../../shared/password-tile/password-tile.component";
 import {Numbers} from "../../../api/tools/Numbers/Numbers";
 import {Page} from "../../../api/common/Page";
 import {RelativePipe} from "../../../shared/relative.pipe";
@@ -26,7 +26,7 @@ import {UserPublic} from "../../../api/User/UserPublic";
     ReactiveFormsModule,
     TextComponent,
     FormsModule,
-    PasswordComponent,
+    PasswordTileComponent,
     RelativePipe
   ],
   templateUrl: './group.component.html',

src/main/angular/src/app/pages/tools/numbers/numbers.component.ts

@@ -4,7 +4,7 @@ import {ActivatedRoute} from "@angular/router";
 import {NumbersService} from "../../../api/tools/Numbers/numbers.service";
 import {NgIf} from "@angular/common";
 import {FormsModule} from "@angular/forms";
-import {PasswordComponent} from "../../../shared/password/password.component";
+import {PasswordTileComponent} from "../../../shared/password-tile/password-tile.component";
 import {GroupService} from "../../../api/group/group.service";
 import {UserService} from "../../../api/User/user.service";
 import {RelativePipe} from "../../../shared/relative.pipe";
@@ -16,7 +16,7 @@ import {Subscription, timer} from "rxjs";
   imports: [
     NgIf,
     FormsModule,
-    PasswordComponent,
+    PasswordTileComponent,
     RelativePipe
   ],
   templateUrl: './numbers.component.html',

src/main/angular/src/app/shared/password-tile/password-tile.component.html

@@ -0,0 +1,13 @@
+<div class="tile" *ngIf="visible">
+  <div class="tileInner" *ngIf="visible">
+    <div class="tileTitle">
+      Gruppenpasswort
+    </div>
+    <div class="tileContent">
+      <input type="text" [(ngModel)]="password" (keydown.enter)="join.emit(password)">
+      <div class="buttons">
+        <div class="button buttonRight buttonJoin" (click)="join.emit(password)">Beitreten</div>
+      </div>
+    </div>
+  </div>
+</div>

src/main/angular/src/app/shared/password-tile/password-tile.component.less

@@ -0,0 +1 @@
+@import "../../../common";

src/main/angular/src/app/shared/password-tile/password-tile.component.ts

@@ -3,16 +3,16 @@ import {FormsModule} from "@angular/forms";
 import {NgIf} from "@angular/common";
 
 @Component({
-  selector: 'app-password',
+  selector: 'app-password-tile',
   standalone: true,
   imports: [
     FormsModule,
     NgIf
   ],
-  templateUrl: './password.component.html',
-  styleUrl: './password.component.less'
+  templateUrl: './password-tile.component.html',
+  styleUrl: './password-tile.component.less'
 })
-export class PasswordComponent implements OnInit {
+export class PasswordTileComponent implements OnInit {
 
   @Input()
   visible: boolean = false;

src/main/angular/src/app/shared/password/password.component.html

@@ -1,7 +0,0 @@
-<ng-container *ngIf="visible">
-  <h1>Passwort</h1>
-  <input type="text" [(ngModel)]="password" (keydown.enter)="join.emit(password)">
-  <div class="buttons">
-    <div class="button buttonRight buttonJoin" (click)="join.emit(password)">Beitreten</div>
-  </div>
-</ng-container>

src/main/angular/src/common.less

@@ -1,4 +1,3 @@
-@import "./tile.less";
 @import "./user.less";
 
 .buttons {

src/main/angular/src/styles.less

@@ -29,10 +29,61 @@ table {
   border-collapse: collapse;
 }
 
+.tileContainer {
+  padding: @halfSpace;
+
+  .tile {
+    width: 100%;
+    padding: @halfSpace;
+
+    .tileInner {
+      border: 1px solid #ddd;
+      border-radius: @space;
+      background-color: #fbfbfb;
+
+      .tileTitle {
+        font-weight: bold;
+        padding: @halfSpace @space;
+        background-color: lightskyblue;
+      }
+
+      .tileContent {
+        padding: @halfSpace;
+
+        table {
+          width: 100%;
+        }
+
+        td {
+          white-space: nowrap;
+          border: 0.2em solid white;
+        }
+
+      }
+
+      .tileFooter {
+        padding: @halfSpace @space;
+      }
+
+    }
+
+  }
+
+}
+
 @media (min-width: 1000px) {
 
   body {
     font-size: 18px;
   }
 
+  .tileContainer {
+
+    .tile {
+      float: left;
+      width: 500px;
+    }
+
+  }
+
 }

src/main/angular/src/tile.less

@@ -1,56 +0,0 @@
-@import "./config.less";
-
-.tileContainer {
-  padding: @halfSpace;
-
-  .tile {
-    width: 100%;
-    padding: @halfSpace;
-
-    .tileInner {
-      border: 1px solid #ddd;
-      border-radius: @space;
-      background-color: #fbfbfb;
-
-      .tileTitle {
-        font-weight: bold;
-        padding: @halfSpace @space;
-        background-color: lightskyblue;
-      }
-
-      .tileContent {
-        padding: @halfSpace;
-
-        table {
-          width: 100%;
-        }
-
-        td {
-          white-space: nowrap;
-          border: 0.2em solid white;
-        }
-
-      }
-
-      .tileFooter {
-        padding: @halfSpace @space;
-      }
-
-    }
-
-  }
-
-}
-
-@media (min-width: 1000px) {
-
-  .tileContainer {
-
-    .tile {
-      float: left;
-      width: 500px;
-    }
-
-  }
-
-}