Feature: Added Login / Register Feature #3
|
@ -1,2 +1 @@
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
<button (click)="connectMollie()">Connect with Mollie</button>
|
|
||||||
|
|
|
@ -2,4 +2,5 @@ import { Routes } from '@angular/router';
|
||||||
|
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [
|
||||||
{ path: '', pathMatch: 'full', redirectTo: ''},
|
{ path: '', pathMatch: 'full', redirectTo: ''},
|
||||||
|
{ path: 'signup', loadComponent: () => import('./pages/register-root/register-root.component').then(m => m.RegisterRootComponent) },
|
||||||
];
|
];
|
||||||
|
|
|
@ -0,0 +1,60 @@
|
||||||
|
<div id="background">
|
||||||
|
<div class="img-zone">
|
||||||
|
<div class="img-wrapper">
|
||||||
|
<h1>Hi, Welcome to Ticket App.</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-zone">
|
||||||
|
<h1>
|
||||||
|
@if (this.isSignupSignal()) {
|
||||||
|
Registrieren
|
||||||
|
}
|
||||||
|
@else if (this.isRegisterSignal()) {
|
||||||
|
Anmelden
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
Erste Schritte
|
||||||
|
}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
@if (this.isDisplayButtons()) {
|
||||||
|
<div class="action">
|
||||||
|
<button pButton type="button" label="Anmelden" (click)="toggleAction('register')"></button>
|
||||||
|
<button pButton type="button" label="Registrieren" (click)="toggleAction('signup')"></button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (this.isRegisterSignal()) {
|
||||||
|
<div class="register-wrapper">
|
||||||
|
<form [formGroup]="form" *ngIf="form" (ngSubmit)="onSubmit()">
|
||||||
|
<div class="e-mail">
|
||||||
|
<div class="label">
|
||||||
|
<label for="email">E-Mail</label>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
pInputText
|
||||||
|
id="email"
|
||||||
|
formControlName="email"
|
||||||
|
aria-describedby="e-mail"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="password">
|
||||||
|
<div class="label">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
pInputText
|
||||||
|
id="password"
|
||||||
|
formControlName="password"
|
||||||
|
aria-describedby="password"
|
||||||
|
type="password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="signup">
|
||||||
|
<button pButton type="submit" label="Anmelden"></button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,77 @@
|
||||||
|
#background {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-zone {
|
||||||
|
flex: 65;
|
||||||
|
background-color: lightsalmon;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.img-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 4em;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-zone {
|
||||||
|
flex: 35;
|
||||||
|
background-color: lightcyan;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.action {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1em;
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
padding: 0 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-mail, .password {
|
||||||
|
.label {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
min-width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.password {
|
||||||
|
padding-top: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signup {
|
||||||
|
padding-top: 3em;
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { CommonModule } from "@angular/common";
|
||||||
|
import { ChangeDetectionStrategy, Component, OnInit, WritableSignal, signal } from '@angular/core';
|
||||||
|
import { InputTextModule } from 'primeng/inputtext';
|
||||||
|
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
|
||||||
|
import { ButtonModule } from 'primeng/button';
|
||||||
|
|
||||||
|
type AuthAction = 'register' | 'signup';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-register-root',
|
||||||
|
standalone: true,
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
FormsModule,
|
||||||
|
InputTextModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
ButtonModule
|
||||||
|
],
|
||||||
|
templateUrl: './register-root.component.html',
|
||||||
|
styleUrl: './register-root.component.scss',
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
})
|
||||||
|
export class RegisterRootComponent implements OnInit {
|
||||||
|
|
||||||
|
public form: FormGroup | undefined;
|
||||||
|
public isRegisterSignal: WritableSignal<boolean> = signal(false)
|
||||||
|
public isSignupSignal: WritableSignal<boolean> = signal(false)
|
||||||
|
public isDisplayButtons: WritableSignal<boolean> = signal(true)
|
||||||
|
|
||||||
|
constructor(private readonly formBuilder: FormBuilder) { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.form = this.formBuilder.group({
|
||||||
|
email: ['', [Validators.required, Validators.email]],
|
||||||
|
password: ['', [Validators.required, Validators.minLength(6)]]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public toggleAction(action: AuthAction) {
|
||||||
|
const isRegister = action === 'register';
|
||||||
|
this.isRegisterSignal.set(isRegister);
|
||||||
|
this.isSignupSignal.set(!isRegister);
|
||||||
|
this.isDisplayButtons.set(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
public onSubmit() {
|
||||||
|
console.log('signup');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue