feature/init-tailwind-daisyui #13
|
@ -1,6 +1,8 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
import { ThemeService } from './shared/service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
|
@ -10,5 +12,5 @@ import { RouterOutlet } from '@angular/router';
|
|||
styleUrl: './app.component.scss',
|
||||
})
|
||||
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-wrapper">
|
||||
@if (userSignupSuccess()) {
|
||||
|
@ -107,4 +107,90 @@
|
|||
}
|
||||
</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>
|
||||
|
|
|
@ -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,
|
||||
} from '../../api';
|
||||
import { ApiConfiguration } from '../../config/api-configuration';
|
||||
import { AuthService, SessionStorageService } from '../../shared/service';
|
||||
import {
|
||||
AuthService,
|
||||
SessionStorageService,
|
||||
ThemeService,
|
||||
} from '../../shared/service';
|
||||
import {
|
||||
customEmailValidator,
|
||||
customPasswordValidator,
|
||||
|
@ -78,11 +82,16 @@ export class RegisterRootComponent implements OnInit {
|
|||
public userSignupSuccess: WritableSignal<boolean> = signal(false);
|
||||
private removeQueryParams: WritableSignal<boolean> = signal(false);
|
||||
|
||||
public get isDarkMode(): boolean {
|
||||
return this.themeService.getTheme() === 'dark';
|
||||
}
|
||||
|
||||
public constructor(
|
||||
private readonly formBuilder: FormBuilder,
|
||||
private readonly authService: AuthService,
|
||||
private readonly router: Router,
|
||||
private readonly sessionStorageService: SessionStorageService
|
||||
private readonly sessionStorageService: SessionStorageService,
|
||||
private readonly themeService: ThemeService
|
||||
) {
|
||||
effect(() => {
|
||||
if (this.form) {
|
||||
|
@ -113,6 +122,10 @@ export class RegisterRootComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
public toggleTheme(): void {
|
||||
this.themeService.toggleTheme();
|
||||
}
|
||||
|
||||
public preselectForm(): void {
|
||||
if (!this.email() || !this.verified()) {
|
||||
const email = this.sessionStorageService.getItem('email');
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
export * from './auth.service';
|
||||
export * from './local-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 components;
|
||||
@tailwind utilities;
|
||||
|
||||
// html,
|
||||
// body {
|
||||
// height: 100%;
|
||||
// margin: 0;
|
||||
// }
|
||||
|
|
|
@ -8,10 +8,8 @@ module.exports = {
|
|||
},
|
||||
plugins: [require('daisyui')],
|
||||
daisyui: {
|
||||
themes: [
|
||||
"light",
|
||||
],
|
||||
darkTheme: "dark"
|
||||
themes: ["light", "dark"],
|
||||
darkMode: ['class', '[data-theme="dark"]']
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue