Signup

src/app/core/auth/auth.service.spec.ts

@@ -0,0 +1,20 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClientTesting(), provideHttpClient()],
+    });
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/auth/auth.service.ts

@@ -0,0 +1,15 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { SignupPayload } from './models/signup-payload.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  readonly #http = inject(HttpClient);
+
+  public signup(payload: SignupPayload): Observable<void> {
+    return this.#http.post<void>('/auth/signup', payload);
+  }
+}

src/app/core/auth/models/signup-payload.model.ts

@@ -0,0 +1,5 @@
+export interface SignupPayload {
+  username: string;
+  email: string;
+  password: string;
+}

src/app/core/auth/signup/signup.component.css

@@ -0,0 +1,39 @@
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.btn-submit {
+  font-weight: 700;
+  margin-block-start: 1rem;
+}
+
+.password-strength-container {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.level-list {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.3rem;
+  width: 100%;
+}
+
+.level {
+  height: 0.3rem;
+  width: 100%;
+}
+
+.level-active {
+  background-color: var(--success-color);
+}
+
+.password-strength-label {
+  font-size: 0.7rem;
+  min-width: 4rem;
+  text-align: end;
+}

src/app/core/auth/signup/signup.component.html

@@ -0,0 +1,36 @@
+<form [formGroup]="form" [isOptionalEnforced]="true" (ngSubmit)="submit()">
+  <app-form-field label="Username">
+    <input app-field type="text" formControlName="username" />
+  </app-form-field>
+  <app-form-field label="Email">
+    <input app-field type="text" formControlName="email" />
+    @if (form.controls.email.hasError("email")) {
+      <app-error-message>Invalid email format</app-error-message>
+    }
+  </app-form-field>
+  <app-form-field label="Password">
+    <input app-field type="password" formControlName="password" />
+    <app-hint-message class="password-strength-container">
+      @let passwordStrength = passwordStrength$ | async;
+      <div class="level-list">
+        @for (level of passwordLevels; track level; let index = $index) {
+          <div
+            class="level"
+            [class.level-active]="index <= passwordStrength"
+          ></div>
+        }
+      </div>
+      <div class="password-strength-label">
+        {{ passwordLevels[passwordStrength] }}
+      </div>
+    </app-hint-message>
+  </app-form-field>
+  <app-form-field label="Confirm password">
+    <input app-field type="password" formControlName="confirmPassword" />
+    @if (form.controls.confirmPassword.hasError("passwordMismatch")) {
+      <app-error-message>Passwords do not match</app-error-message>
+    }
+  </app-form-field>
+
+  <button type="submit" class="btn btn-primary btn-submit">Sign up</button>
+</form>

src/app/core/auth/signup/signup.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignupComponent } from './signup.component';
+
+describe('SignupComponent', () => {
+  let component: SignupComponent;
+  let fixture: ComponentFixture<SignupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SignupComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SignupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/auth/signup/signup.component.ts

@@ -0,0 +1,102 @@
+import { ChangeDetectionStrategy, Component, output } from '@angular/core';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  ValidationErrors,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+import { FormFieldComponent } from '../../../shared/components/form-field/form-field.component';
+import { FieldDirective } from '../../../shared/directives/field.directive';
+import { ErrorMessageDirective } from '../../../shared/directives/error-message.directive';
+import { FormDirective } from '../../../shared/directives/form.directive';
+import { map } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+import { SignupPayload } from '../models/signup-payload.model';
+import { HintMessageDirective } from '../../../shared/directives/hint-message.directive';
+
+interface FormType {
+  username: FormControl<string>;
+  email: FormControl<string>;
+  password: FormControl<string>;
+  confirmPassword: FormControl<string>;
+}
+
+@Component({
+  selector: 'app-signup',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    FormFieldComponent,
+    FieldDirective,
+    ErrorMessageDirective,
+    FormDirective,
+    AsyncPipe,
+    HintMessageDirective,
+  ],
+  templateUrl: './signup.component.html',
+  styleUrl: './signup.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SignupComponent {
+  readonly submitForm = output<SignupPayload>();
+
+  form = new FormGroup<FormType>({
+    username: new FormControl('', {
+      validators: [Validators.required],
+      nonNullable: true,
+    }),
+    email: new FormControl('', {
+      validators: [Validators.required, Validators.email], // TODO add custom pattern instead of email
+      nonNullable: true,
+    }),
+    password: new FormControl('', {
+      validators: [Validators.required],
+      nonNullable: true,
+    }),
+    confirmPassword: new FormControl('', {
+      validators: [Validators.required, this.validatePasswordMatch()],
+      nonNullable: true,
+    }),
+  });
+
+  passwordLevels = ['weak', 'fair', 'good', 'strong', 'very strong'];
+  passwordStrength$ = this.form.controls.password.valueChanges.pipe(
+    map((password) => {
+      let strength = 0;
+
+      if (password.length >= 8) strength++;
+      if (/[A-Z]/.test(password)) strength++;
+      if (/[a-z]/.test(password)) strength++;
+      if (/\d/.test(password)) strength++;
+      if (/[\W_]/.test(password)) strength++;
+
+      return strength;
+    }),
+  );
+
+  submit(): void {
+    this.form.markAllAsTouched();
+
+    if (this.form.valid) {
+      this.submitForm.emit(this.form.value as SignupPayload);
+    }
+  }
+
+  validatePasswordMatch(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (!control.parent) {
+        return null;
+      }
+
+      const form = control.parent as FormGroup<FormType>;
+
+      const password = form.value.password;
+      const confirmPassword = form.value.confirmPassword;
+
+      return password === confirmPassword ? null : { passwordMismatch: true };
+    };
+  }
+}

src/app/core/layout/header/header.component.ts

@@ -1,11 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [RouterLink, NgOptimizedImage, RouterLinkActive],
   templateUrl: './header.component.html',
   styleUrl: './header.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/about/pages/about/about.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AboutComponent } from './about.component';
+import AboutComponent from './about.component';
 
 describe('AboutComponent', () => {
   let component: AboutComponent;

src/app/features/communities/pages/community-list/community-list.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CommunityListComponent } from './community-list.component';
+import CommunityListComponent from './community-list.component';
 
 describe('CommunityListComponent', () => {
   let component: CommunityListComponent;

src/app/features/events/pages/event-list/event-list.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { EventListComponent } from './event-list.component';
+import EventListComponent from './event-list.component';
 
 describe('EventListComponent', () => {
   let component: EventListComponent;

src/app/shared/components/form-field/form-field.component.css

@@ -7,7 +7,7 @@
 .label-container {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.3rem;
 }
 
 .label-text {
@@ -18,7 +18,9 @@
 .error-container {
   display: flex;
   flex-direction: column;
-  min-height: 2rem;
+  min-height: 1.25rem;
+  padding: 0.4rem;
+  line-height: 1rem;
 }
 
 .focused {
@@ -27,7 +29,7 @@
 }
 
 .field-input {
-  height: 2.5rem;
+  height: 2rem;
   border-width: 1px;
   border-style: solid;
   border-color: var(--neutral-color-300);
@@ -52,9 +54,3 @@
 .required {
   color: var(--error-color);
 }
-
-.error-message {
-  padding: 0.5rem;
-  color: var(--error-color);
-  line-height: 1rem;
-}

src/app/shared/components/form-field/form-field.component.html

@@ -2,15 +2,13 @@
   <label class="label-container">
     <span class="label-text">
       {{ label() }}
-      @if (isRequired()) {
+      @if (isRequired() && !isOptionalEnforced()) {
         <span class="required">*</span>
+      } @else if (!isRequired() && isOptionalEnforced()) {
+        <span class="optional">(Optional)</span>
       }
     </span>
-    <div
-      class="field-input"
-      [class.focused]="field().isFocus()"
-      [class.invalid]="control().touched && control().invalid"
-    >
+    <div class="field-input" [class.focused]="field().isFocus()">
       <ng-content select="input, textarea, select"></ng-content>
       <ng-content select="button"></ng-content>
       <div class="field-validation">
@@ -34,15 +32,20 @@
       </div>
     </div>
   </label>
-  <div class="error-container" aria-live="polite">
-    @if (control().touched && control().invalid) {
-      <!-- avoid displaying an error related to the control format if the field is empty -->
-      @if (!control().hasError("required")) {
-        <ng-content select="app-error-message"></ng-content>
-      }
-      @if (control().hasError("required")) {
-        <app-error-message>Required field</app-error-message>
+  <div class="error-container" aria-live="assertive">
+    @if (control().touched) {
+      @if (control().invalid) {
+        @if (!control().hasError("required")) {
+          <ng-content select="app-error-message"></ng-content>
+        }
+        @if (control().hasError("required")) {
+          <app-error-message>Required field</app-error-message>
+        }
       }
     }
+
+    @if (!control().hasError("required") && !extraErrorMessages().length) {
+      <ng-content select="app-hint-message"></ng-content>
+    }
   </div>
 </fieldset>

src/app/shared/components/form-field/form-field.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FormFieldComponent } from './form-field.component';
+import { FormDirective } from '../../directives/form.directive';
 
 describe('FormFieldComponent', () => {
   let component: FormFieldComponent;
@@ -9,6 +10,7 @@ describe('FormFieldComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [FormFieldComponent],
+      providers: [FormDirective],
     }).compileComponents();
 
     fixture = TestBed.createComponent(FormFieldComponent);