From da67b5527e22562ef2e55463624aa19a52f1288a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benedek=20L=C3=A1szl=C3=B3?= <lacbenedek@gmail.com>
Date: Sat, 11 May 2024 16:16:48 +0200
Subject: [PATCH] more material design

---
 src/app/auth/auth.module.ts                   |  9 ++-
 src/app/auth/login/login.component.html       | 42 +++++-------
 src/app/auth/login/login.component.scss       | 10 +++
 src/app/auth/login/login.component.ts         |  4 +-
 src/app/auth/register/register.component.html | 64 +++++++------------
 src/app/auth/register/register.component.scss | 10 +++
 src/app/feed/feed.component.html              |  2 +-
 src/app/new-post/new-post.component.html      |  2 +-
 src/app/search/search.component.html          |  2 +-
 .../shared/top-menu/top-menu.component.html   |  4 +-
 .../shared/top-menu/top-menu.component.scss   |  8 +--
 src/app/shared/top-menu/top-menu.component.ts |  3 +-
 src/app/user/user.component.html              |  2 +-
 13 files changed, 79 insertions(+), 83 deletions(-)

diff --git a/src/app/auth/auth.module.ts b/src/app/auth/auth.module.ts
index 2d70754..268618b 100644
--- a/src/app/auth/auth.module.ts
+++ b/src/app/auth/auth.module.ts
@@ -6,7 +6,9 @@ import { AuthComponent } from './auth.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
-
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 @NgModule({
   declarations: [
@@ -17,7 +19,10 @@ import { RegisterComponent } from './register/register.component';
   imports: [
     CommonModule,
     AuthRoutingModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule
   ]
 })
 export class AuthModule { }
diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html
index 76471f7..8761809 100644
--- a/src/app/auth/login/login.component.html
+++ b/src/app/auth/login/login.component.html
@@ -1,28 +1,18 @@
 <div class="center">
-    <form class="outline" [formGroup]="loginForm" (ngSubmit)="login()">
-        <table>
-            <tr>
-                <td>
-                    <label for="username">Email:</label>
-                </td>
-                <td>
-                    <input type="text" formControlName="email">
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <label for="password">Password:</label>
-                </td>
-                <td>
-                    <input type="password" formControlName="password">
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <button type="submit">Login</button>
-                    <button [routerLink]="'/auth/register'">Register</button>
-                </td>
-            </tr>
-        </table>
+    <form class="outline" [formGroup]="loginForm" (ngSubmit)="login()" id="form">
+        <div class="logo">Quack</div>
+        <mat-form-field>
+            <mat-label>Email</mat-label>
+            <input matInput type="text" formControlName="email">
+        </mat-form-field>
+        <br>
+        <mat-form-field>
+            <mat-label>Password</mat-label>
+            <input matInput type="password" formControlName="password">
+        </mat-form-field>
+        <span>
+            <button mat-button type="submit">Login</button>
+            <button mat-button [routerLink]="'/auth/register'">Register</button>
+        </span>
     </form>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/auth/login/login.component.scss b/src/app/auth/login/login.component.scss
index e69de29..a64933b 100644
--- a/src/app/auth/login/login.component.scss
+++ b/src/app/auth/login/login.component.scss
@@ -0,0 +1,10 @@
+mat-form-field {
+    width: 100%;
+}
+
+.logo {
+    width: 100%;
+    text-align: center;
+    font-size: 32px;
+    margin: 10px 0 20px 0;
+}
\ No newline at end of file
diff --git a/src/app/auth/login/login.component.ts b/src/app/auth/login/login.component.ts
index c12e40b..e3597bd 100644
--- a/src/app/auth/login/login.component.ts
+++ b/src/app/auth/login/login.component.ts
@@ -30,8 +30,8 @@ export class LoginComponent implements OnInit {
         this.loginForm.get('password')?.value as String
       )
         .then(() => { this.router.navigateByUrl("/feed") })
-        .catch(() => { alert("wrong username or password") });
+        .catch(() => { alert("wrong email or password") });
     else
-      alert("missing username or password");
+      alert("missing email or password");
   }
 }
diff --git a/src/app/auth/register/register.component.html b/src/app/auth/register/register.component.html
index d9d4431..943f8a8 100644
--- a/src/app/auth/register/register.component.html
+++ b/src/app/auth/register/register.component.html
@@ -1,45 +1,29 @@
 <div class="center">
     <form class="outline" [formGroup]="registerForm" (ngSubmit)="register()">
-        <table>
-            <tr>
-                <td>
-                    <label for="username">Email:</label>
-                </td>
-                <td>
-                    <input type="text" formControlName="email">
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <label for="username">Username:</label>
-                </td>
-                <td>
-                    <input type="text" formControlName="username">
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <label for="password">Password:</label>
-                </td>
-                <td>
-                    <input type="password" formControlName="password">
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <label for="rePassword">Repeat password:</label>
-                </td>
-                <td>
-                    <input type="password" formControlName="rePassword">
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <button type="submit">Register</button>
-                    <button [routerLink]="'/auth/login'">Login</button>
-                </td>
-            </tr>
-        </table>
+        <div class="logo">Register</div>
+        <mat-form-field>
+            <mat-label>Email</mat-label>
+            <input matInput type="text" formControlName="email">
+        </mat-form-field>
+        <br>
+        <mat-form-field>
+            <mat-label>Username [3+]</mat-label>
+            <input matInput type="text" formControlName="username">
+        </mat-form-field>
+        <br>
+        <mat-form-field>
+            <mat-label>Password</mat-label>
+            <input matInput type="password" formControlName="password">
+        </mat-form-field>
+        <br>
+        <mat-form-field>
+            <mat-label>Repeat Password</mat-label>
+            <input matInput type="password" formControlName="rePassword">
+        </mat-form-field>
+        <span>
+            <button mat-button type="submit">Register</button>
+            <button mat-button [routerLink]="'/auth/login'">Login</button>
+        </span>
     </form>
 </div>
 
diff --git a/src/app/auth/register/register.component.scss b/src/app/auth/register/register.component.scss
index e69de29..a64933b 100644
--- a/src/app/auth/register/register.component.scss
+++ b/src/app/auth/register/register.component.scss
@@ -0,0 +1,10 @@
+mat-form-field {
+    width: 100%;
+}
+
+.logo {
+    width: 100%;
+    text-align: center;
+    font-size: 32px;
+    margin: 10px 0 20px 0;
+}
\ No newline at end of file
diff --git a/src/app/feed/feed.component.html b/src/app/feed/feed.component.html
index ec1f9bf..aa94655 100644
--- a/src/app/feed/feed.component.html
+++ b/src/app/feed/feed.component.html
@@ -1,4 +1,4 @@
-<app-top-menu (side)="sideMenu.nav?.toggle()"></app-top-menu>
+<app-top-menu (side)="sideMenu.nav?.toggle()" [title]="'Feed'"></app-top-menu>
 <app-side-menu #sideMenu>
     <div id="main">
         <app-post *ngFor="let post of posts" [post]="post"></app-post>
diff --git a/src/app/new-post/new-post.component.html b/src/app/new-post/new-post.component.html
index b800dd4..f404638 100644
--- a/src/app/new-post/new-post.component.html
+++ b/src/app/new-post/new-post.component.html
@@ -1,4 +1,4 @@
-<app-top-menu (side)="sideMenu.nav?.toggle()"></app-top-menu>
+<app-top-menu (side)="sideMenu.nav?.toggle()" [title]="'New Post'"></app-top-menu>
 <app-side-menu #sideMenu>
     <div id="main">
         <div class="post-container outline">
diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
index f684bd8..6cea53e 100644
--- a/src/app/search/search.component.html
+++ b/src/app/search/search.component.html
@@ -1,4 +1,4 @@
-<app-top-menu (side)="sideMenu.nav?.toggle()"></app-top-menu>
+<app-top-menu (side)="sideMenu.nav?.toggle()" [title]="'Search users'"></app-top-menu>
 <app-side-menu #sideMenu>
     <div id="main">
         <app-large-user *ngFor="let user of users" [user]="user"></app-large-user>   
diff --git a/src/app/shared/top-menu/top-menu.component.html b/src/app/shared/top-menu/top-menu.component.html
index ca21118..6afc5f2 100644
--- a/src/app/shared/top-menu/top-menu.component.html
+++ b/src/app/shared/top-menu/top-menu.component.html
@@ -3,11 +3,11 @@
         <mat-icon>menu</mat-icon>
     </button>
 
-    Quack
+    {{title != undefined ? title : 'Quack'}}
 
     <span>
         <mat-form-field>
-            <mat-label>Search</mat-label>
+            <mat-label>Search users</mat-label>
             <input matInput type="text" #search>
             <button *ngIf="search.value != ''" matSuffix mat-icon-button (click)="search.value = ''">
                 <mat-icon>close</mat-icon>
diff --git a/src/app/shared/top-menu/top-menu.component.scss b/src/app/shared/top-menu/top-menu.component.scss
index 899fa6b..6de3965 100644
--- a/src/app/shared/top-menu/top-menu.component.scss
+++ b/src/app/shared/top-menu/top-menu.component.scss
@@ -3,20 +3,16 @@ mat-toolbar {
     position: fixed;
     z-index: 100;
     height: var(--top-menu-height);
-    padding-top: 10px;
-
     overflow: hidden;
 
     button {
         height: 100%;
+        aspect-ratio: 1;
     }
 
     span {
         float: right;
-    }
-
-    button {
-        aspect-ratio: 1;
+        padding: 5px;
     }
 
     box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.4);
diff --git a/src/app/shared/top-menu/top-menu.component.ts b/src/app/shared/top-menu/top-menu.component.ts
index 73da7da..afef006 100644
--- a/src/app/shared/top-menu/top-menu.component.ts
+++ b/src/app/shared/top-menu/top-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
@@ -14,6 +14,7 @@ import { RouterModule } from '@angular/router';
   styleUrl: './top-menu.component.scss'
 })
 export class TopMenuComponent {
+  @Input() title?: String;
   @Output() side: EventEmitter<Boolean> = new EventEmitter<Boolean>();
 
   openSide() {
diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html
index 86d06b9..f6c0137 100644
--- a/src/app/user/user.component.html
+++ b/src/app/user/user.component.html
@@ -1,4 +1,4 @@
-<app-top-menu (side)="sideMenu.nav?.toggle()"></app-top-menu>
+<app-top-menu (side)="sideMenu.nav?.toggle()" [title]="'Profile'"></app-top-menu>
 <app-side-menu #sideMenu>
     <div id="main">
         <app-large-user [user]="user"></app-large-user>