dowerx/quack-angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more material design

Browse Source
This commit is contained in:
Benedek László 2024-05-11 16:16:48 +02:00
parent 628af48e47
commit da67b5527e
13 changed files with 79 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/auth/auth.module.ts
View File

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

40
src/app/auth/login/login.component.html
View File

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

10
src/app/auth/login/login.component.scss
View File

@ -0,0 +1,10 @@
mat-form-field {
width: 100%;
}
.logo {
width: 100%;
text-align: center;
font-size: 32px;
margin: 10px 0 20px 0;
}

4
src/app/auth/login/login.component.ts
View File

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

64
src/app/auth/register/register.component.html
View File

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

10
src/app/auth/register/register.component.scss
View File

@ -0,0 +1,10 @@
mat-form-field {
width: 100%;
}
.logo {
width: 100%;
text-align: center;
font-size: 32px;
margin: 10px 0 20px 0;
}

2
src/app/feed/feed.component.html
View File

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

2
src/app/new-post/new-post.component.html
View File

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

2
src/app/search/search.component.html
View File

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

4
src/app/shared/top-menu/top-menu.component.html
View File

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

8
src/app/shared/top-menu/top-menu.component.scss
View File

@ -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);

3
src/app/shared/top-menu/top-menu.component.ts
View File

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

2
src/app/user/user.component.html
View File

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