more material design

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 { }

src/app/auth/login/login.component.html

@@ -1,28 +1,18 @@
 <div class="center">
-    <form class="outline" [formGroup]="loginForm" (ngSubmit)="login()">
+    <form class="outline" [formGroup]="loginForm" (ngSubmit)="login()" id="form">
-        <table>
+        <div class="logo">Quack</div>
-            <tr>
+        <mat-form-field>
-                <td>
+            <mat-label>Email</mat-label>
-                    <label for="username">Email:</label>
+            <input matInput type="text" formControlName="email">
-                </td>
+        </mat-form-field>
-                <td>
+        <br>
-                    <input type="text" formControlName="email">
+        <mat-form-field>
-                </td>
+            <mat-label>Password</mat-label>
-            </tr>
+            <input matInput type="password" formControlName="password">
-            <tr>
+        </mat-form-field>
-                <td>
+        <span>
-                    <label for="password">Password:</label>
+            <button mat-button type="submit">Login</button>
-                </td>
+            <button mat-button [routerLink]="'/auth/register'">Register</button>
-                <td>
+        </span>
-                    <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>
 </div>

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;
+}

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");
   }
 }

src/app/auth/register/register.component.html

@@ -1,45 +1,29 @@
 <div class="center">
     <form class="outline" [formGroup]="registerForm" (ngSubmit)="register()">
-        <table>
+        <div class="logo">Register</div>
-            <tr>
+        <mat-form-field>
-                <td>
+            <mat-label>Email</mat-label>
-                    <label for="username">Email:</label>
+            <input matInput type="text" formControlName="email">
-                </td>
+        </mat-form-field>
-                <td>
+        <br>
-                    <input type="text" formControlName="email">
+        <mat-form-field>
-                </td>
+            <mat-label>Username [3+]</mat-label>
-            </tr>
+            <input matInput type="text" formControlName="username">
-            <tr>
+        </mat-form-field>
-                <td>
+        <br>
-                    <label for="username">Username:</label>
+        <mat-form-field>
-                </td>
+            <mat-label>Password</mat-label>
-                <td>
+            <input matInput type="password" formControlName="password">
-                    <input type="text" formControlName="username">
+        </mat-form-field>
-                </td>
+        <br>
-            </tr>
+        <mat-form-field>
-            <tr>
+            <mat-label>Repeat Password</mat-label>
-                <td>
+            <input matInput type="password" formControlName="rePassword">
-                    <label for="password">Password:</label>
+        </mat-form-field>
-                </td>
+        <span>
-                <td>
+            <button mat-button type="submit">Register</button>
-                    <input type="password" formControlName="password">
+            <button mat-button [routerLink]="'/auth/login'">Login</button>
-                </td>
+        </span>
-            </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>
     </form>
 </div>
 

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;
+}

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>

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">

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>   

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>

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;
-    }
+        padding: 5px;
-
-    button {
-        aspect-ratio: 1;
     }
 
     box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.4);

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() {

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>