feature/init-tailwind-daisyui #13
|
@ -1,6 +1,8 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { RouterOutlet } from '@angular/router';
|
import { RouterOutlet } from '@angular/router';
|
||||||
|
|
||||||
|
import { ThemeService } from './shared/service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
|
@ -10,5 +12,5 @@ import { RouterOutlet } from '@angular/router';
|
||||||
styleUrl: './app.component.scss',
|
styleUrl: './app.component.scss',
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
public constructor() {}
|
public constructor(private readonly themeService: ThemeService) {}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div id="background">
|
<!-- <div id="background">
|
||||||
<div class="img-zone">
|
<div class="img-zone">
|
||||||
<div class="img-wrapper">
|
<div class="img-wrapper">
|
||||||
@if (userSignupSuccess()) {
|
@if (userSignupSuccess()) {
|
||||||
|
@ -107,4 +107,90 @@
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
</div> -->
|
||||||
|
<div class="flex h-screen w-screen">
|
||||||
|
<div class="hidden md:flex md:flex-col md:w-1/2 bg-primary">
|
||||||
|
<div class="flex-1 flex items-start pt-16 px-12">
|
||||||
|
<h1 class="text-3xl text-base-100">[LOGO] APP-NAME</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col justify-end pb-16 px-12">
|
||||||
|
<blockquote>
|
||||||
|
<p class="text-xl text-base-100 font-semibold">
|
||||||
|
“This library has saved me countless hours of work and helped me
|
||||||
|
deliver stunning designs to my clients faster than ever before.”
|
||||||
|
</p>
|
||||||
|
<small class="block text-sm font-light text-base-100 mt-4">
|
||||||
|
— Sofia Davis
|
||||||
|
</small>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Rechter Bereich, immer sichtbar -->
|
||||||
|
<div class="flex flex-col w-full md:w-1/2">
|
||||||
|
<div class="flex px-12 gap-3">
|
||||||
|
<div class="flex items-start justify-end pt-16">
|
||||||
|
<label class="swap swap-rotate">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
(change)="toggleTheme()"
|
||||||
|
[checked]="isDarkMode" />
|
||||||
|
|
||||||
|
<!-- sun icon -->
|
||||||
|
<svg
|
||||||
|
class="swap-on h-10 w-10 fill-current"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- moon icon -->
|
||||||
|
<svg
|
||||||
|
class="swap-off h-10 w-10 fill-current"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 items-start flex justify-end pt-16">
|
||||||
|
<button class="btn btn-primary btn-outline no-animation">Login</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Zentrierter Inhalt für Account-Erstellung -->
|
||||||
|
<div class="flex-1 flex flex-col justify-center items-center px-12">
|
||||||
|
<h1 class="text-3xl font-semibold text-center">Create an Account</h1>
|
||||||
|
<p class="text-center">Enter your email below to create your Account</p>
|
||||||
|
<form class="flex gap-4 flex-col items-center py-6 w-full max-w-md">
|
||||||
|
<div class="form-control w-full">
|
||||||
|
<label class="input-group input-group-sm">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="name@example.com"
|
||||||
|
class="input input-bordered input w-full" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-control w-full">
|
||||||
|
<label class="input-group input-group-sm">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="password"
|
||||||
|
class="input input-bordered input w-full" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button class="btn w-full btn-primary font-semibold">
|
||||||
|
Sign In with Email
|
||||||
|
</button>
|
||||||
|
<p class="text-xs w-full text-center">
|
||||||
|
By clicking continue, you agree to our
|
||||||
|
<u class="cursor-pointer">Terms of Service</u>
|
||||||
|
and
|
||||||
|
<u class="cursor-pointer">Privacy Policy</u>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,104 +0,0 @@
|
||||||
#background {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-zone {
|
|
||||||
flex: 65;
|
|
||||||
background-color: lightsalmon;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.img-wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.success {
|
|
||||||
margin-left: 4em;
|
|
||||||
h1 {
|
|
||||||
font-size: 4em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.headline {
|
|
||||||
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,
|
|
||||||
.terms {
|
|
||||||
.label {
|
|
||||||
font-size: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
min-width: 500px;
|
|
||||||
}
|
|
||||||
::ng-deep p-password.custom-p-password div input {
|
|
||||||
min-width: 500px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.terms {
|
|
||||||
padding-top: 1.33em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password {
|
|
||||||
padding-top: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signup {
|
|
||||||
padding-top: 3em;
|
|
||||||
|
|
||||||
button {
|
|
||||||
min-width: 500px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.change-mask {
|
|
||||||
padding-top: 1.33em;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
a {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -32,7 +32,11 @@ import {
|
||||||
UserCredentialsDtoApiModel,
|
UserCredentialsDtoApiModel,
|
||||||
} from '../../api';
|
} from '../../api';
|
||||||
import { ApiConfiguration } from '../../config/api-configuration';
|
import { ApiConfiguration } from '../../config/api-configuration';
|
||||||
import { AuthService, SessionStorageService } from '../../shared/service';
|
import {
|
||||||
|
AuthService,
|
||||||
|
SessionStorageService,
|
||||||
|
ThemeService,
|
||||||
|
} from '../../shared/service';
|
||||||
import {
|
import {
|
||||||
customEmailValidator,
|
customEmailValidator,
|
||||||
customPasswordValidator,
|
customPasswordValidator,
|
||||||
|
@ -78,11 +82,16 @@ export class RegisterRootComponent implements OnInit {
|
||||||
public userSignupSuccess: WritableSignal<boolean> = signal(false);
|
public userSignupSuccess: WritableSignal<boolean> = signal(false);
|
||||||
private removeQueryParams: WritableSignal<boolean> = signal(false);
|
private removeQueryParams: WritableSignal<boolean> = signal(false);
|
||||||
|
|
||||||
|
public get isDarkMode(): boolean {
|
||||||
|
return this.themeService.getTheme() === 'dark';
|
||||||
|
}
|
||||||
|
|
||||||
public constructor(
|
public constructor(
|
||||||
private readonly formBuilder: FormBuilder,
|
private readonly formBuilder: FormBuilder,
|
||||||
private readonly authService: AuthService,
|
private readonly authService: AuthService,
|
||||||
private readonly router: Router,
|
private readonly router: Router,
|
||||||
private readonly sessionStorageService: SessionStorageService
|
private readonly sessionStorageService: SessionStorageService,
|
||||||
|
private readonly themeService: ThemeService
|
||||||
) {
|
) {
|
||||||
effect(() => {
|
effect(() => {
|
||||||
if (this.form) {
|
if (this.form) {
|
||||||
|
@ -113,6 +122,10 @@ export class RegisterRootComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public toggleTheme(): void {
|
||||||
|
this.themeService.toggleTheme();
|
||||||
|
}
|
||||||
|
|
||||||
public preselectForm(): void {
|
public preselectForm(): void {
|
||||||
if (!this.email() || !this.verified()) {
|
if (!this.email() || !this.verified()) {
|
||||||
const email = this.sessionStorageService.getItem('email');
|
const email = this.sessionStorageService.getItem('email');
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
export * from './auth.service';
|
export * from './auth.service';
|
||||||
export * from './local-storage.service';
|
export * from './local-storage.service';
|
||||||
export * from './session-storage.service';
|
export * from './session-storage.service';
|
||||||
|
export * from './theme.service';
|
||||||
|
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
|
import { LocalStorageService } from './local-storage.service';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root',
|
||||||
|
})
|
||||||
|
export class ThemeService {
|
||||||
|
private currentTheme: string = '';
|
||||||
|
|
||||||
|
public constructor(private storageService: LocalStorageService) {
|
||||||
|
this.loadInitialTheme();
|
||||||
|
}
|
||||||
|
|
||||||
|
public getTheme(): string {
|
||||||
|
return this.currentTheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
public setTheme(theme: string): void {
|
||||||
|
this.currentTheme = theme;
|
||||||
|
this.storageService.setItem('theme', theme);
|
||||||
|
this.applyTheme(theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
public toggleTheme(): void {
|
||||||
|
this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
|
||||||
|
this.setTheme(this.currentTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
private applyTheme(theme: string): void {
|
||||||
|
document.body.setAttribute('data-theme', theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
private loadInitialTheme(): void {
|
||||||
|
const savedTheme = this.storageService.getItem<string>('theme');
|
||||||
|
|
||||||
|
this.currentTheme = savedTheme ? savedTheme : 'light';
|
||||||
|
this.applyTheme(this.currentTheme);
|
||||||
|
}
|
||||||
|
}
|
|
@ -8,9 +8,3 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
// html,
|
|
||||||
// body {
|
|
||||||
// height: 100%;
|
|
||||||
// margin: 0;
|
|
||||||
// }
|
|
||||||
|
|
|
@ -8,10 +8,8 @@ module.exports = {
|
||||||
},
|
},
|
||||||
plugins: [require('daisyui')],
|
plugins: [require('daisyui')],
|
||||||
daisyui: {
|
daisyui: {
|
||||||
themes: [
|
themes: ["light", "dark"],
|
||||||
"light",
|
darkMode: ['class', '[data-theme="dark"]']
|
||||||
],
|
|
||||||
darkTheme: "dark"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue