Feature: Added Login / Register Feature #3
|
@ -5,5 +5,8 @@ import { provideAnimations } from '@angular/platform-browser/animations';
|
||||||
import { routes } from './app.routes';
|
import { routes } from './app.routes';
|
||||||
|
|
||||||
export const appConfig: ApplicationConfig = {
|
export const appConfig: ApplicationConfig = {
|
||||||
providers: [provideRouter(routes, withComponentInputBinding()), provideAnimations()],
|
providers: [
|
||||||
|
provideRouter(routes, withComponentInputBinding()),
|
||||||
|
provideAnimations(),
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,12 @@
|
||||||
import { Routes } from '@angular/router';
|
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) },
|
{
|
||||||
|
path: 'signup',
|
||||||
|
loadComponent: () =>
|
||||||
|
import('./pages/register-root/register-root.component').then(
|
||||||
|
(m) => m.RegisterRootComponent
|
||||||
|
),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -8,19 +8,25 @@
|
||||||
<h1>
|
<h1>
|
||||||
@if (this.isSignupSignal()) {
|
@if (this.isSignupSignal()) {
|
||||||
Registrieren
|
Registrieren
|
||||||
}
|
} @else if (this.isRegisterSignal()) {
|
||||||
@else if (this.isRegisterSignal()) {
|
|
||||||
Anmelden
|
Anmelden
|
||||||
}
|
} @else {
|
||||||
@else {
|
|
||||||
Erste Schritte
|
Erste Schritte
|
||||||
}
|
}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
@if (this.isDisplayButtons()) {
|
@if (this.isDisplayButtons()) {
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<button pButton type="button" label="Anmelden" (click)="toggleAction('register')"></button>
|
<button
|
||||||
<button pButton type="button" label="Registrieren" (click)="toggleAction('signup')"></button>
|
pButton
|
||||||
|
type="button"
|
||||||
|
label="Anmelden"
|
||||||
|
(click)="toggleAction('register')"></button>
|
||||||
|
<button
|
||||||
|
pButton
|
||||||
|
type="button"
|
||||||
|
label="Registrieren"
|
||||||
|
(click)="toggleAction('signup')"></button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,8 +41,7 @@
|
||||||
pInputText
|
pInputText
|
||||||
id="email"
|
id="email"
|
||||||
formControlName="email"
|
formControlName="email"
|
||||||
aria-describedby="e-mail"
|
aria-describedby="e-mail" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="password">
|
<div class="password">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
|
@ -47,8 +52,7 @@
|
||||||
id="password"
|
id="password"
|
||||||
formControlName="password"
|
formControlName="password"
|
||||||
aria-describedby="password"
|
aria-describedby="password"
|
||||||
type="password"
|
type="password" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="signup">
|
<div class="signup">
|
||||||
<button pButton type="submit" label="Anmelden"></button>
|
<button pButton type="submit" label="Anmelden"></button>
|
||||||
|
|
|
@ -52,7 +52,8 @@
|
||||||
padding: 0 0 0.5em;
|
padding: 0 0 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.e-mail, .password {
|
.e-mail,
|
||||||
|
.password {
|
||||||
.label {
|
.label {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,38 +1,49 @@
|
||||||
import { CommonModule } from "@angular/common";
|
import { CommonModule } from '@angular/common';
|
||||||
import { ChangeDetectionStrategy, Component, OnInit, WritableSignal, signal } from '@angular/core';
|
import {
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
Component,
|
||||||
|
OnInit,
|
||||||
|
WritableSignal,
|
||||||
|
signal,
|
||||||
|
} from '@angular/core';
|
||||||
import { InputTextModule } from 'primeng/inputtext';
|
import { InputTextModule } from 'primeng/inputtext';
|
||||||
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
|
import {
|
||||||
|
FormBuilder,
|
||||||
|
FormGroup,
|
||||||
|
FormsModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
Validators,
|
||||||
|
} from '@angular/forms';
|
||||||
import { ButtonModule } from 'primeng/button';
|
import { ButtonModule } from 'primeng/button';
|
||||||
|
|
||||||
type AuthAction = 'register' | 'signup';
|
type AuthAction = 'register' | 'signup';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-register-root',
|
selector: 'app-register-root',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
InputTextModule,
|
InputTextModule,
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
ButtonModule
|
ButtonModule,
|
||||||
],
|
],
|
||||||
templateUrl: './register-root.component.html',
|
templateUrl: './register-root.component.html',
|
||||||
styleUrl: './register-root.component.scss',
|
styleUrl: './register-root.component.scss',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
})
|
})
|
||||||
export class RegisterRootComponent implements OnInit {
|
export class RegisterRootComponent implements OnInit {
|
||||||
|
|
||||||
public form: FormGroup | undefined;
|
public form: FormGroup | undefined;
|
||||||
public isRegisterSignal: WritableSignal<boolean> = signal(false)
|
public isRegisterSignal: WritableSignal<boolean> = signal(false);
|
||||||
public isSignupSignal: WritableSignal<boolean> = signal(false)
|
public isSignupSignal: WritableSignal<boolean> = signal(false);
|
||||||
public isDisplayButtons: WritableSignal<boolean> = signal(true)
|
public isDisplayButtons: WritableSignal<boolean> = signal(true);
|
||||||
|
|
||||||
constructor(private readonly formBuilder: FormBuilder) { }
|
constructor(private readonly formBuilder: FormBuilder) {}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.form = this.formBuilder.group({
|
this.form = this.formBuilder.group({
|
||||||
email: ['', [Validators.required, Validators.email]],
|
email: ['', [Validators.required, Validators.email]],
|
||||||
password: ['', [Validators.required, Validators.minLength(6)]]
|
password: ['', [Validators.required, Validators.minLength(6)]],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,5 +57,4 @@ export class RegisterRootComponent implements OnInit {
|
||||||
public onSubmit() {
|
public onSubmit() {
|
||||||
console.log('signup');
|
console.log('signup');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,6 @@ export const environment = {
|
||||||
production: true,
|
production: true,
|
||||||
oauth: {
|
oauth: {
|
||||||
clinetId: 'app_FLXnxSBnnaKkXoYCgk3J62iA',
|
clinetId: 'app_FLXnxSBnnaKkXoYCgk3J62iA',
|
||||||
redirectUri: 'https://commonly-hot-airedale.ngrok-free.app/oauth'
|
redirectUri: 'https://commonly-hot-airedale.ngrok-free.app/oauth',
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,6 +2,6 @@ export const environment = {
|
||||||
production: false,
|
production: false,
|
||||||
oauth: {
|
oauth: {
|
||||||
clinetId: 'app_FLXnxSBnnaKkXoYCgk3J62iA',
|
clinetId: 'app_FLXnxSBnnaKkXoYCgk3J62iA',
|
||||||
redirectUri: 'https://commonly-hot-airedale.ngrok-free.app/oauth'
|
redirectUri: 'https://commonly-hot-airedale.ngrok-free.app/oauth',
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,3 +1,9 @@
|
||||||
// Import PrimeNG styles
|
// Import PrimeNG styles
|
||||||
@import 'primeng/resources/themes/lara-light-blue/theme.css';
|
@import 'primeng/resources/themes/lara-light-blue/theme.css';
|
||||||
@import 'primeng/resources/primeng.css';
|
@import 'primeng/resources/primeng.css';
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue