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 @@ -
+ +
+ + + +
+
+
+ +
+
+ +
+
+ +
+

Create an Account

+

Enter your email below to create your Account

+
+
+ +
+
+ +
+ +

+ By clicking continue, you agree to our + Terms of Service + and + Privacy Policy + . +

+
+
+
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"]'] } }