diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 9b8909b..7b793bb 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -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) {}
}
diff --git a/frontend/src/app/pages/register-root/register-root.component.html b/frontend/src/app/pages/register-root/register-root.component.html
index 2c37a02..1915a6a 100644
--- a/frontend/src/app/pages/register-root/register-root.component.html
+++ b/frontend/src/app/pages/register-root/register-root.component.html
@@ -1,4 +1,4 @@
-
+
+
+
+
+
[LOGO] APP-NAME
+
+
+
+
+ “This library has saved me countless hours of work and helped me
+ deliver stunning designs to my clients faster than ever before.”
+
+
+ — Sofia Davis
+
+
+
+
+
+
+
+
+
+
+
Create an Account
+
Enter your email below to create your Account
+
+
+
diff --git a/frontend/src/app/pages/register-root/register-root.component.scss b/frontend/src/app/pages/register-root/register-root.component.scss
index ed1f330..e69de29 100644
--- a/frontend/src/app/pages/register-root/register-root.component.scss
+++ b/frontend/src/app/pages/register-root/register-root.component.scss
@@ -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;
- }
- }
- }
-}
diff --git a/frontend/src/app/pages/register-root/register-root.component.ts b/frontend/src/app/pages/register-root/register-root.component.ts
index 67bddda..7569c2b 100644
--- a/frontend/src/app/pages/register-root/register-root.component.ts
+++ b/frontend/src/app/pages/register-root/register-root.component.ts
@@ -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
= signal(false);
private removeQueryParams: WritableSignal = 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');
diff --git a/frontend/src/app/shared/service/index.ts b/frontend/src/app/shared/service/index.ts
index f11d653..3d097fd 100644
--- a/frontend/src/app/shared/service/index.ts
+++ b/frontend/src/app/shared/service/index.ts
@@ -1,3 +1,4 @@
export * from './auth.service';
export * from './local-storage.service';
export * from './session-storage.service';
+export * from './theme.service';
diff --git a/frontend/src/app/shared/service/theme.service.ts b/frontend/src/app/shared/service/theme.service.ts
new file mode 100644
index 0000000..50a7cb5
--- /dev/null
+++ b/frontend/src/app/shared/service/theme.service.ts
@@ -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('theme');
+
+ this.currentTheme = savedTheme ? savedTheme : 'light';
+ this.applyTheme(this.currentTheme);
+ }
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 652df77..4f87c75 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -8,9 +8,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
-// html,
-// body {
-// height: 100%;
-// margin: 0;
-// }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index c66e592..195c258 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -8,10 +8,8 @@ module.exports = {
},
plugins: [require('daisyui')],
daisyui: {
- themes: [
- "light",
- ],
- darkTheme: "dark"
+ themes: ["light", "dark"],
+ darkMode: ['class', '[data-theme="dark"]']
}
}