Compare commits
2 Commits
65647ccd1f
...
2c3db04acd
Author | SHA1 | Date |
---|---|---|
Igor Hrenowitsch Propisnov | 2c3db04acd | |
Igor Hrenowitsch Propisnov | e5d0387219 |
|
@ -1,2 +1 @@
|
|||
<router-outlet></router-outlet>
|
||||
<button (click)="connectMollie()">Connect with Mollie</button>
|
||||
|
|
|
@ -5,5 +5,8 @@ import { provideAnimations } from '@angular/platform-browser/animations';
|
|||
import { routes } from './app.routes';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideRouter(routes, withComponentInputBinding()), provideAnimations()],
|
||||
providers: [
|
||||
provideRouter(routes, withComponentInputBinding()),
|
||||
provideAnimations(),
|
||||
],
|
||||
};
|
||||
|
|
|
@ -1,5 +1,12 @@
|
|||
import { Routes } from '@angular/router';
|
||||
|
||||
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,64 @@
|
|||
<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,78 @@
|
|||
#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,60 @@
|
|||
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');
|
||||
}
|
||||
}
|
|
@ -2,6 +2,6 @@ export const environment = {
|
|||
production: true,
|
||||
oauth: {
|
||||
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,
|
||||
oauth: {
|
||||
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/resources/themes/lara-light-blue/theme.css';
|
||||
@import 'primeng/resources/primeng.css';
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue