feat: add captcha component and register in main module

frontend/angular-clarity-master/src/app/modules/main/components/captcha/captcha.component.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'app-captcha',
+  template: `
+    <div class="clr-form-control" style="margin-top: 0;">
+      <label class="clr-control-label" *ngIf="label" style="font-weight: 500; margin-bottom: 4px;">{{ label }}</label>
+      <div class="clr-control-container">
+        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
+          <div style="background: #eef3f7; border: 1px dashed #0072a3; padding: 6px 14px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 18px; font-weight: bold; letter-spacing: 4px; color: #004d73; user-select: none;">
+            {{ captchaCode }}
+          </div>
+          <button type="button" class="btn btn-icon btn-sm btn-primary" (click)="generateCaptcha()" title="Refresh Captcha" style="margin: 0;">
+            <clr-icon shape="refresh"></clr-icon>
+          </button>
+        </div>
+        <input 
+          clrInput 
+          type="text" 
+          [(ngModel)]="enteredValue" 
+          (input)="onInput()" 
+          placeholder="Enter code shown above" 
+          class="clr-input" 
+          style="max-width: 220px;" 
+        />
+        <div *ngIf="enteredValue && !isValid" style="color: #c92100; font-size: 12px; margin-top: 4px;">
+          * Captcha code does not match.
+        </div>
+        <div *ngIf="enteredValue && isValid" style="color: #2e7d32; font-size: 12px; margin-top: 4px;">
+          ✓ Captcha verified
+        </div>
+      </div>
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CaptchaComponent),
+      multi: true
+    }
+  ]
+})
+export class CaptchaComponent implements OnInit, ControlValueAccessor {
+  @Input() label: string = 'Verification Code';
+
+  captchaCode: string = '';
+  enteredValue: string = '';
+  isValid: boolean = false;
+
+  private onChange: (val: any) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  ngOnInit(): void {
+    this.generateCaptcha();
+  }
+
+  generateCaptcha(): void {
+    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789';
+    let code = '';
+    for (let i = 0; i < 6; i++) {
+      code += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    this.captchaCode = code;
+    this.enteredValue = '';
+    this.isValid = false;
+    this.onChange('');
+  }
+
+  onInput(): void {
+    this.onTouched();
+    if (this.enteredValue && this.enteredValue.trim() === this.captchaCode) {
+      this.isValid = true;
+      this.onChange(this.enteredValue.trim());
+    } else {
+      this.isValid = false;
+      this.onChange('');
+    }
+  }
+
+  writeValue(value: any): void {
+    if (!value) {
+      this.enteredValue = '';
+      this.isValid = false;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+}
+

frontend/angular-clarity-master/src/app/modules/main/main.module.ts

@@ -41,6 +41,7 @@ import { UserRegistrationComponent } from '../main/admin/user-registration/user-
 
 import { QRCodeModule } from 'angularx-qrcode';
 import { BarcodeDirective } from './directives/barcode.directive';
+import { CaptchaComponent } from './components/captcha/captcha.component';
 import { TagInputModule } from 'ngx-chips';
 import { CookieService } from 'ngx-cookie-service';
 import { ImageCropperModule } from 'ngx-image-cropper';
@@ -123,6 +124,7 @@ import { DynamicFormViewerComponent } from './superadmin/dynamicform/dynamic-for
 @NgModule({
   declarations: [
     BarcodeDirective,
+    CaptchaComponent,
     MainPageComponent, PageNotFoundComponent, UserComponent, PasswordResetComponent,
        MyworkspaceComponent,
     ReportRunnerComponent, ReportrunnereditComponent, Reportrunneredit2Component, MenuGroupComponent, AllMenuGroupComponent, EditMenuGroupComponent, ReadOnlyMenuGroupComponent, UserRegistrationComponent,