feat: enhance email field component with validation and styling

frontend/src/app/atomic/input/email-field/email-field.component.css

@@ -9,9 +9,17 @@ input {
     color: var(--primary-text-color);
 }
 
+.valid {
+
+}
+
+.invalid {
+    border-color: var(--error-color);
+    border-width: 2px;
+    border-style: solid;
+}
+
 input:focus {
     outline-color: var(--primary-background-color);
     outline-width: 100px;
-    /*outline-offset: 1px;*/
-    /*outline-style: auto;*/
 }

frontend/src/app/atomic/input/email-field/email-field.component.html

@@ -1 +1 @@
-<input type="email" [value]="value ? value : ''"/>
+<input [(ngModel)]="value" [disabled]="disabled" [ngClass]="{'invalid': value != '' && !verify_mail()}" type="email"/>

frontend/src/app/atomic/input/email-field/email-field.component.ts

@@ -1,12 +1,34 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {FormsModule} from "@angular/forms";
+import {verify_email} from "../../../model/util";
+import {NgClass} from "@angular/common";
 
 @Component({
     selector: 'atomic-email-field',
-    imports: [],
+    imports: [
+        FormsModule,
+        NgClass
+    ],
     templateUrl: './email-field.component.html',
     styleUrl: './email-field.component.css'
 })
 export class EmailFieldComponent {
-    @Input() value?: string;
-    @Output() valueChange = new EventEmitter<string>();
+    @Input() disabled: boolean = false;
+
+    private _value: string = '';
+    @Input()
+    get value(): string {
+        return this._value;
+    }
+
+    set value(val: string) {
+        this._value = val;
+        this.valueChange.emit(this._value);
+    }
+
+    @Output() valueChange = new EventEmitter<string>();
+
+    verify_mail() {
+        return verify_email(this._value);
+    }
 }

frontend/src/app/model/util.ts

@@ -0,0 +1,5 @@
+export const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+export function verify_email(email: string): boolean {
+    return EMAIL_REGEX.test(email);
+}