login

Py-Detect.esproj.user

@@ -2,7 +2,12 @@
 <Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
     <DebuggerFlavor>LaunchJsonDebugger</DebuggerFlavor>
-    <LaunchJsonTarget>
-    </LaunchJsonTarget>
+    <LaunchJsonTarget>{
+  "name": "localhost (Chrome)",
+  "type": "chrome",
+  "request": "launch",
+  "url": "http://localhost:51272",
+  "webRoot": "E:\\Py-detect_wrk\\Py-detect"
+}</LaunchJsonTarget>
   </PropertyGroup>
 </Project>

obj/Debug/Py-Detect.esproj.FileListAbsolute.txt

@@ -1,2 +1,3 @@
 C:\Users\Admin\Desktop\Py-Detect\obj\Debug\Py-Detect.esproj.CoreCompileInputs.cache
 C:\Users\Admin\Desktop\deployment-pydetect\Py-detect\obj\Debug\Py-Detect.esproj.CoreCompileInputs.cache
+E:\Py-detect_wrk\Py-detect\obj\Debug\Py-Detect.esproj.CoreCompileInputs.cache

obj/Debug/package.g.props

@@ -19,15 +19,19 @@
     <PackageJsonDependenciesAngularPlatformBrowser Condition="$(PackageJsonDependenciesAngularPlatformBrowser) == ''">^16.1.0</PackageJsonDependenciesAngularPlatformBrowser>
     <PackageJsonDependenciesAngularPlatformBrowserDynamic Condition="$(PackageJsonDependenciesAngularPlatformBrowserDynamic) == ''">^16.1.0</PackageJsonDependenciesAngularPlatformBrowserDynamic>
     <PackageJsonDependenciesAngularRouter Condition="$(PackageJsonDependenciesAngularRouter) == ''">^16.1.0</PackageJsonDependenciesAngularRouter>
+    <PackageJsonDependenciesFileSaver Condition="$(PackageJsonDependenciesFileSaver) == ''">^2.0.5</PackageJsonDependenciesFileSaver>
     <PackageJsonDependenciesForce Condition="$(PackageJsonDependenciesForce) == ''">^0.0.3</PackageJsonDependenciesForce>
     <PackageJsonDependenciesJestEditorSupport Condition="$(PackageJsonDependenciesJestEditorSupport) == ''">*</PackageJsonDependenciesJestEditorSupport>
     <PackageJsonDependenciesRxjs Condition="$(PackageJsonDependenciesRxjs) == ''">~7.8.0</PackageJsonDependenciesRxjs>
     <PackageJsonDependenciesTslib Condition="$(PackageJsonDependenciesTslib) == ''">^2.3.0</PackageJsonDependenciesTslib>
+    <PackageJsonDependenciesXlsx Condition="$(PackageJsonDependenciesXlsx) == ''">^0.18.5</PackageJsonDependenciesXlsx>
     <PackageJsonDependenciesZoneJs Condition="$(PackageJsonDependenciesZoneJs) == ''">~0.13.0</PackageJsonDependenciesZoneJs>
     <PackageJsonDevdependenciesAngularDevkitBuildAngular Condition="$(PackageJsonDevdependenciesAngularDevkitBuildAngular) == ''">^16.1.0</PackageJsonDevdependenciesAngularDevkitBuildAngular>
     <PackageJsonDevdependenciesAngularCli Condition="$(PackageJsonDevdependenciesAngularCli) == ''">~16.1.0</PackageJsonDevdependenciesAngularCli>
     <PackageJsonDevdependenciesAngularCompilerCli Condition="$(PackageJsonDevdependenciesAngularCompilerCli) == ''">^16.1.0</PackageJsonDevdependenciesAngularCompilerCli>
+    <PackageJsonDevdependenciesTypesFileSaver Condition="$(PackageJsonDevdependenciesTypesFileSaver) == ''">^2.0.7</PackageJsonDevdependenciesTypesFileSaver>
     <PackageJsonDevdependenciesTypesJasmine Condition="$(PackageJsonDevdependenciesTypesJasmine) == ''">~4.3.0</PackageJsonDevdependenciesTypesJasmine>
+    <PackageJsonDevdependenciesTypesXlsx Condition="$(PackageJsonDevdependenciesTypesXlsx) == ''">^0.0.35</PackageJsonDevdependenciesTypesXlsx>
     <PackageJsonDevdependenciesAutoprefixer Condition="$(PackageJsonDevdependenciesAutoprefixer) == ''">^10.4.21</PackageJsonDevdependenciesAutoprefixer>
     <PackageJsonDevdependenciesJasmineCore Condition="$(PackageJsonDevdependenciesJasmineCore) == ''">~4.6.0</PackageJsonDevdependenciesJasmineCore>
     <PackageJsonDevdependenciesKarma Condition="$(PackageJsonDevdependenciesKarma) == ''">~6.4.0</PackageJsonDevdependenciesKarma>

package-lock.json

@@ -270,7 +270,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -429,7 +428,6 @@
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-16.2.12.tgz",
       "integrity": "sha512-MD0ElviEfAJY8qMOd6/jjSSvtqER2RDAi0lxe6EtUacC1DHCYkaPrKW4vLqY+tmZBg1yf+6n+uS77pXcHHcA3w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -604,7 +602,6 @@
       "version": "16.2.12",
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-16.2.12.tgz",
       "integrity": "sha512-B+WY/cT2VgEaz9HfJitBmgdk4I333XG/ybC98CMC4Wz8E49T8yzivmmxXB3OD6qvjcOB6ftuicl6WBqLbZNg2w==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -620,7 +617,6 @@
       "version": "16.2.12",
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-16.2.12.tgz",
       "integrity": "sha512-6SMXUgSVekGM7R6l1Z9rCtUGtlg58GFmgbpMCsGf+VXxP468Njw8rjT2YZkf5aEPxEuRpSHhDYjqz7n14cwCXQ==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -641,7 +637,6 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-16.2.12.tgz",
       "integrity": "sha512-pWSrr152562ujh6lsFZR8NfNc5Ljj+zSTQO44DsuB0tZjwEpnRcjJEgzuhGXr+CoiBf+jTSPZKemtSktDk5aaA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@babel/core": "7.23.2",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -756,7 +751,6 @@
       "version": "16.2.12",
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-16.2.12.tgz",
       "integrity": "sha512-GLLlDeke/NjroaLYOks0uyzFVo6HyLl7VOm0K1QpLXnYvW63W9Ql/T3yguRZa7tRkOAeFZ3jw+1wnBD4O8MoUA==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -772,7 +766,6 @@
       "version": "16.2.12",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-16.2.12.tgz",
       "integrity": "sha512-1Eao89hlBgLR3v8tU91vccn21BBKL06WWxl7zLpQmG6Hun+2jrThgOE4Pf3os4fkkbH4Apj0tWL2fNIWe/blbw==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -855,7 +848,6 @@
       "version": "16.2.12",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-16.2.12.tgz",
       "integrity": "sha512-NnH7ju1iirmVEsUq432DTm0nZBGQsBrU40M3ZeVHMQ2subnGiyUs3QyzDz8+VWLL/T5xTxWLt9BkDn65vgzlIQ==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -938,7 +930,6 @@
       "version": "7.22.9",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.9.tgz",
       "integrity": "sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.22.5",
@@ -5501,7 +5492,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5627,7 +5617,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -6181,7 +6170,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001737",
         "electron-to-chromium": "^1.5.211",
@@ -6453,7 +6441,6 @@
           "url": "https://paulmillr.com/funding/"
         }
       ],
-      "peer": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -9626,8 +9613,7 @@
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.6.1.tgz",
       "integrity": "sha512-VYz/BjjmC3klLJlLwA4Kw8ytk0zDSmbbDLNs794VnWmkcCB7I9aAL/D48VNQtmITyPvea2C3jdUMfc3kAoy0PQ==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/jest-diff": {
       "version": "30.1.2",
@@ -10551,7 +10537,6 @@
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.4.tgz",
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -10616,7 +10601,6 @@
       "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-5.1.0.tgz",
       "integrity": "sha512-i/zQLFrfEpRyQoJF9fsCdTMOF5c2dK7C7OmsuKg2D0YSsuZSfQDiLuaiktbuio6F2wiCsZSnSnieIQ0ant/uzQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "jasmine-core": "^4.1.0"
       },
@@ -10736,7 +10720,6 @@
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
       "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -12684,7 +12667,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -13630,7 +13612,6 @@
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -13687,7 +13668,6 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.1.tgz",
       "integrity": "sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -14858,7 +14838,6 @@
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -15084,7 +15063,6 @@
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.2.tgz",
       "integrity": "sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -15497,7 +15475,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
       "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -15751,7 +15728,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz",
       "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
@@ -15886,7 +15862,6 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
       "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
@@ -15961,7 +15936,6 @@
       "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
       "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -16108,7 +16082,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -16435,7 +16408,6 @@
       "version": "0.13.3",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.13.3.tgz",
       "integrity": "sha512-MKPbmZie6fASC/ps4dkmIhaT5eonHkEt6eAy80K42tAm0G2W+AahLJjbfi6X9NPdciOE9GRFTTM8u2IiF6O3ww==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       }

src.zip

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1eb45ebf23c16a409ed8f287fdfefe3435482492afdf4dcd2b6d1632174437f8
+size 34011524

src/app/app-routing.module.ts

@@ -38,6 +38,9 @@ const routes: Routes = [
     path: 'auth/signup', loadComponent: () =>
       import('./homepage/sign-up/sign-up.component').then(m => m.SignUpComponent)
   },
+  // Terms & Privacy
+  { path: 'legal/terms', loadComponent: () => import('./legal/terms.component').then(m => m.TermsComponent) },
+  { path: 'legal/privacy', loadComponent: () => import('./legal/privacy.component').then(m => m.PrivacyComponent) },
 
   { path: '**', redirectTo: '' }
 ];

src/app/app.component.css

@@ -0,0 +1,4 @@
+/* Placeholder styles for AppComponent to fix missing file error */
+:host {
+ display: block;
+}

src/app/homepage/auth-card/auth-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ContentChild, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -12,6 +12,10 @@ export class AuthCardComponent {
   @Input() isFlipped = false;
   @Output() flip = new EventEmitter<boolean>();
 
+  // Nullable TemplateRef properties for ngTemplateOutlet
+  @ContentChild('signInTemplate', { read: TemplateRef }) signInTemplate: TemplateRef<any> | null = null;
+  @ContentChild('signUpTemplate', { read: TemplateRef }) signUpTemplate: TemplateRef<any> | null = null;
+
   toggleFlip() {
     this.isFlipped = !this.isFlipped;
     this.flip.emit(this.isFlipped);

src/app/homepage/auth-wrapper.component.ts

@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
 import { trigger, state, style, animate, transition } from '@angular/animations';
+import { CommonModule } from '@angular/common';
+import { SignInComponent } from './sign-in/sign-in.component';
+import { SignUpComponent } from './sign-up/sign-up.component';
 
 @Component({
  selector: 'app-auth-wrapper',
+ standalone: true,
+ imports: [CommonModule, SignInComponent, SignUpComponent],
  template: `
  <div class="card-swipe-container" [@cardSwipe]="cardState">
  <app-sign-in

src/app/homepage/homepage.component.css

@@ -889,41 +889,67 @@ footer .social-icons .si.ig:hover { filter:brightness(1.15); color:#fff; box-sha
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: 25px;
+  gap: 30px;
 }
 
 .use-card {
   background: #fff;
   color: #000;
-  flex: 1 1 calc(20% - 20px); /* 5 cards in a row */
-  min-width: 220px;
+  flex: 11 calc(25% - 30px);
+  min-width: 260px;
   border-radius: 12px;
-  padding: 25px 20px;
+  padding: 28px 24px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   transition: transform 0.3s;
 }
 
-  .use-card:hover {
-    transform: translateY(-6px);
-  }
+/* Make the 5th card span entire row */
+.use-card:nth-child(5) {
+  flex: 11 100%;
+  min-width: 100%;
+  text-align: center;
+  padding: 36px 32px;
+}
 
-  .use-card .icon {
-    font-size: 40px;
-    margin-bottom: 15px;
-    color: #3328c6; /* red accent */
-  }
+.use-card:nth-child(5) .icon {
+  font-size: 46px;
+  color: #5a35d6;
+}
 
-  .use-card h3 {
-    font-size: 18px;
-    margin-bottom: 10px;
-    color: #3328c6;
-  }
+.use-card:nth-child(5) h3 {
+  font-size: 22px;
+  color: #5a35d6;
+  margin-top: 6px;
+}
 
-  .use-card p {
-    font-size: 16px;
-    line-height: 1.5;
-    color: #000;
-  }
+.use-card:nth-child(5) p {
+  max-width: 1100px;
+  margin: 10px auto 0;
+}
+
+/* Keep icon/title styling for first row */
+.use-card .icon {
+  font-size: 40px;
+  margin-bottom: 15px;
+  color: #3328c6;
+}
+
+.use-card h3 {
+  font-size: 18px;
+  margin-bottom: 10px;
+  color: #3328c6;
+}
+
+.use-card p {
+  font-size: 16px;
+  line-height: 1.5;
+  color: #000;
+}
+
+/* Hover lift */
+.use-card:hover {
+  transform: translateY(-6px);
+}
 
 .social-icons {
   display: flex;
@@ -1353,11 +1379,49 @@ footer .social-icons {
  color: #0d9de3;
 }
 
-@media (max-width:768px) {
- .how-it-works::before { height:320px; border-radius:18px; }
- .how-card { max-height:360px; }
+/* How It Works: blue background card and2x3 grid */
+.how-wrapper { position: relative; max-width:1200px; margin:0 auto; padding:12px 12px 24px; }
+.how-bg {
+ position:absolute; inset:0; margin:auto; border-radius:12px;
+ background: linear-gradient(135deg, #0b3a6b0%, #0d5aa8100%);
+ opacity:0.22; z-index:0; box-shadow:0 12px 40px rgba(0,0,0,.25);
+}
+.how-tiles { position:relative; z-index:1; display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
+.how-tile { background:#fff; color:#222; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.06); overflow:hidden; padding-bottom:6px; }
+.how-tile:hover { transform: translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.12); transition:transform .2s, box-shadow .2s; }
+.how-illustration {
+  background: linear-gradient(180deg,#fcf7ea,#3aa6d9);
+  height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.how-illustration i { font-size:62px; }
+.how-tile-title {
+  text-align: center;
+  margin: 14px 6px 0;
+  color: #3328c6;
+  font-weight: 800;
+}
+.how-divider { height:3px; width:72%; margin:8px auto 8px; border-bottom:2px dotted #f59e9e; }
+.how-tile p, .how-tile ul { padding:0 18px 12px; margin:0; color:#333; }
+.how-tile ul { padding-left:34px; }
+
+@media (max-width:1024px) { .how-tiles { grid-template-columns: repeat(2,1fr); } }
+@media (max-width:640px) { .how-tiles { grid-template-columns:1fr; } .how-illustration { height:130px; } }
+
+/* Blur homepage content when auth modal is open */
+:host-context(.modal-open) .homepage-root {
+ filter: blur(4px);
+ transition: filter 160ms ease;
 }
 
+/* Ensure modal backdrop stays transparent to show blurred homepage */
+.modal-backdrop {
+ background: rgba(0,0,0,0.2);
+}
+
+
 
 
 

src/app/homepage/homepage.component.html

@@ -1,3 +1,4 @@
+<div class="homepage-root">
 <!-- Modern UI header with logo and PyDetect title -->
 <div class="site-header">
  <div class="header-inner">
@@ -99,12 +100,12 @@
  <h2 class="section-title">OUR MISSION IS SIMPLE & IMPACTFUL</h2>
  <div class="mission-row">
  <div class="mission-left">
-   <p>
+ <p>
      Our mission is to help investigators, recruiters, and security professionals identify truth more confidently, reduce deception, and improve decision-making. We aim to support safer communities, fairer recruitment practices, and stronger organisational security.
    </p>
  </div>
  <div class="mission-right">
-   <p>
+ <p>
      Through advanced behavioural analysis—examining verbal responses, facial cues, and body language—the platform provides clear insight into consistency, credibility, and potential risks. This enables teams to act with accuracy, clarity, and confidence across a wide range of situations.
    </p>
  </div>
@@ -198,116 +199,83 @@
  </div>
 </section>
 
-<!-- How It Works Section (moved to main page) -->
-<section id="how-it-works" class="how-it-works how-expanded">
+<!-- How It Works Section (two-row tiles with blue background) -->
+<section id="how-it-works" class="how-it-works">
  <h2 class="section-title how-title">How It Works</h2>
- <div class="how-grid">
- <!-- Intro card -->
- <article class="how-card how-anim fade-in-up" role="article" aria-label="Intro">
- <h3 class="how-heading">Py-Detect – Intelligent Behaviour Analysis Platform</h3>
- <p class="how-text">
- Py-Detect is an advanced digital platform designed to support investigations through structured questioning and automated behavioural analysis. It studies voice, face, and body-language patterns, and produces a clear summary that helps investigators make informed decisions.
+ <div class="how-wrapper">
+ <div class="how-bg"></div>
+ <div class="how-tiles">
+ <!--1: Context-Aware Questioning (includes intro) -->
+ <div class="how-tile">
+ <div class="how-illustration"><i class="fas fa-comments"></i></div>
+ <h3 class="how-tile-title">Context‑Aware Questioning</h3>
+ <div class="how-divider"></div>
+ <p class="how-tile-text">
+ Py‑Detect reads case details and adapts follow‑up questions based on prior answers to keep the interview relevant and continuous.
  </p>
- </article>
-
- <!-- Context-Aware Questioning -->
- <article class="how-card how-anim fade-in-up" aria-label="Context-Aware Questioning">
- <h3 class="how-heading">1. Context-Aware Questioning</h3>
- <p class="how-text">The system generates questions by reading the case information entered by the admin. It adapts each follow-up question based on the accused person’s previous answers to maintain relevance and continuity.</p>
- </article>
+ </div>
 
- <!-- Voice Pattern Analysis -->
- <article class="how-card how-anim fade-in-up" aria-label="Voice Pattern Analysis">
- <h3 class="how-heading">2. Voice Pattern Analysis</h3>
- <ul class="how-list">
- <li>Tone variations</li>
- <li>Stress or pressure points</li>
- <li>Pace and hesitation</li>
+ <!--2: Voice Pattern Analysis -->
+ <div class="how-tile">
+ <div class="how-illustration"><i class="fas fa-microphone-alt"></i></div>
+ <h3 class="how-tile-title">Voice Pattern Analysis</h3>
+ <div class="how-divider"></div>
+ <ul>
+ <li>Tone variations, stress points</li>
+ <li>Speech pace, hesitations</li>
  <li>Sudden pitch changes</li>
  </ul>
- <p class="how-text">These cues help identify emotional states and potential inconsistency.</p>
- </article>
-
- <!-- Facial and Micro-Expression Tracking -->
- <article class="how-card how-anim fade-in-up" aria-label="Facial and Micro-Expression Tracking">
- <h3 class="how-heading">3. Facial and Micro-Expression Tracking</h3>
- <ul class="how-list">
- <li>Eye shifts</li>
- <li>Lip compression</li>
- <li>Brow tension</li>
- <li>Nervous micro-gestures</li>
+ <p class="how-tile-text">These cues help identify emotional states and potential inconsistencies.</p>
+ </div>
+
+ <!--3: Facial & Micro‑Expression Tracking -->
+ <div class="how-tile">
+ <div class="how-illustration"><i class="fas fa-user-secret"></i></div>
+ <h3 class="how-tile-title">Facial & Micro‑Expressions</h3>
+ <div class="how-divider"></div>
+ <ul>
+ <li>Eye shifts and gaze changes</li>
+ <li>Lip compression, brow tension</li>
+ <li>Nervous micro‑gestures</li>
  </ul>
- <p class="how-text">These signals contribute to behavioural interpretation.</p>
- </article>
-
- <!-- Body-Language Pattern Detection -->
- <article class="how-card how-anim fade-in-up" aria-label="Body-Language Pattern Detection">
- <h3 class="how-heading">4. Body-Language Pattern Detection</h3>
- <p class="how-text">Posture, hand movements, head position, and response timing are evaluated to understand engagement, confidence, and anxiety levels.</p>
- </article>
-
- <!-- Combined Insight Summary -->
- <article class="how-card how-anim fade-in-up" aria-label="Combined Insight Summary">
- <h3 class="how-heading">5. Combined Insight Summary</h3>
- <ul class="how-list">
- <li>Structured summary</li>
- <li>Behavioural indicators</li>
- <li>Stress markers</li>
- <li>Consistency score</li>
- <li>Potential risk highlights</li>
- </ul>
- <p class="how-text">It helps investigators review the entire interview at a glance.</p>
- </article>
+ <p class="how-tile-text">Signals that contribute to behavioural interpretation.</p>
+ </div>
 
- <!-- Who Can Use -->
- <article class="how-card how-anim fade-in-up" aria-label="Who Can Use">
- <h3 class="how-heading">Who Can Use Py-Detect?</h3>
- <ul class="how-list">
- <li>Law Enforcement &amp; Investigation Teams</li>
- <li>Legal Professionals</li>
- <li>HR and Corporate Security</li>
- <li>Private Investigation Agencies</li>
- <li>Educational or Counselling Teams</li>
- </ul>
- </article>
+ <!--4: Body‑Language Pattern Detection -->
+ <div class="how-tile">
+ <div class="how-illustration"><i class="fas fa-walking"></i></div>
+ <h3 class="how-tile-title">Body‑Language Detection</h3>
+ <div class="how-divider"></div>
+ <p class="how-tile-text">
+ Posture, hand movements, head position, and timing are evaluated to understand engagement, confidence, and anxiety levels.
+ </p>
+ </div>
 
- <!-- Why Choose -->
- <article class="how-card how-anim fade-in-up" aria-label="Why Choose">
- <h3 class="how-heading">Why Choose Py-Detect?</h3>
- <ul class="how-list">
- <li>Fast and Efficient</li>
- <li>Non-Invasive and Comfortable</li>
- <li>Reliable and Data-Driven</li>
- <li>Configurable for Different Scenarios</li>
- <li>Secure and Organised</li>
+ <!--5: Combined Insight Summary -->
+ <div class="how-tile">
+ <div class="how-illustration"><i class="fas fa-clipboard-check"></i></div>
+ <h3 class="how-tile-title">Combined Insight Summary</h3>
+ <div class="how-divider"></div>
+ <ul>
+ <li>Behavioural indicators and stress markers</li>
+ <li>Consistency score and highlights</li>
+ <li>Clear, structured summary for review</li>
  </ul>
- </article>
-
- <!-- End-to-End Workflow -->
- <article class="how-card how-anim fade-in-up" aria-label="End-to-End Workflow">
- <h3 class="how-heading">End-to-End Workflow</h3>
- <ol class="how-steps">
- <li>Admin creates a case.</li>
- <li>Investigator receives assigned cases.</li>
- <li>Interview recorded (voice and video).</li>
- <li>AI analyses behaviour and cues.</li>
- <li>Final summary with indicators and scores.</li>
- <li>Dashboards for review.</li>
- </ol>
- </article>
+ </div>
 
- <!-- Key Features -->
- <article class="how-card how-anim fade-in-up" aria-label="Key Features">
- <h3 class="how-heading">Key Features</h3>
- <ul class="how-list">
- <li>Case Management</li>
- <li>Automated Question Generation</li>
- <li>Voice, Video, and Behaviour Analysis</li>
- <li>Truth Probability Score</li>
- <li>Investigator Panel</li>
- <li>Admin Panel</li>
+ <!--6: Workflow, Who, Why & Key Features (condensed) -->
+ <div class="how-tile">
+ <div class="how-illustration"><i class="fas fa-project-diagram"></i></div>
+ <h3 class="how-tile-title">Workflow • Users • Benefits</h3>
+ <div class="how-divider"></div>
+ <ul>
+ <li><strong>Workflow:</strong> Admin creates case → Investigator records interview → AI analyses → Summary & dashboards.</li>
+ <li><strong>Who:</strong> Law Enforcement, Legal, HR/Security, Private Investigation, Education/Counselling.</li>
+ <li><strong>Why:</strong> Fast, non‑invasive, reliable, configurable, secure.</li>
+ <li><strong>Key Features:</strong> Case Management, Auto Questioning, Voice/Video/Behaviour Analysis, Truth Score, Admin & Investigator Panels.</li>
  </ul>
- </article>
+ </div>
+ </div>
  </div>
 </section>
 
@@ -378,6 +346,7 @@
  </a>
  </div>
 </footer>
+</div>
 
 <!-- ===== Auth Modals (unchanged) ===== -->
 <div class="modal-backdrop" *ngIf="showSignIn || showSignUp" (click)="closeModal()"></div>

src/app/homepage/homepage.component.ts

@@ -53,9 +53,9 @@ export class HomepageComponent implements OnInit, OnDestroy {
   }
 
   // === Auth modal open/close (same as your last version in the template) ===
-  openSignIn() { this.showSignIn = true; this.showSignUp = false; }
-  openSignUp() { this.showSignUp = true; this.showSignIn = false; }
-  closeModal() { this.showSignIn = this.showSignUp = false; }
+  openSignIn() { this.showSignIn = true; this.showSignUp = false; document.body.classList.add('modal-open'); }
+  openSignUp() { this.showSignUp = true; this.showSignIn = false; document.body.classList.add('modal-open'); }
+  closeModal() { this.showSignIn = this.showSignUp = false; document.body.classList.remove('modal-open'); }
 
   // If your <app-sign-in> emits signInSuccess, keep the same handler
   handleSignInSuccess() {

src/app/homepage/sign-in/sign-in.component.css

@@ -1,18 +1,21 @@
 /* root colors and variables remain unchanged */
 
 .signin-popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  background: rgb(30 41 59 / 67%);
-  backdrop-filter: blur(16px);
+ position: fixed;
+ top:0;
+ left:0;
+ width:100vw;
+ height:100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index:1000;
+ /* Use a reliable semi-transparent overlay instead of backdrop-filter */
+ background: rgba(30,41,59,0.35); /* softly dim the homepage */
+ /* Remove flaky backdrop filters */
+ -webkit-backdrop-filter: none;
+ backdrop-filter: none;
 }
 
 /* Ensure no solid white background is set anywhere */
@@ -86,9 +89,15 @@
 form {
   width: 100%;
 }
+/* Narrower form and consistent spacing */
+.signin-form {
+  width: 86%;
+  max-width: 420px;
+  margin: 0 auto;
+}
 .signin-row {
   display: flex;
-  gap: 24px;
+  gap: 22px;
   margin-bottom: 18px;
 }
 .signin-field {
@@ -96,29 +105,70 @@ form {
   display: flex;
   flex-direction: column;
 }
+/* New wrapper so input and eye toggle stay aligned */
+.password-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+.password-wrapper input {
+ flex:1;
+}
+/* Position the eye toggle only within sign-in password wrapper */
+.signin-popup .password-wrapper .eye-toggle {
+ position: absolute;
+ right:10px;
+ top:46%;
+ transform: translateY(-50%);
+ background: rgba(255,255,255,0.06);
+ border: none;
+ width:24px;
+ height:24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius:6px;
+ cursor: pointer;
+ color: inherit;
+}
+
+/* Slightly larger icon in sign-in */
+.signin-popup .password-wrapper .eye-toggle i { font-size:0.85rem; }
+
 .signin-field label {
-  color: #fff;
+  color: #e6f7f9; /* slightly darker than pure white for better contrast */
   font-weight: 600;
-  margin-bottom: 6px;
+  margin-bottom: 10px;
   font-size: 1rem;
   letter-spacing: 0.5px;
 }
-.signin-field input {
+/* Inputs: use consistent 8px radius */
+.signin-field input,
+.forgot-modal input[type="email"],
+.forgot-modal .otp-modal input[type="text"],
+.panel-left .signin-field input,
+.panel-left .signin-field select {
   background: #fff;
   color: #18314a;
   border: none;
-  border-radius: 8px;
-  padding: 12px 14px;
+  border-radius: 8px; /* updated to 8px for consistency */
+  padding: 14px 16px;
   font-size: 1rem;
-  margin-bottom: 2px;
-  box-shadow: 0 1px 4px #0002;
+  margin-bottom: 8px;
+  box-shadow: 0 1px 6px #0002;
   transition: border 0.2s, box-shadow 0.2s;
 }
-.signin-field input:focus {
+
+.signin-field input:focus,
+.forgot-modal input[type="email"]:focus,
+.forgot-modal .otp-modal input[type="text"]:focus,
+.panel-left .signin-field input:focus,
+.panel-left .signin-field select:focus {
   outline: 2px solid #1de9b6;
   border-color: #1de9b6;
   box-shadow: 0 0 0 2px #1de9b688;
 }
+
 .signin-field input::placeholder {
   color: #b0b8c1;
   opacity: 1;
@@ -126,28 +176,34 @@ form {
 .signin-field small.error {
   color: #ff5252;
   font-size: 0.85rem;
-  margin-top: 2px;
+  margin-top: 6px;
   text-shadow: 0 1px 2px #0008;
 }
 .signin-options-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
-  margin-top: -8px;
+  margin-bottom: 28px;
+  margin-top: -4px;
 }
 .remember-me {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   font-size: 1rem;
-  color: #b0b8c1;
+  color: #e6f7f9;
+}
+.remember-me input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--primary-accent, #14263c);
+  cursor: pointer;
+}
+.remember-me label {
+  cursor: pointer;
+  color: #e6f7f9;
+  user-select: none;
 }
-  .remember-me input[type="checkbox"] {
-    accent-color: #38bdf8;
-    width: 16px;
-    height: 16px;
-  }
 .forgot-password {
   font-size: 1rem;
 }
@@ -158,21 +214,21 @@ form {
   cursor: pointer;
 }
 .signin-btn {
-  width:100%;
+  width: 100%;
   background: #18314a;
   color: #fff;
   border: none;
-  border-radius: 8px;
+  border-radius: 10px;
   padding: 14px 0;
-  font-size: 1.1rem;
+  font-size: 1.05rem;
   font-weight: 700;
   margin-bottom: 18px;
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
 }
-  .signin-btn:hover {
-    background: #38bdf8;
-  }
+.signin-btn:hover {
+  background: #38bdf8;
+}
 .signin-footer {
   color: #b0b8c1;
   font-size: 0.95rem;
@@ -183,13 +239,13 @@ form {
   display: block;
   height: 16px;
 }
-  .signin-footer a {
-    color: #38bdf8;
-    text-decoration: underline;
-    margin-left: 4px;
-    font-weight: 600;
-    cursor: pointer;
-  }
+.signin-footer a {
+  color: #38bdf8;
+  text-decoration: underline;
+  margin-left: 4px;
+  font-weight: 600;
+  cursor: pointer;
+}
 .signin-close {
   position: absolute;
   top: 18px;
@@ -210,10 +266,10 @@ form {
   transition: background 0.2s, color 0.2s;
   box-shadow: 0 2px 8px #0005;
 }
-  .signin-close:hover {
-    background: #38bdf8;
-    color: #18314a;
-  }
+.signin-close:hover {
+  background: #38bdf8;
+  color: #18314a;
+}
 
 @media (max-width: 700px) {
   .signin-box {
@@ -231,7 +287,10 @@ form {
   }
   .signin-row {
     flex-direction: column;
-    gap: 0;
+    gap: 10px;
+  }
+  .signin-form {
+    width: 92%;
   }
 }
 .ai-particle-bg {
@@ -246,7 +305,7 @@ form {
 @keyframes particleDrift {
   0% { background-position: 0 0; }
   100% { background-position: 120px 80px; }
-}
+  }
 .spinner {
   display: inline-block;
   width: 18px;
@@ -256,7 +315,7 @@ form {
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
   vertical-align: middle;
-  margin-right: 8px;
+  margin-right: 10px;
 }
 
 @keyframes spin {
@@ -299,7 +358,7 @@ form {
   font-weight: 600;
 }
 .signin-welcome {
-  color: #38bdf8;
+  color: #fff;
   font-size: 1.05em;
   text-align: center;
   margin-bottom: 18px;
@@ -400,130 +459,171 @@ form {
   to { opacity: 1; }
 }
 .forgot-modal {
-  background: #fff;
-  border-radius: 18px;
-  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
-  padding: 32px 36px 28px 36px;
-  min-width: 320px;
-  max-width: 90vw;
-  text-align: center;
-  z-index: 2001;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  animation: fadeInModal 0.4s;
-}
-@keyframes fadeInModal {
-  from { opacity: 0; transform: scale(0.98); }
-  to { opacity: 1; transform: scale(1); }
-}
-.forgot-modal h3 {
-  color: #38bdf8;
-  margin: 12px 0 8px 0;
-  font-size: 1.4em;
-  font-weight: 700;
-}
-.forgot-modal p {
-  color: #23272b;
-  font-size: 1.08em;
-  margin-bottom: 18px;
+  background: #18314a;
+  padding: 20px;
+  border-radius: 12px;
+  color: #fff;
+  width: 360px;
+  max-width: 92vw;
+  box-shadow: 0 8px 32px #0008;
 }
 .forgot-modal input[type="email"] {
-  background: #f4f6fa;
-  color: #18314a;
-  border: none;
+  width: 100%;
+  padding: 10px 0px;
   border-radius: 8px;
-  padding: 12px 14px;
-  font-size: 1rem;
+  border: none;
   margin-bottom: 12px;
-  box-shadow: 0 1px 4px #0002;
-  width: 100%;
 }
-.modal-close {
-  width: 23%;
-  background: #18314a;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 14px 0;
-  font-size: 1.1rem;
-  font-weight: 700;
-  margin-bottom: 0;
-  cursor: pointer;
-  transition: background 0.2s, color 0.2s;
-  display: block;
+  .forgot-modal .modal-close {
+    display: block;
+    margin: 12px auto 0 auto; /* center horizontally under the primary button */
+    background: #00000070;
+    color: #e6f7f9;
+    border: 1px solid rgba(255,255,255,0.08);
+    padding: 10px 14px;
+    border-radius: 8px;
+    font-size: 1.2rem;
+  }
+.forgot-modal .modal-close:hover {
+ background: #38bdf8;
+ color: #18314a;
 }
 
-  .modal-close:hover {
-    background: #38bdf8;
-    color: #18314a;
-  }
-.google-signin-row {
-  width: 100%;
+/* Forgot modal send button: prominent background and border */
+.forgot-modal .send-reset-btn {
+ display: inline-block;
+ width:100%;
+ background: #38bdf8; /* bright cyan */
+ color: #18314a; /* dark text for contrast */
+ border:2px solid #0b57a4; /* darker blue border */
+ padding:12px 14px;
+ border-radius:8px;
+ font-weight:700;
+ cursor: pointer;
+ box-shadow:0 6px 18px rgba(3,20,36,0.12);
+ transition: background 0.18s ease, transform 0.12s ease;
+}
+.forgot-modal .send-reset-btn:hover {
+ background: #1dc4ff;
+ transform: translateY(-1px);
+}
+
+/* OTP modal centered over entire page with blurred backdrop */
+.otp-modal-bg {
+ position: fixed; /* full viewport */
+ inset:0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: auto; /* capture clicks on backdrop */
+ z-index:3000; /* above other modals */
+ background: rgba(2,6,23,0.45); /* dark translucent */
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+}
+
+.otp-modal {
+ pointer-events: auto;
+ background: #18314a;
+ padding:20px 22px;
+ border-radius:12px;
+ width:360px;
+ max-width:86vw;
+ box-shadow:0 8px 28px rgba(0,0,0,0.45);
+ color: #fff;
+}
+.forgot-modal .otp-modal input[type="text"] {
+ width:100%;
+ padding:10px 12px;
+ border-radius:8px;
+ border: none;
+ margin-top:8px;
+}
+.forgot-modal .otp-modal .modal-close {
+ background: transparent;
+ color: #fff;
+ border:1px solid rgba(255,255,255,0.06);
+ padding:8px 12px;
+ border-radius:8px;
+}
+.autologin-checkbox {
   display: flex;
-  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  color: #b0b8c1;
+  font-size: 0.9rem;
   margin-bottom: 12px;
 }
-#google-btn-div {
-  width: 100%;
-  display: flex;
-  justify-content: center;
+.autologin-checkbox input {
+  accent-color: #38bdf8;
+  transform: scale(1.2);
 }
-#google-btn-div > div {
-  width: 100%;
-  min-width: 0;
-  border-radius: 8px !important;
-  padding: 14px 0 !important;
-  font-size: 1.1rem !important;
-  font-weight: 700 !important;
-  box-shadow: 0 2px 8px #0003 !important;
-  background: #fff !important;
-  color: #18314a !important;
-  border: none !important;
-  margin: 0 !important;
+.auto-login-desc {
+  color: #e6f7f9;
+  font-size: 0.9rem;
+  margin-left: 4px;
+}
+
+/* Ensure otp modal sits centered relative to auth-card */
+.auth-card { position: relative; }
+
+/* keep existing forgot-modal-bg style for full-screen modals */
+.forgot-modal-bg { position: fixed; inset:0; background: rgba(30,41,59,0.9); z-index:2000; }
+
+/* Security indicator styles */
+.lock-icon-inline {
+  color: #38bdf8;
+  margin-right: 8px;
+  font-size: 1rem;
+  vertical-align: middle;
+}
+.security-row .security-info {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
+  color: #b0c7d4;
+  font-size: 0.95rem;
 }
-.g-signin2 {
+.security-text {
+  /* Brighter color for better contrast on dark background */
+  color: #23395d;
+  font-weight: 600;
+}
+/* Make Need help line match and be more visible */
+.signin-help {
+  color: #23395d;
+  font-weight: 600;
+  margin-right: 74px;
+}
+.signin-help a {
+  color: #e6f7f9;
+  text-decoration: underline;
+  margin-left: 6px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* Google button */
+.google-btn {
   width: 100%;
-  min-width: 0;
-  border-radius: 8px !important;
-  padding: 14px 0 !important;
-  font-size: 1.1rem !important;
-  font-weight: 700 !important;
-  box-shadow: 0 2px 8px #0003 !important;
-  background: #fff !important;
-  color: #18314a !important;
-  border: none !important;
-  margin: 0 !important;
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.eye-toggle {
-  position: absolute;
-  right: 12px;
-  top: 38px;
-  background: none;
+  gap: 10px;
+  background: #0f1724;
+  color: #fff;
+  border-radius: 10px;
+  padding: 12px 14px;
+  box-shadow: 0 6px 0 rgba(0,0,0,0.12);
   border: none;
-  font-size: 1.3em;
-  color: #888;
-  cursor: pointer;
-  z-index: 2;
-  padding: 0;
-  line-height: 1;
-  opacity: 0.7;
-  transition: color 0.2s, opacity 0.2s;
-}
-.eye-toggle:hover {
-  color: #555;
-  opacity: 1;
 }
-.eye-toggle:focus {
-  outline: none;
+.google-logo { width: 18px; height: 18px; }
+
+/* small responsive tweaks */
+@media (max-width: 480px) {
+  .security-row .security-info { flex-direction: column; align-items: flex-start; gap: 6px; }
 }
+
 /* --- UI DESIGN UPDATE TO MATCH SCREENSHOT --- */
 .auth-box {
   display: grid;
@@ -685,7 +785,7 @@ form {
 .auth-box {
   display: grid;
   grid-template-columns: 360px 840px; /* reduced right panel from 600px to 520px */
-  width: 850px; /* adjusted total width to match columns */
+  width: 850px; /* adjusted to match columns */
   height: 820px;
   max-width: 98vw;
   min-width: 340px;
@@ -695,9 +795,9 @@ form {
   background: none;
   position: relative;
   box-sizing: border-box;
-  justify-content:end;
-  align-items:baseline;
-  justify-items:start;
+  justify-content: end;
+  align-items: baseline;
+  justify-items: start;
 }
 
 /* Ensure panels occupy full height and use box-sizing */
@@ -764,7 +864,7 @@ form {
   flex-direction: row-reverse;
 }
 .side-panel { width: 48%; display:flex; align-items:center; justify-content:center; }
-.main-panel { width: 55%; padding: 36px 48px; box-sizing:border-box; background:#fff; overflow: visible; }
+.main-panel { width: 60%; padding: 1px 1px; box-sizing:border-box; background:#fff; overflow: visible; }
 
 .side-right {
   background: linear-gradient(135deg,#137ec4 0%,#137ec4 100%);
@@ -777,7 +877,6 @@ form {
 .side-text { opacity: 0.95; }
 .panel-cta { background:none; border:2px solid #fff; color:#fff; padding:10px 22px; border-radius:999px; cursor:pointer; margin-top:12px; }
 
-/* Ensure sign-in text colors for white main panel */
 .card-front .main-panel .signin-title { color: #222; }
 .card-back .main-panel .signup-title { color: #222; }
 
@@ -789,7 +888,27 @@ form {
   .side-panel{ width:100%; height:200px; }
   .main-panel{ width:100%; overflow: visible; }
 }
+/* Page-specific eye-toggle for sign-in: scoped to .signin-field to override shared component defaults */
+.signin-field .eye-toggle {
+ position: absolute;
+ right:8px;
+ top:66%;
+ transform: translateY(-50%);
+ background: rgba(255,255,255,0.06);
+ border: none;
+ width:20px;
+ height:20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius:6px;
+ cursor: pointer;
+ color: inherit;
+ z-index:0; /* ensure modals and popups sit above */
+}
 
+/* Slightly larger icon inside sign-in toggle for clarity */
+.signin-field .eye-toggle i { font-size:0.85rem; }
 /* keep existing control styles unchanged (inputs/buttons/etc.) */
 
 /* minimal overwrite of previous rules that used absolute positioning */
@@ -813,6 +932,7 @@ form {
   width: 88%;
   padding: 0 32px;
   z-index: 2;
+  color: #fff;
   text-align: left;
 }
 .side-info-title {
@@ -883,19 +1003,19 @@ form {
  align-items: center;
  justify-content: center;
  width:100%;
- margin:12px 018px 0;
+ margin:12px 0 18px 0;
 }
 .divider {
  flex:1;
  height:1px;
  background: #b0b8c1;
- margin:08px;
+ margin:0 8px;
 }
 .divider-or {
  color: #23395d;
  font-size:1.08em;
  font-weight:600;
- margin:08px;
+ margin:0 8px;
 }
 .google-btn {
   width: 100%;
@@ -909,16 +1029,16 @@ form {
   font-weight: 700;
   margin-bottom: 18px;
   cursor: pointer;
-  box-shadow: 02px 8px #0003;
+  box-shadow: 0 2px 8px #0003;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   transition: background 0.2s, color 0.2s;
 }
-  .google-btn:hover {
-    background: #38bdf8;
-  }
+.google-btn:hover {
+  background: #38bdf8;
+}
 .google-logo {
  width:24px;
  height:24px;
@@ -932,7 +1052,7 @@ form {
  text-align: left;
  transition: opacity 0.6s;
  letter-spacing:0.5px;
- animation: fadeFact0.6s;
+ animation: fadeFact 0.6s;
 }
 @keyframes fadeFact {
  from { opacity:0; }
@@ -949,225 +1069,194 @@ form {
  top:0; left:0;
  width:100%; height:100%;
  object-fit: cover;
- z-index:0;
- opacity:0.12;
+ z-index:1;
+ opacity:100;
 }
-.side-bg-shapes {
+
+/* Sign-in: ensure left-side welcome overlay sits above the left image and is styled like sign-up */
+.side-panel.side-left .side-img {
+ z-index:0 !important; /* image underlay */
  position: absolute;
- top:0; left:0; right:0; bottom:0;
+ top:0;
+ left:0;
  width:100%;
  height:100%;
- z-index:1;
- pointer-events: none;
-}
-.bg-circle {
- position: absolute;
- border-radius:50%;
- opacity:0.85;
-}
-.circle1 {
-  width: 120px;
-  height: 120px;
-  top: 18px;
-  left: 18px;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-}
-.circle2 {
-  width: 80px;
-  height: 80px;
-  top: 71%;
-  left: 113px;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-}
-
-.circle3 {
-  width: 48px;
-  height: 48px;
-  top: 80%;
-  left: 70%;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-}
-
-.circle4 {
-  width: 160px;
-  height: 160px;
-  top: 70px;
-  right: 204px;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-  opacity: 0.7;
+ object-fit: cover;
+ opacity:0.98;
 }
 
-.circle5 {
-  width: 36px;
-  height: 36px;
-  top: 30%;
-  left: 80%;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-  opacity: 0.6;
+.side-panel.side-left .side-welcome-overlay,
+.side-panel.side-left .side-info-box {
+ position: relative !important;
+ z-index:12 !important; /* bring overlay above image */
+ max-width:78% !important;
+ 
+ padding:18px 20px !important;
+ border-radius:10px !important;
+ 
+ color: #ffffff !important;
+ 
 }
 
-.circle6 {
-  width: 60px;
-  height: 60px;
-  bottom: 12%;
-  right: 18%;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-  opacity: 0.5;
+.side-panel.side-left .side-welcome-overlay .welcome-back-title,
+.side-panel.side-left .side-info-box .side-info-title,
+.side-panel.side-left .welcome-back-title {
+ font-size:1.6rem !important;
+ font-weight:800 !important;
+ margin:0 0 8px 0 !important;
+ line-height:1.05 !important;
+ color: #ffffff !important;
 }
 
-.circle7 {
-  width: 54px;
-  height: 54px;
-  top: 10%;
-  right: 10%;
-  background: #18314a;
-  opacity: 0.8;
+.side-panel.side-left .side-welcome-overlay .welcome-back-desc,
+.side-panel.side-left .side-info-box .side-info-desc,
+.side-panel.side-left .welcome-back-desc {
+ font-size:1rem !important;
+ line-height:1.6 !important;
+ margin:0 0 12px 0 !important;
+ color: rgba(255,255,255,0.95) !important;
 }
 
-.circle8 {
-  width: 32px;
-  height: 32px;
-  bottom: 20%;
-  left: 60%;
-  background: #14263c;
-  opacity: 0.8;
+  .side-panel.side-left .side-welcome-overlay .action-btn,
+  .side-panel.side-left .side-info-box .action-btn {
+    display: inline-block !important;
+    background: #010207 !important;
+    color: #ffffff !important;
+    border: 1px solid rgba(255, 255, 255, 0.92) !important;
+    padding: 8px 14px !important;
+    border-radius: 10px !important;
+    font-weight: 700 !important;
+    cursor: pointer !important;
+    margin-top: 300px !important;
+    margin-left: 25px;
+    width: 293px;
+    height: 58px;
+    font-size: 2.28rem;
+  }
+.side-panel.side-left .side-welcome-overlay .action-btn:hover,
+.side-panel.side-left .side-info-box .action-btn:hover {
+ background: rgba(255,255,255,0.08) !important;
 }
 
-.circle9 {
-  width: 44px;
-  height: 44px;
-  top: 75%;
-  left: 40%;
-  background: #18314a;
-  opacity: 0.7;
+.side-panel.side-left .side-welcome-overlay a,
+.side-panel.side-left .side-info-box a {
+ color: #ffffff !important;
+ text-decoration: underline !important;
+ font-weight:700 !important;
 }
 
-.circle10 {
-  width: 28px;
-  height: 28px;
-  top: 15%;
-  left: 60%;
-  background: #14263c;
-  opacity: 0.9;
+@media (max-width:900px) {
+ .side-panel.side-left .side-welcome-overlay,
+ .side-panel.side-left .side-info-box { max-width:92% !important; padding:12px !important; }
+ .side-panel.side-left .side-welcome-overlay .welcome-back-title { font-size:1.25rem !important; }
+ .side-panel.side-left .side-welcome-overlay .welcome-back-desc { font-size:0.98rem !important; }
+ .side-panel.side-left .side-welcome-overlay .action-btn { padding:8px 12px !important; }
 }
 
-.circle11 {
-  width: 38px;
-  height: 38px;
-  bottom: 10%;
-  right: 10%;
-  background: #18314a;
-  opacity: 0.7;
+/* Sign-up: style side-info-box like sign-in overlay */
+.side-panel.side-right .side-info-box,
+.side-panel.side-right .side-welcome-overlay,
+.welcome-info-box {
+  position: relative !important;
+  z-index: 12 !important; /* bring overlay above image */
+  max-width: 78% !important;
+  
+  padding: 18px 20px !important;
+  border-radius: 10px !important;
+  ;
+  color: #ffffff !important;
+  
 }
 
-.circle12 {
-  width: 22px;
-  height: 22px;
-  top: 85%;
-  right: 20%;
-  background: #14263c;
-  opacity: 0.8;
-}
+  .side-panel.side-right .side-info-box .side-info-title,
+  .welcome-info-box .welcome-info-title {
+    font-size: 1.6rem !important;
+    font-weight: 800 !important;
+    margin: 0 0 8px 0 !important;
+    line-height: 1.05 !important;
+    color: #ffffff !important;
+  }
 
-/* New large solid circles for sign-in page background */
-.circle-large1 {
- width:220px;
- height:220px;
- top:40px;
- left:60px;
- background: #137ec4;
- opacity:0.45;
- z-index:0;
-}
-.circle-large2 {
- width:180px;
- height:180px;
- bottom:40px;
- right:40px;
- background: #38bdf8;
- opacity:0.35;
- z-index:0;
-}
-.circle-large3 {
- width:140px;
- height:140px;
- top:60%;
- left:60%;
- background: #18314a;
- opacity:0.25;
- z-index:0;
-}
-.circle-large4 {
- width:100px;
- height:100px;
- bottom:11%;
- left:5%;
- background: #13bfa6;
- opacity:0.52;
- z-index:0;
-}
+  .side-panel.side-right .side-info-box .side-info-desc,
+  .welcome-info-box .welcome-info-desc {
+    font-size: 1rem !important;
+    line-height: 1.6 !important;
+    margin: 0 0 12px 0 !important;
+    color: rgba(255,255,255,0.95) !important;
+  }
 
-/* Add more white rings for contrast */
-.bg-ring {
- position: absolute;
- border-radius:50%;
- border:6px solid #fff;
- background: none;
- opacity:0.8;
- z-index:1;
-}
-.ring1 { width:90px; height:90px; bottom:24px; left:18px; }
-.ring2 { width:48px; height:48px; top:60px; right:32px; }
-.ring3 { width:72px; height:72px; top:10%; left:70%; border-color: #fff; opacity:0.7; }
-.ring4 { width:110px; height:110px; bottom:2%; right:43%; border-color: #fff; opacity:0.5; }
-.ring5 { width:38px; height:38px; top:75%; left:10%; border-color: #fff; opacity:0.8; }
-.ring6 { width:64px; height:64px; top:49%; right:20%; border-color: #fff; opacity:0.7; }
-.ring7 { width:120px; height:120px; top:14%; left:49%; border-color: #fff; opacity:0.6; }
-.ring8 { width:80px; height:80px; bottom:20%; right:30%; border-color: #fff; opacity:0.7; }
-.ring9 { width:60px; height:60px; top:65%; left:36%; border-color: #fff; opacity:0.7; }
+  .side-panel.side-right .side-info-box .action-btn,
+  .welcome-info-box .action-btn,
+  .side-panel.side-right .side-info-box .panel-cta {
+    display: inline-block !important;
+    background: #010207 !important;
+    color: #fff !important;
+    border: 1px solid rgba(255, 255, 255, 0.92) !important;
+    padding: 8px 14px !important;
+    border-radius: 10px !important;
+    font-weight: 700 !important;
+    cursor: pointer !important;
+    margin-bottom: 25px !important;
+    margin-left: 50px;
+    width: 293px;
+    height: 58px;
+    font-size: 2.28rem;
+  }
 
-.side-welcome-overlay {
- position: absolute;
- top:30%;
- left:50px;
- width:93%;
- text-align: start;
- z-index:2;
- padding:024px;
- pointer-events: auto;
-}
-.welcome-back-title {
- font-size:2.1rem;
- font-weight:800;
- color: #fff;
- margin-bottom:8px;
- 
-}
-.welcome-back-desc {
- font-size:1rem;
- color: #e0f7fa;
- margin-bottom:18px;
+    .side-panel.side-right .side-info-box .action-btn:hover,
+    .welcome-info-box .action-btn:hover,
+    .side-panel.side-right .side-info-box .panel-cta:hover {
+      background: rgba(255,255,255,0.08) !important;
+    }
 
+  .side-panel.side-right .side-info-box a,
+  .welcome-info-box a {
+    color: #ffffff !important;
+    text-decoration: underline !important;
+    font-weight: 700 !important;
+  }
+.welcome-back-title.welcome-line-1 {
+  font-size: 1.6rem !important;
+  font-weight: 800 !important;
+  margin: 0 0 8px 0 !important;
+  line-height: 1.05 !important;
+  color: #ffffff !important;
+}
+.forgot-modal-bg { /* existing styles assumed */ }
+/* Support modal uses same styling as forgot password */
+.forgot-modal h3 { margin-top:0; }
+.support-modal-bg {
+ position: fixed;
+ inset:0;
+ background: rgba(2,6,23,0.55);
+ z-index:2200;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ animation: fadeInModalBg0.4s;
+ backdrop-filter: blur(6px);
 }
-.action-btn {
- width:21%;
- background: #18314a;
- color: #fff;
- border: none;
- border-radius:8px;
- padding:14px 0;
- font-size:1.1rem;
- font-weight:700;
- margin-top:18px;
- margin-bottom:0;
+.support-modal {
+  background: #0f1724;
+  padding: 27px 47px;
+  border-radius: 12px;
+  color: #e6f7f9;
+  width: 486px;
+  max-width: 92vw;
+  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
+  margin-right: 1090px;
+}
+.support-modal h3 { margin-top:0; color:#38bdf8; }
+.support-modal a { color:#38bdf8; text-decoration: underline; }
+.support-modal-close {
  display: inline-block;
- letter-spacing:0.5px;
- box-shadow:02px 8px #0003;
- cursor: pointer;
- transition: background 0.2s, color 0.2s;
-}
-.action-btn:hover {
- background: #38bdf8;
- color: #18314a;
+ margin-top:12px;
+ background: transparent;
+ color: #e6f7f9;
+ border:1px solid rgba(255,255,255,0.12);
+ padding:8px 12px;
+ border-radius:8px;
+ font-size:1rem;
 }
+.support-modal-close:hover { background: rgba(255,255,255,0.08); color:#fff; }
 

src/app/homepage/sign-in/sign-in.component.html

@@ -1,7 +1,6 @@
 <section class="signin-popup ai-bg-animate">
  <div class="ai-particle-bg"></div>
- <div class="signin-header">
- </div>
+ <div class="signin-header"></div>
 
  <div class="auth-card" [class.flipped]="isFlipped">
  <div class="card-inner">
@@ -41,57 +40,66 @@
  </div>
  <!-- Overlay text and button -->
  <div class="side-welcome-overlay">
-   <div class="welcome-back-title">Welcome back!</div>
-   <div class="welcome-back-desc">You can sign in to access with your existing account.</div>
-   <div class="welcome-back-desc">First time here? Join now.</div>
-   <button class="action-btn" type="button" (click)="flipToSignUp()">Sign Up</button>
+ <!--<div class="welcome-back-title welcome-line-1">Welcome back!</div>
+ <div class="welcome-back-desc welcome-line-2">Sign in to access your account and continue your work.</div>
+ <div class="welcome-back-desc welcome-line-3">New here? Create your account now.</div>-->
+ <button class="action-btn welcome-line-4" type="button" (click)="flipToSignUp()">Sign Up</button>
  </div>
- <!-- Replace /assets/side-placeholder-left.jpg with your chosen image -->
+ <!-- Left-side artwork: replace with your chosen image in /assets -->
+ <img class="side-img" src="/assets/side-scale-right.jpg" alt="Scales of justice" />
  </div>
 
- <div class="main-panel" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px;">
-   <!-- existing sign-in form -->
-   <button class="signin-close" type="button" (click)="closePopup()" aria-label="Close" style="align-self: flex-end; margin-bottom: 10px;">&times;</button>
-   <h2 class="signin-title" style="text-align: center; margin-bottom: 24px;">
-     <span class="login-text">Login</span>
-   </h2>
-   <form [formGroup]="form" (ngSubmit)="signIn()" novalidate style="width: 100%; max-width: 340px;">
+ <div class="main-panel" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height:420px;">
+ <!-- existing sign-in form -->
+ <button class="signin-close" type="button" (click)="closePopup()" aria-label="Close" style="align-self: flex-end; margin-bottom:10px;">&times;</button>
+ <h2 id="signinTitle" class="signin-title" style="text-align: center; margin-bottom:24px;">
+ <span class="login-text">Login</span>
+ </h2>
+ <form class="signin-form" [formGroup]="form" (ngSubmit)="signIn()" novalidate style="width:90%; max-width:455px;" role="form" aria-labelledby="signinTitle" [attr.aria-busy]="loading" autocomplete="off">
+
  <div class="signin-row">
  <div class="signin-field">
  <label for="email">Email</label>
- <input id="email" type="email" placeholder="you@example.com" formControlName="email" [attr.aria-invalid]="form.get('email')?.invalid && form.get('email')?.touched" />
+ <input id="email" type="email" placeholder="you@example.com" formControlName="email" aria-label="Email address" [attr.aria-invalid]="form.get('email')?.invalid && form.get('email')?.touched" aria-describedby="emailHelp" autocomplete="off" autocapitalize="off" spellcheck="false" />
+ <span id="emailHelp" class="sr-only">Enter your email address (example: you@example.com)</span>
  </div>
  </div>
+
  <div class="signin-row">
  <div class="signin-field" style="position:relative;">
- <label for="password">Password</label>
- <input id="password" [type]="showPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="password" [attr.aria-invalid]="form.get('password')?.invalid && form.get('password')?.touched" />
- <button type="button" class="eye-toggle" (click)="togglePasswordVisibility()" tabindex="-1" aria-label="Show/Hide password">
+ <!-- Lock icon added to password label -->
+ <label for="password"><i class="fa-solid fa-lock lock-icon-inline" aria-hidden="true"></i> Password</label>
+ <!-- Wrap password input and eye toggle together so they move as one -->
+ <div class="password-wrapper">
+ <input id="password" [type]="showPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="password" (keydown)="onPasswordKey($event)" (keyup)="onPasswordKey($event)" aria-label="Password" [attr.aria-invalid]="form.get('password')?.invalid && form.get('password')?.touched" [attr.aria-describedby]="capsLockOn ? 'capsWarning' : null" autocomplete="new-password" autocapitalize="off" spellcheck="false" />
+ <!-- local eye toggle button (sign-in only) -->
+ <button type="button" class="eye-toggle variant-signin" aria-label="Show password" [attr.aria-pressed]="showPassword" (click)="togglePasswordVisibility()">
+ <i class="fa-solid" [ngClass]="showPassword ? 'fa-eye' : 'fa-eye-slash'" aria-hidden="true"></i>
  </button>
- <div *ngIf="errorMessage" class="signin-error-toast">{{ errorMessage }}</div>
+ </div>
+ <div *ngIf="capsLockOn" id="capsWarning" class="caps-lock-warning" role="status" aria-live="polite">Caps Lock is on</div>
+ <div *ngIf="errorMessage" class="signin-error-toast" role="alert" aria-live="assertive">{{ errorMessage }}</div>
  </div>
  </div>
+
  <div class="signin-row signin-options-row">
  <div class="remember-me">
- <label class="switch">
- <input id="rememberMe" type="checkbox" />
- <span class="slider"></span>
- </label>
- <span>Remember me</span>
+ <input id="rememberMe" name="rememberMe" type="checkbox" aria-label="Remember me" tabindex="0" />
+ <label for="rememberMe">Remember me</label>
  </div>
  <div class="forgot-password">
- <a href="#" class="forgot-link" (click)="openForgotModal($event)">Forgot password?</a>
+ <a href="#" class="forgot-link" (click)="openForgotModal($event)" aria-label="Forgot password" tabindex="0">Forgot password?</a>
  </div>
  </div>
- <!-- Hint removed for minimal UI -->
- <button class="signin-btn ai-pulse" type="submit" [disabled]="loading">
+
+ <button class="signin-btn ai-pulse" type="submit" [disabled]="loading" aria-label="Sign in">
  <ng-container *ngIf="!loading; else signingIn">
  Sign In
  </ng-container>
  <ng-template #signingIn>
- <span class="spinner"></span> Signing In...
+ <span class="spinner" aria-hidden="true"></span> Signing In...
  </ng-template>
-</button>
+ </button>
 
  <!-- Divider with 'or' -->
  <div class="signin-divider-row">
@@ -101,12 +109,52 @@
  </div>
 
  <!-- Custom Google Sign-In button -->
- <button class="google-btn" type="button" (click)="onGoogleSignIn()">
+ <button class="google-btn" type="button" (click)="onGoogleSignIn()" aria-label="Sign in with Google">
  <img src="assets/google-logo.svg" alt="Google logo" class="google-logo" />
  <span>Log in with Google</span>
  </button>
 
+ <!-- SECURITY NOTE &2FA indicator only (no setup button) -->
+ <div class="signin-row security-row" style="margin-top:14px;">
+ <div class="security-info">
+ <i class="fa-solid fa-shield-halved" aria-hidden="true"></i>
+ <span class="security-text">Your data is encrypted and handled securely.</span>
+ <span class="twofa-indicator" *ngIf="twoFAEnabled">•2FA enabled</span>
+ </div>
+ </div>
+
  </form>
+
+ <div class="signin-help">Need help? <a href="#" (click)="openSupportModal($event)" aria-label="Contact support">Contact support</a> • <a href="/legal/terms" target="_blank" rel="noopener noreferrer">Terms</a> • <a href="/legal/privacy" target="_blank" rel="noopener noreferrer">Privacy</a></div>
+
+ <!-- Support Assistance Modal -->
+ <div *ngIf="showSupportModal" class="support-modal-bg">
+ <div class="support-modal">
+ <h3>Support Assistance</h3>
+ <p>If you need help with your account, login issues, or access questions, please contact our support team.</p>
+ <p><strong>Email:</strong> <a href="mailto:info@pykara.ai">info@pykara.ai </a></p>
+ <p><strong>Response Time:</strong> Within 24 hours (business days)</p>
+ <p>Please include your registered email and a short description of the issue.</p>
+ <b><button class="support-modal-close" (click)="closeSupportModal()"><b>Close</b></button></b>
+ </div>
+ </div>
+
+ <!--2FA Modal (centered over auth-card) -->
+ <div *ngIf="show2FAModal" class="otp-modal-bg">
+ <div class="forgot-modal otp-modal">
+ <h3>Enter verification code</h3>
+ <p *ngIf="twoFACodeSent">Enter the verification code sent to your email or phone.</p>
+ <div *ngIf="twoFACodeSent">
+ <input type="text" [(ngModel)]="twoFAInput" placeholder="Enter code" />
+ <div style="display:flex; gap:8px; margin-top:12px;">
+ <button class="signin-btn" (click)="verify2FACode()">Verify</button>
+ <button class="modal-close" (click)="cancel2FA()">Cancel</button>
+ </div>
+ </div>
+ <div *ngIf="twoFAMessage" style="margin-top:8px; color:#b0c7d4">{{ twoFAMessage }}</div>
+ </div>
+ </div>
+
  </div>
  </div>
  </div>
@@ -122,57 +170,54 @@
  <div class="signin-footer">
  <a href="#" (click)="flipToSignIn(); $event.preventDefault()">Back to Sign In</a>
  </div>
+ <div class="signin-help">Need help? <a href="mailto:info@pykara.ai">Contact support</a></div>
  </div>
 
  <div class="side-panel side-right">
-   <!-- Decorative background shapes -->
-   <div class="side-bg-shapes">
-     <div class="bg-circle circle1"></div>
-     <div class="bg-circle circle2"></div>
-     <div class="bg-circle circle3"></div>
-     <div class="bg-circle circle4"></div>
-     <div class="bg-circle circle5"></div>
-     <div class="bg-circle circle6"></div>
-     <div class="bg-circle circle7"></div>
-     <div class="bg-circle circle8"></div>
-     <div class="bg-circle circle9"></div>
-     <div class="bg-circle circle10"></div>
-     <div class="bg-circle circle11"></div>
-     <div class="bg-circle circle12"></div>
-     <div class="bg-circle circle13"></div>
-     <div class="bg-circle circle14"></div>
-     <!-- New large solid circles -->
-     <div class="bg-circle circle-large1"></div>
-     <div class="bg-circle circle-large2"></div>
-     <div class="bg-circle circle-large3"></div>
-     <div class="bg-circle circle-large4"></div>
-     <!-- More white rings for contrast -->
-     <div class="bg-ring ring1"></div>
-     <div class="bg-ring ring2"></div>
-     <div class="bg-ring ring3"></div>
-     <div class="bg-ring ring4"></div>
-     <div class="bg-ring ring5"></div>
-     <div class="bg-ring ring6"></div>
-     <div class="bg-ring ring7"></div>
-     <div class="bg-ring ring8"></div>
-     <div class="bg-ring ring9"></div>
-   </div>
-   <div class="side-info-box">
-     <div class="welcome-back-title">Investigate Smarter.</div>
-     <div class="welcome-back-title">Analyze Deeper.</div>
-     <div class="welcome-back-desc">
-       Py-Detect transforms traditional investigations with advanced emotion, tone, and consistency analysis.
-     </div>
-     <div class="welcome-back-desc">
-       Get started today — powered by the intelligence of tomorrow.
-     </div>
-     <div class="welcome-back-desc">
-       Existing user? Log in to your account.
-     </div>
-     <button class="action-btn" type="button" (click)="goToLogin()">Sign In</button>
-   </div>
-   <!-- Replace /assets/side-placeholder-right.jpg with your chosen image -->
-   <img class="side-img" src="/assets/side-placeholder-right.jpg" alt="" />
+ <!-- Decorative background shapes -->
+ <div class="side-bg-shapes">
+ <div class="bg-circle circle1"></div>
+ <div class="bg-circle circle2"></div>
+ <div class="bg-circle circle3"></div>
+ <div class="bg-circle circle4"></div>
+ <div class="bg-circle circle5"></div>
+ <div class="bg-circle circle6"></div>
+ <div class="bg-circle circle7"></div>
+ <div class="bg-circle circle8"></div>
+ <div class="bg-circle circle9"></div>
+ <div class="bg-circle circle10"></div>
+ <div class="bg-circle circle11"></div>
+ <div class="bg-circle circle12"></div>
+ <div class="bg-circle circle13"></div>
+ <div class="bg-circle circle14"></div>
+ <!-- New large solid circles -->
+ <div class="bg-circle circle-large1"></div>
+ <div class="bg-circle circle-large2"></div>
+ <div class="bg-circle circle-large3"></div>
+ <div class="bg-circle circle-large4"></div>
+ <!-- More white rings for contrast -->
+ <div class="bg-ring ring1"></div>
+ <div class="bg-ring ring2"></div>
+ <div class="bg-ring ring3"></div>
+ <div class="bg-ring ring4"></div>
+ <div class="bg-ring ring5"></div>
+ <div class="bg-ring ring6"></div>
+ <div class="bg-ring ring7"></div>
+ <div class="bg-ring ring8"></div>
+ <div class="bg-ring ring9"></div>
+ </div>
+ <div class="side-info-box">
+ <!--<div class="welcome-back-title welcome-line-1">Start Your Journey</div>
+ <div class="welcome-back-desc welcome-line-2">
+ Create your account to access your workspace and continue your activities securely.
+ </div>
+ <div class="welcome-back-desc welcome-line-3">
+ Already have an account? Sign in.
+ </div>-->
+ <button class="action-btn welcome-line-4" type="button" (click)="goToLogin()">Sign In</button>
+ </div>
+ <!-- Replace /assets/side-placeholder-right.jpg with your chosen image -->
+ <img class="side-img" src="/assets/side-scale-right.jpg" alt="" />
  </div>
  </div>
  </div>
@@ -185,7 +230,7 @@
  <h3>Forgot Password</h3>
  <p>Enter your email to receive password reset instructions.</p>
  <input type="email" [(ngModel)]="forgotEmail" placeholder="Your email" />
- <button class="signin-btn" (click)="sendForgotEmail()">Send Reset Link</button>
+ <button class="send-reset-btn" (click)="sendForgotEmail()">Send Reset Link</button>
  <button class="modal-close" (click)="closeForgotModal()">Close</button>
  </div>
  </div>

src/app/homepage/sign-in/sign-in.component.ts

@@ -1,21 +1,23 @@
 // sign-in.component.ts
-import { Component, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Output, EventEmitter, ChangeDetectorRef, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, Validators, FormGroup, FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import { SignInService } from './sign-in.service';
-import { AuthService } from '../../auth.service';  // Import SignInService
+import { AuthService } from '../../auth.service'; // Import SignInService
 import { SignUpComponent } from '../sign-up/sign-up.component';
+import { EyeToggleComponent } from '../../shared/eye-toggle/eye-toggle.component';
 
 @Component({
   selector: 'app-sign-in',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterLink, FormsModule, SignUpComponent],
+  imports: [CommonModule, ReactiveFormsModule, RouterLink, FormsModule, SignUpComponent, EyeToggleComponent],
   templateUrl: './sign-in.component.html',
   styleUrls: ['./sign-in.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SignInComponent {
+  @Input() cardState?: 'signup' | 'signin';
   @Output() switchToSignUp = new EventEmitter<void>();
   @Output() close = new EventEmitter<void>();
   form: FormGroup;
@@ -23,55 +25,128 @@ export class SignInComponent {
   loading = false;
   errorMessage = '';
 
-    // UI and template state
-    isFlipped = false;
-    typingTitle = '';
-    showPassword = false;
-    showForgotModal = false;
-    forgotEmail = '';
+  // UI and template state
+  isFlipped = false;
+  typingTitle = '';
+  showPassword = false;
+  showForgotModal = false;
+  showSupportModal = false; // added support assistance modal flag
+  forgotEmail = '';
 
-    // Template methods
-    flipToSignUp() {
-      this.isFlipped = true;
-    }
-    flipToSignIn() {
-      this.isFlipped = false;
-    }
-    togglePasswordVisibility() {
-      this.showPassword = !this.showPassword;
-    }
-    openForgotModal(event?: Event) {
-      if (event) event.preventDefault();
-      this.showForgotModal = true;
-    }
-    closeForgotModal() {
-      this.showForgotModal = false;
-      this.forgotEmail = '';
-    }
-    sendForgotEmail() {
-      this.closeForgotModal();
-      alert('Password reset link sent to your email.');
-    }
-    onGoogleSignIn() {
-      // Implement Google sign-in logic here
-      console.log('Google sign-in clicked');
-    }
-    goToLogin() {
-      this.flipToSignIn();
-    }
+  // Caps lock state
+  capsLockOn = false;
+
+  //2FA state
+  show2FAModal = false;
+  twoFAEnabled = false;
+  twoFACodeSent = false;
+  twoFAInput = '';
+  twoFAMessage = '';
+
+  // store last auth response until OTP verified
+  private lastAuthResponse: any = null;
 
   constructor(
     private fb: FormBuilder,
     private router: Router,
     private signInService: SignInService,
-    private authService: AuthService
+    private authService: AuthService,
+    private cdr: ChangeDetectorRef
   ) {
     this.form = this.fb.group({
-      email: ['', [Validators.required, Validators.email]],  // Added email validation
+      email: ['', [Validators.required, Validators.email]], // Added email validation
       password: ['', [Validators.required]]
     });
   }
 
+  // Template methods
+  flipToSignUp() {
+    this.isFlipped = true;
+  }
+  flipToSignIn() {
+    this.isFlipped = false;
+  }
+  togglePasswordVisibility() {
+    this.showPassword = !this.showPassword;
+  }
+  openForgotModal(event?: Event) {
+    if (event) event.preventDefault();
+    this.showForgotModal = true;
+    this.cdr.markForCheck();
+  }
+  closeForgotModal() {
+    this.showForgotModal = false;
+    this.forgotEmail = '';
+    this.cdr.markForCheck();
+  }
+  openSupportModal(event?: Event) { // new method to open support assistance modal
+    if (event) event.preventDefault();
+    this.showSupportModal = true;
+    this.cdr.markForCheck();
+  }
+  closeSupportModal() { // new method to close support assistance modal
+    this.showSupportModal = false;
+    this.cdr.markForCheck();
+  }
+  sendForgotEmail() {
+    this.closeForgotModal();
+    alert('Password reset link sent to your email.');
+  }
+  onGoogleSignIn() {
+    // Implement Google sign-in logic here
+    console.log('Google sign-in clicked');
+  }
+  goToLogin() {
+    this.flipToSignIn();
+  }
+
+  //2FA methods (mock)
+  start2FA() {
+    // kept for compatibility but not used in mock flow
+    this.show2FAModal = true;
+    this.twoFACodeSent = true;
+    this.twoFAMessage = 'Mock code sent to email/phone:123456';
+    this.cdr.markForCheck();
+  }
+  send2FACode() {
+    // mock sending code
+    this.twoFACodeSent = true;
+    this.twoFAMessage = 'Mock code sent to email/phone:123456';
+    this.cdr.markForCheck();
+    // keep message visible briefly
+    setTimeout(() => { this.twoFAMessage = ''; this.cdr.markForCheck(); },3500);
+  }
+  verify2FACode() {
+    // Verify mock OTP
+    if (this.twoFAInput && this.twoFAInput.trim() === '123456') {
+      this.twoFAMessage = '2FA verified. Signing you in...';
+      // finalize login using stored response (if any) or current form email
+      const email = this.form.get('email')?.value || '';
+      // call handleSuccessfulLogin with stored response or minimal payload
+      this.show2FAModal = false;
+      this.twoFACodeSent = false;
+      this.twoFAInput = '';
+      this.twoFAMessage = '';
+      this.cdr.markForCheck();
+
+      // If we have a lastAuthResponse, use it; otherwise create a minimal user object
+      const resp = this.lastAuthResponse || { user: { role: 'user', email } };
+      this.handleSuccessfulLogin(resp, email);
+    } else {
+      this.twoFAMessage = 'Invalid code. Please try again.';
+      this.cdr.markForCheck();
+    }
+  }
+  cancel2FA() {
+    this.show2FAModal = false;
+    this.twoFACodeSent = false;
+    this.twoFAInput = '';
+    this.twoFAMessage = '';
+    // clear stored response so user must re-authenticate
+    this.lastAuthResponse = null;
+    this.cdr.markForCheck();
+  }
+
   goToSignUp() {
     this.switchToSignUp.emit();
   }
@@ -87,28 +162,49 @@ export class SignInComponent {
     }
     this.loading = true;
     this.errorMessage = '';
+    this.cdr.markForCheck();
     const payload = {
       email: this.form.get('email')?.value,
       password: this.form.get('password')?.value
     };
+
+    // Call backend sign-in; for mock2FA we will show OTP modal after successful password auth
     this.signInService.signIn(payload).subscribe(
       (response) => {
         this.loading = false;
-        console.log(response);
-        // Store user info and navigate based on role
-        this.handleSuccessfulLogin(response, payload.email);
+        console.log('Sign-in response:', response);
+        // Determine2FA state from response
+        const user = response?.data?.user || response?.user || response;
+        const twoFAEnabled = !!(user?.twoFAEnabled || user?.twofaEnabled);
+        const twoFAMethod = (user?.twoFAMethod || user?.twofaMethod || '').toString();
+
+        if (twoFAEnabled && twoFAMethod) {
+          // store response until OTP verified
+          this.lastAuthResponse = response;
+          // show OTP modal only when2FA is configured
+          this.show2FAModal = true;
+          this.twoFACodeSent = true;
+          this.twoFAMessage = 'Mock code sent to email/phone:123456';
+          this.cdr.markForCheck();
+        } else {
+          // No2FA configured; proceed to login directly
+          const email = this.form.get('email')?.value || '';
+          this.handleSuccessfulLogin(response, email);
+        }
       },
       (error) => {
         this.loading = false;
         console.log('Sign-in error:', error);
-        if (error && error.status === 401) {
+        if (error && error.status ===401) {
           this.errorMessage = 'Password is incorrect';
         } else {
           this.errorMessage = 'An error occurred. Please try again.';
         }
+        this.cdr.markForCheck();
         setTimeout(() => {
           this.errorMessage = '';
-        }, 3000);
+          this.cdr.markForCheck();
+        },3000);
       }
     );
   }
@@ -119,7 +215,6 @@ export class SignInComponent {
     const userData = response?.data?.user || response?.user || { email: email, role: userRole };
 
     // Store in localStorage
-    
     localStorage.setItem('userRole', userRole);
     localStorage.setItem('user', JSON.stringify({
       email: email,
@@ -139,7 +234,11 @@ export class SignInComponent {
     console.log('User role detected:', userRole);
     console.log('Current URL before redirect:', window.location.href);
 
-    if (userRole === 'admin') {
+    // Normalize possible role keys from sign-up
+    const normalizedRole = (userRole || '').toLowerCase();
+    const isAdmin = normalizedRole === 'admin' || normalizedRole === 'adminothers' || normalizedRole === 'admin & others';
+
+    if (isAdmin) {
       console.log('Redirecting admin to infopage');
       this.router.navigate(['/infopage']).then((success) => {
         console.log('Navigation to infopage successful:', success);
@@ -156,4 +255,11 @@ export class SignInComponent {
     console.log('Sign-in component initialized');
     // Do not auto-redirect - user must manually login
   }
+
+  onPasswordKey(event: KeyboardEvent) {
+    const caps = event.getModifierState && event.getModifierState('CapsLock');
+    this.capsLockOn = !!caps;
+    // ensure template updates under OnPush
+    this.cdr.markForCheck();
+  }
 }

src/app/homepage/sign-in/sign-in.service.ts

@@ -1,18 +1,15 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { environment } from 'src/environments/environment';  // adjust path if needed
 
 @Injectable({
   providedIn: 'root'
 })
 export class SignInService {
 
-  private apiUrl = environment.pyDetectApiUrl;
-
   constructor(private http: HttpClient) { }
 
   signIn(payload: any): Observable<any> {
-    return this.http.post(`${this.apiUrl}/sign-in`, payload);
+    return this.http.post('http://127.0.0.1:5002/sign-in', payload);
   }
 }

src/app/homepage/sign-up/sign-up.component.css

@@ -47,6 +47,36 @@
   border-radius: 18px;
   box-shadow: 0 12px 48px rgba(2, 6, 23, 0.18), 0 0 0 2px rgba(56, 189, 248, 0.08);
   margin: 0 auto;
+  position: relative;
+  z-index: 2;
+  transform: translateY(-8px);
+  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.18);
+  transition: transform 220ms ease, box-shadow 220ms ease;
+}
+
+.create-card:hover {
+  transform: translateY(-12px);
+  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.22);
+}
+
+@media (max-width: 700px) {
+  .create-card {
+    transform: none;
+    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.12);
+  }
+
+  .create-card:hover {
+    transform: none;
+    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.12);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .create-card,
+  .create-card:hover {
+    transition: none;
+    transform: none;
+  }
 }
 
 .create-title {
@@ -67,7 +97,8 @@
   letter-spacing: 1px;
   color: #23395d;
   text-shadow: 0 2px 8px #0008;
-  /* animation: logoGlow 3.5s ease-in-out infinite alternate; */
+  margin-top:24px;
+  /* animation: logoGlow 3.5s ease-in-out infinite; */
 }
 
 @keyframes logoGlow {
@@ -82,12 +113,14 @@
 
 .create-form {
   width: 100%;
-  max-width: 510px;
+  max-width: 580px;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 12px 15px;
+  gap: 16px 16px;
   align-items: start;
-  margin-bottom: 14px;
+  margin-bottom: 10px;
+  padding: 25px;
+  padding-top: 0px;
 }
 
 .terms-info {
@@ -98,6 +131,7 @@
   margin: 12px 0 0 0;
   letter-spacing: 0.5px;
   display: block;
+  margin-left: 25px !important; /* align with .twofa-methods and .form-checkbox */
 }
 
 .form-row {
@@ -112,9 +146,11 @@
 }
 
   .form-field label {
-    font-size: 1.05rem;
-    font-weight: 700;
+    color: #e6f7f9;
+    font-size: 1rem;
+    font-weight: 600;
     color: #23395d;
+    letter-spacing: 0.5px;
   }
 
   .form-field input,
@@ -123,7 +159,7 @@
     color: #23395d;
     border: none;
     border-radius: 8px;
-    padding: 12px 14px;
+    padding: 3px 10px 3px 10px;
     font-size: 1rem;
     margin-bottom: 2px;
     box-shadow: 0 1px 4px #0002;
@@ -131,7 +167,7 @@
     width: 100%;
     min-width: 0;
     max-width: 100%;
-    height: 46px;
+    height: 36px;
     box-sizing: border-box;
   }
 
@@ -142,45 +178,301 @@
       box-shadow: 0 0 6px rgba(56, 189, 248, 0.5), 0 0 0 2px #1de9b688;
     }
 
+    .form-field input:focus {
+      box-shadow: 006px rgba(14,165,164,0.08);
+      border-color: #0ea5a4;
+    }
+
     .form-field input::placeholder {
       color: #b0b8c1;
       opacity: 1;
     }
 
+  /* Reserve extra space when an eye toggle is present so text doesn't overlap and layout stays stable */
+  .form-field.has-eye input {
+    padding-right: 46px; /* enough for the eye button + spacing */
+  }
+
+  /* Anchor wrapper for inputs that include an eye toggle */
+  .input-with-eye {
+    position: relative;
+    display: block;
+    height: 46px; /* match input height so the eye is vertically stable */
+    box-sizing: border-box;
+  }
+
+  /* Ensure the input fills the wrapper and reserves space for the eye */
+  .input-with-eye input {
+    padding-right: 50px; /* space for the eye */
+    height: 79%;
+    box-sizing: border-box;
+  }
+
+  /* More specific selector so the eye is positioned relative to the wrapper and won't shift */
+  .input-with-eye .eye-toggle {
+    position: absolute;
+    right: 10px;
+    top: 41%;
+    transform: translateY(-50%);
+    border: none;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #23395d;
+    z-index: 2; /* keep above input */
+    pointer-events: auto;
+  }
+
+  /* Keep the original .form-field .eye-toggle as a fallback but prefer the wrapper-based positioning */
+  .form-field .eye-toggle {
+    /* fallthrough for any other usages; do not change */
+  }
+
+  /* Eye toggle inside password field for sign-up: vertically center and avoid movement */
+.form-field .eye-toggle {
+  position: absolute;
+  right: 0px;
+  top: 41%;
+  transform: translateY(-50%);
+  /*    background: #fff;*/
+  border: transparent;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  background: transparent;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #23395d;
+  z-index: 0;
+  pointer-events: auto;
+}
+  .form-field .eye-toggle i {
+    font-size: 0.95rem;
+    line-height: 1;
+  }
+ 
+  .form-field .eye-toggle:focus {
+    outline: 2px solid rgba(29,233,182,0.12);
+  }
+
 .form-checkbox {
+      display: flex;
+    gap: 10px;
+    align-items: center;
+    color: #2b5160;
+    margin-top: -19px; /* normalized spacing */
+    margin-left: 25px !important; /* enforce consistent left alignment */
+}
+
+  .form-checkbox input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    margin: 0; /* gap handles spacing */
+    padding: 0;
+    box-sizing: border-box;
+    vertical-align: middle;
+    appearance: none;
+    -webkit-appearance: none;
+    background: #fff;
+    border: 2px solid #cbd5e1; /* subtle border */
+    border-radius: 4px;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    margin-bottom: 0px;
+  }
+input#twoFAOptIn {
+  margin-top: 0; /* remove extra offset which caused misalignment */
+}
+
+  /* Checked state - show a simple tick using box-shadow trick (keeps no extra elements) */
+  .form-checkbox input[type="checkbox"]:checked {
+    background: linear-gradient(180deg, #38bdf8, #137ec4);
+    border-color: #137ec4;
+  }
+
+  .form-checkbox input[type="checkbox"]:checked::after {
+    content: '\2713'; /* check mark */
+    color: #083344;
+    font-weight: 700;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -58%);
+    line-height: 1;
+  }
+
+  /* Keep label aligned and allow wrapping */
+  .form-checkbox label {
+    display: inline-block;
+    line-height: 1.2;
+    cursor: pointer;
+  }
+
+  /* New: 2FA styles moved from inline */
+.twofa-field {
   grid-column: 1 / -1;
+  padding-top: 0px;
+  margin-left: 0;
+}
+
+.twofa-section {
+  margin-top: 6px;
+}
+
+.twofa-label-bold {
+  font-weight: 700;
+  display: block;
+  margin-bottom: 6px;
+  margin-left: 25px; /* match .form-checkbox and form padding */
+}
+
+.twofa-methods {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-left: 25px !important; /* start at same x as checkbox label */
+}
+
+.inline-control {
   display: flex;
-  gap: 10px;
+  gap: 6px;
   align-items: center;
-  color: #2b5160;
+}
+
+.twofa-email-options .twofa-alt-email,
+.twofa-sms-options {
   margin-top: 8px;
+  margin-left: 25px !important; /* align alt inputs with checkbox label */
 }
 
-  .form-checkbox input[type="checkbox"] {
-    width: 18px;
-    height: 18px;
-    accent-color: #38bdf8;
+.twofa-alt-email input,
+.twofa-sms-options input {
+  width: 100%;
+  background: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 6px 10px;
+  height: 36px;
+  box-shadow: 0 1px 4px #0002;
+}
+
+.twofa-alt-email input:focus,
+.twofa-sms-options input:focus {
+  outline: 2px solid #1de9b6;
+  box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
+}
+
+/* Reduce SMS input width only (override the earlier100% width) */
+.twofa-sms-options input {
+ width:260px; /* reduced fixed width for SMS input */
+ max-width:100%;
+}
+
+.twofa-sms-options label {
+ display: block;
+ margin-bottom:6px; /* small gap -- reduced */
+ font-weight:600;
+ color: #23395d;
+}
+
+.twofa-sms-options input {
+ margin-top:4px; /* tiny gap to bring input closer to label */
+}
+
+.twofa-error {
+  display: block;
+  margin-top: 8px;
+}
+
+.twofa-sms-options input[readonly] {
+  background: #f3f4f6;
+}
+
+/* 2FA single-line row: checkbox + method radios aligned */
+.twofa-row {
+ display: flex;
+ align-items: center;
+ gap:14px; /* small gap between checkbox label and method controls */
+}
+
+/* ensure checkbox block has same spacing as other checkboxes */
+.twofa-checkbox {
+ margin-left:0px !important;
+ margin-top:0px;
+}
+
+/* plain control: no extra background, keep text and control inline */
+.plain-control {
+ background: transparent;
+ padding:0;
+ margin:0;
+ display: inline-flex;
+ align-items: center;
+ gap:8px;
+ color: inherit;
+}
+
+/* ensure radios align vertically with checkbox center */
+.plain-control input[type="radio"] {
+ width:16px;
+ height:16px;
+ margin:0;
+}
+
+/* Small responsive tweaks */
+@media (max-width: 900px) {
+  .twofa-methods {
+    flex-direction: column;
+    align-items: flex-start;
   }
 
+  .twofa-field .form-checkbox {
+    margin-left: 0;
+  }
+}
+
 .create-btn {
-  grid-column: 1 / -1;
-  width: 100%;
+  width: 50%;
+  max-width: 320px;
   background: #23395d;
   color: #fff;
-  padding: 14px 18px;
+  padding: 12px 18px;
   border-radius: 10px;
   font-weight: 800;
   border: none;
   box-shadow: 0 10px 30px rgba(3, 20, 36, 0.32);
   cursor: pointer;
   font-size: 1.15rem;
-  margin-top: 10px;
+  margin-top: 100px;
+  margin-left: 0; /* remove previous fixed offset */
+  margin-right: 0;
+  margin-bottom: 0;
+  display: block;
+  margin-inline: auto; /* center horizontally */
 }
 
-  .create-btn:hover {
-    background: #38bdf8;
-    color: #fff;
-  }
+.create-btn:hover {
+  background: #38bdf8;
+  color: #fff;
+}
+
+/* Grey out disabled create button */
+.create-btn[disabled] {
+ background: #b8c6d6;
+ color: #fff;
+ cursor: not-allowed;
+ box-shadow: none;
+}
 
 .create-login-link {
   grid-column: 1 / -1;
@@ -199,15 +491,18 @@
   text-align: center;
   color: #010207;
   font-size: 0.9rem;
-  margin-top: 16px;
+  margin-top: 8px;
 }
 
 .form-field .error {
   color: #ff5252;
   font-size: 0.85rem;
   margin-top: 0px;
+  margin-left: 10px;
 }
 
+
+
 .welcome-info-box {
   position: absolute;
   top: 32px;
@@ -228,7 +523,7 @@
 
 .welcome-info-desc {
   font-size: 1.08rem;
-  color: #e0f7fa;
+  color: #fff;
   margin-bottom: 8px;
 }
 
@@ -244,6 +539,41 @@
     color: #23395d;
   }
 
+.rotation-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.rotation-item {
+  display: inline-block;
+  will-change: transform;
+  pointer-events: auto;
+  position: relative;
+}
+
+@keyframes rotateAnimation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+.rotation-item:nth-child(1) {
+  animation: rotateAnimation 24s linear infinite;
+  z-index: 1;
+}
+
+.rotation-item:nth-child(2) {
+  animation: rotateAnimation 36s linear infinite;
+}
+
 /* Extra whitespace and centering for small screens */
 @media (max-width: 900px) {
   .signup-container {
@@ -308,364 +638,374 @@
     color: #18314a;
   }
 
-/* Eye toggle inside password fields: match sign-in positioning */
-.form-field .eye-toggle {
-  position: absolute;
-  right: 12px;
-  top: 38px;
-  background: none;
-  border: none;
-  font-size: 1.3em;
-  color: #888;
-  cursor: pointer;
-  z-index: 2;
-  padding: 0;
-  line-height: 1;
-  opacity: 0.9;
-  transition: color 0.2s, opacity 0.2s;
+.side-bg-shapes,
+.bg-circle,
+.bg-ring,
+.circle,
+.circle-large1,
+.circle-large2,
+.circle-large3,
+.circle-large4 {
+ display: none !important;
+ opacity:0 !important;
+ pointer-events: none !important;
+ animation: none !important;
 }
 
-  .form-field .eye-toggle:hover {
-    color: #555;
-    opacity: 1;
-  }
-
-  .form-field .eye-toggle:focus {
-    outline: none;
-  }
+@keyframes floatSlow { }
+@keyframes floatSlowReverse { }
+@keyframes ringPulse { }
 
-  /* Ensure button SVG scales nicely */
-  .form-field .eye-toggle svg {
-    width: 22px;
-    height: 22px;
-  }
+.side-panel.side-right .side-img { display:block !important; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; }
+.side-panel.side-right .signup-panel-right, .side-panel.side-right .signup-panel-left { position: relative; z-index:1; }
 
-/* Small screen tweak: move eye toggle slightly up if spacing differs */
-@media (max-width: 700px) {
-  .form-field .eye-toggle {
-    top: 28px;
-  }
+.welcome-back-title,
+.welcome-info-title {
+ color: #ffffff !important;
 }
 
-.fact-rotator {
-  font-size: 1.18rem;
-  font-weight: 700;
-  color: #fff;
-  margin-bottom: 18px;
-  min-height: 32px;
-  text-align: center;
-  transition: opacity 0.6s;
-  letter-spacing: 0.5px;
-  animation: fadeFact 0.6s;
+.side-panel.side-right .side-img {
+ z-index:0 !important; /* image underlay */
 }
 
-@keyframes fadeFact {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+.side-panel.side-right .side-info-box,
+.side-panel.side-right .side-welcome-overlay,
+.welcome-info-box,
+.welcome-back-title,
+.welcome-info-title,
+.side-panel.side-right .welcome-back-title {
+ position: relative !important;
+ z-index:5 !important; /* bring text above image */
+ color: #ffffff !important; /* white text */
+ text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important; /* improve contrast */
 }
 
-.side-panel.side-right {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #38bdf8 0%, #7b2ff2 100%);
-  min-height: 100%;
+.side-panel.side-right .side-info-box p,
+.side-panel.side-right .side-welcome-overlay p,
+.welcome-info-box p,
+.welcome-info-desc {
+ color: #ffffff !important;
+ text-shadow: 0 1px 6px rgba(0,0,0,0.45) !important;
 }
 
-.side-panel.side-left {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
- 
-  min-height: 100%;
+.side-panel.side-right .action-btn,
+.side-panel.side-right .panel-cta,
+.welcome-line-4,
+.side-panel.side-right .action-btn {
+ position: relative;
+ z-index:6 !important;
 }
 
-.wave-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  overflow: hidden;
+.side-panel.side-right .side-welcome-overlay,
+.side-panel.side-right .side-info-box,
+.welcome-info-box {
+ position: relative !important;
+ z-index:10 !important;
+ color: #ffffff !important;
 }
 
-.wave-svg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
+.side-panel.side-right .side-welcome-overlay .welcome-back-title,
+.side-panel.side-right .side-info-box .welcome-back-title,
+.welcome-info-box .welcome-back-title,
+.side-panel.side-right .side-welcome-overlay .welcome-back-desc,
+.side-panel.side-right .side-info-box .welcome-back-desc,
+.welcome-info-box .welcome-info-desc,
+.side-panel.side-right .side-welcome-overlay .welcome-line-3,
+.side-panel.side-right .side-info-box .welcome-line-3 {
+ color: #ffffff !important;
+ text-shadow: 02px 8px rgba(0,0,0,0.6) !important;
 }
 
-.circle {
-  position: absolute;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #38bdf8 0%, #7b2ff2 100%);
-  opacity: 0.85;
+.side-panel.side-right .side-welcome-overlay a,
+.side-panel.side-right .side-info-box a,
+.welcome-info-box a {
+ color: #ffffff !important;
+ text-decoration: underline;
 }
 
-.circle1 {
-  width: 90px;
-  height: 90px;
-  top: 80px;
-  left: 60px;
-  box-shadow: 0 0 32px #7b2ff2aa;
-}
 
-.circle2 {
-  width: 60px;
-  height: 60px;
-  top: 220px;
-  left: 220px;
-  box-shadow: 0 0 24px #38bdf8aa;
+@media (max-width:900px) {
+ .side-panel.side-right .side-info-box,
+ .welcome-info-box { max-width:92% !important; padding:12px !important; }
+ .side-panel.side-right .side-info-box .side-info-title,
+ .welcome-info-box .welcome-info-title { font-size:1.25rem !important; }
+ .side-panel.side-right .side-info-box .side-info-desc,
+ .welcome-info-box .welcome-info-desc { font-size:0.98rem !important; }
+ .side-panel.side-right .side-info-box .action-btn { padding:8px 12px !important; }
 }
 
-.circle3 {
-  width: 120px;
-  height: 120px;
-  bottom: 40px;
-  left: 120px;
-  box-shadow: 0 0 48px #7b2ff2aa;
-}
 
-.circle4 {
-  width: 36px;
-  height: 36px;
-  bottom: 80px;
-  right: 60px;
-  box-shadow: 0 0 12px #38bdf8aa;
+.info-btn {
+  background: #23395d;
+  color: #fff;
+  border: none;
+  border-radius: 20%;
+  width: 20px;
+  height: 20px;
+  font-size: 1.1rem;
+  font-weight: bold;
+  cursor: pointer;
+  margin-left: 1px;
 }
 
-.welcome-content {
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  text-align: center;
+.info-popup-bg {
+  position: fixed;
+  inset: 0;
+  background: rgba(30,41,59,0.45);
+  backdrop-filter: blur(2px);
+  z-index:;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-top: 80px;
 }
 
-.welcome-title {
-  font-size: 2.2rem;
-  font-weight: 800;
-  color: #fff;
-  margin-bottom: 18px;
-  text-shadow: 0 2px 16px #0006;
+.info-popup {
+  background: rgba(255,255,255,0.85);
+  border-radius: 16px;
+  box-shadow: 08px 32px #38bdf844, 0024px #1e293b88;
+  padding: 24px 28px 18px 28px;
+  min-width: 320px;
+  max-width: 90vw;
+  text-align: left;
+  font-size: 0.98rem;
+  color: #23395d;
+  position: relative;
+  font-family: inherit;
+  left: 840px;
 }
 
-.welcome-subtitle {
+.info-title {
   font-size: 1.08rem;
-  color: #e0e7ef;
-  margin-bottom: 32px;
-  letter-spacing: 1px;
-  text-shadow: 0 2px 8px #0004;
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: #38bdf8;
+  letter-spacing: 0.5px;
+}
+
+.info-text {
+  font-size: 0.95rem;
+  color: #23395d;
+  opacity: 0.95;
 }
 
-.welcome-footer {
-  font-size: 1.05rem;
+.info-close {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  background: #38bdf8;
   color: #fff;
-  opacity: 0.7;
-  margin-top: 120px;
-  letter-spacing: 2px;
+  border: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
 }
 
-/* Glossy info popup for role info */
-.role-info-popup-bg {
+/* Floating info popup (small) */
+.info-popup-bg {
   position: fixed;
   inset: 0;
-  background: rgba(30, 41, 59, 0.55);
-  backdrop-filter: blur(1px);
-  z-index: 0;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  padding: 48px 56px 48px 24px;
-  animation: fadeInModalBg 0.3s;
+  justify-content: center;
+  z-index: 1200;
 }
 
-@keyframes fadeInModalBg {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+.info-popup {
+  background: rgba(255,255,255,0.98);
+  width: 420px;
+  max-width: calc(100% -48px);
+  border-radius: 12px;
+  padding: 14px 18px;
+  box-shadow: 0 12px 30px rgba(2,6,23,0.18);
+  position: relative;
+  color: #23395d;
+  font-size: 0.95rem;
 }
 
-@keyframes popupOpen {
-  0% {
-    opacity: 0;
-    transform: scale(0.92) translateY(24px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
+.info-close {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  background: #38bdf8;
+  color: #fff;
+  border: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
 }
 
-.role-info-popup {
-  background: rgba(255, 255, 255, 0.92);
-  border-radius: 4px;
-  box-shadow: 0 8px 32px #38bdf844 0 24px #1e293b88;
-  padding: 22px 28px 18px 28px;
-  min-width: 220px;
-  max-width: 90vw;
-  text-align: left;
-  z-index: 3001;
-  font-size: 0.98em;
-  color: #23395d;
-  letter-spacing: 0.2px;
-  line-height: 1.5;
-  position: relative;
-  font-family: inherit;
-  opacity: 1;
-  animation: popupOpen 1.2s cubic-bezier(.22, .9, .32, 1) both;
+.info-title {
+  color: #38bdf8;
+  font-weight: 800;
+  margin-bottom: 8px;
+  padding-left: 6px;
 }
 
-  .role-info-popup .close-btn {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 24px;
-    height: 24px;
-    border: none;
-    background: #14263c;
-    color: #fff;
-    border-radius: 50%;
-    font-size: 1.1rem;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 10;
-    transition: background 0.2s, color 0.2s;
-    box-shadow: 0 2px 8px #0005;
-  }
-
-    .role-info-popup .close-btn:hover {
-      background: #38bdf8;
-      color: #18314a;
-    }
+.info-text ul {
+  list-style: disc;
+  padding-left: 22px;
+  margin: 6px 0;
+}
 
-.role-info-btn {
-  background: none;
-  border: none;
-  color: #38bdf8;
-  font-size: 1.15em;
-  cursor: pointer;
-  margin-left: 6px;
-  vertical-align: middle;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 0.2s;
+.info-text li {
+  margin-bottom: 8px;
+  line-height: 1.35;
 }
 
-  .role-info-btn:hover {
-    color: #137ec4;
+  .info-text li strong {
+    display: inline-block;
+    width: 120px;
+    font-weight: 800;
   }
 
-/* Spinner for loading state on buttons */
-.spinner {
- display: inline-block;
- width:18px;
- height:18px;
- border:3px solid #fff;
- border-top:3px solid #38bdf8;
- border-radius:50%;
- animation: spin0.7s linear infinite;
- vertical-align: middle;
- margin-right:8px;
-}
-@keyframes spin {
-0% { transform: rotate(0deg);}
-100% { transform: rotate(360deg);}
-}
+/* Ensure popup scales on small screens */
+@media (max-width:520px) {
+  .role-help-modal, .info-popup {
+    width: auto;
+    margin: 016px;
+    padding: 12px;
+  }
 
-/* Info button and floating info popup styles */
-.info-btn {
- background: #38bdf8;
- color: #fff;
- border: none;
- border-radius:50%;
- width:28px;
- height:28px;
- font-size:1.1rem;
- font-weight: bold;
- cursor: pointer;
- margin-left:8px;
+  .role-help-list li strong, .info-text li strong {
+    display: block;
+    width: auto;
+    margin-bottom: 4px;
+  }
 }
 
-.info-popup-bg {
- position: fixed;
- inset:0;
- background: rgba(30,41,59,0.45);
- backdrop-filter: blur(2px);
- z-index:;
+/* Email display for2FA: plain text and label aligned with other controls */
+.twofa-email-display {
+ margin-left:25px;
+ margin-top:8px;
  display: flex;
+ gap:12px;
  align-items: center;
- justify-content: center;
-}
-
-.info-popup {
-  background: rgba(255,255,255,0.85);
-  border-radius: 16px;
-  box-shadow: 08px 32px #38bdf844,0024px #1e293b88;
-  padding: 24px 28px 18px 28px;
-  min-width: 320px;
-  max-width: 90vw;
-  text-align: left;
-  font-size: 0.98rem;
-  color: #23395d;
-  position: relative;
-  font-family: inherit;
-  left: 840px;
 }
-
-.info-title {
- font-size:1.08rem;
- font-weight:700;
- margin-bottom:8px;
- color: #38bdf8;
- letter-spacing:0.5px;
-}
-
-.info-text {
- font-size:0.95rem;
+.twofa-email-label {
+ font-weight:600;
  color: #23395d;
- opacity:0.95;
 }
-
-.info-close {
- position: absolute;
- top:8px;
- right:12px;
- background: none;
- border: none;
- font-size:1.5rem;
- color: #38bdf8;
- cursor: pointer;
- font-weight: bold;
- opacity:0.7;
- transition: opacity 0.2s;
-}
-.info-close:hover {
- opacity:1;
+.twofa-email-value {
+ color: #516b78;
+ font-weight:600;
+}
+
+/* remove any residual styles for alternate email inputs */
+.twofa-alt-email { display: none !important; }
+
+/* Cross indicator under invalid fields */
+.field-cross {
+ color: #ff5252;
+ font-weight:800;
+ margin-top:4px;
+ font-size:1rem;
+}
+
+/* Ensure input wrapper has room for cross under it */
+.form-field { position: relative; margin-bottom:8px; }
+
+/* Ensure main-panel is a positioned container so pinned controls can be placed inside it */
+.main-panel {
+ position: relative;
+ /* reserve space so form content doesn't overlap pinned controls */
+ padding-bottom:120px; /* space for button + footer */
+}
+
+/* Pin the create button to the bottom center of the viewport (fixed) so it does not move when form content changes */
+.main-panel .create-btn {
+ position: fixed; /* was absolute - changed to fixed */
+ left:86%;
+ transform: translateX(-50%);
+ bottom:56px; /* distance above footer */
+ width:48%;
+ max-width:360px;
+ margin:0;
+ z-index:50;
+}
+
+/* Pin the footer/version text to the bottom center of the viewport (fixed) */
+.main-panel .create-footer {
+ position: fixed; /* was absolute - changed to fixed */
+ left:86%;
+ transform: translateX(-50%);
+ bottom:16px;
+ z-index:50;
+ width:100%;
+ text-align: center;
+ pointer-events: none;
+}
+
+/* Make sure Google row and other form elements don't get hidden behind the pinned controls */
+.main-panel .google-signup-row {
+ margin-bottom:96px;
+}
+
+/* Remove any large flow margin on create button and rely on pinned positioning */
+.create-btn { margin-top:0; }
+
+/* Responsive adjustments */
+@media (max-width:900px) {
+ .main-panel { padding-bottom:150px; }
+ .main-panel .create-btn {
+ bottom:86px;
+ width:90%;
+ max-width: none;
+ }
+ .main-panel .create-footer { bottom:12px; }
+ .main-panel .google-signup-row { margin-bottom:120px; }
+}
+
+/* Keep disabled styling intact */
+.create-btn[disabled] { opacity:0.9; }
+/* Cross shown inside confirm password input wrapper when mismatch */
+.input-with-eye { position: relative; }
+/* Removed the inside-cross element */
+/* .input-with-eye .inside-cross { ... } */
+
+/* Password field layout: label + gap + cross */
+.password-field {
+ display: flex;
+ flex-direction: column;
+}
+.password-field label {
+ display: flex;
+ align-items: center;
+ gap:8px;
+}
+
+/* Keep label-cross visible when rendered by *ngIf */
+.label-cross { display: inline-block; }
+
+/* Force label cross visible and prominent */
+.password-field label { padding-right:48px; }
+.password-field .label-cross {
+ display: inline-block !important;
+ position: absolute !important;
+ right:8px !important;
+ top:50% !important;
+ transform: translateY(-50%) !important;
+ color: #ff5252 !important;
+ font-weight:900 !important;
+ font-size:1.1rem !important;
+ z-index:9999 !important;
+ pointer-events: none !important;
+}
+
+/* Ensure inside-cross sits above everything */
+/* .input-with-eye .inside-cross { ... } */
+
+/* Bring eye toggle slightly below inside-cross */
+.input-with-eye .eye-toggle { z-index:9000 !important; }
+
+/* Strong outline and color on mismatch */
+.input-with-eye.password-mismatch input {
+ outline:2px solid rgba(255,82,82,0.18) !important;
+ box-shadow:0002px rgba(255,82,82,0.08) !important;
+ color: #b91c1c !important;
 }

src/app/homepage/sign-up/sign-up.component.html

@@ -1,4 +1,4 @@
-<section class="signup-popup ai-bg-animate">
+<section class="signup-popup">
   <div class="ai-particle-bg"></div>
   <div class="signup-header">
     <div class="signup-logo">
@@ -17,97 +17,151 @@
             <div class="signup-panel-left">
 
             </div>
-            <div class="main-panel">
+            <div class="main-panel" [class.pwd-mismatch]="submitted && pwdMismatch">
               <h2 class="signup-title center-title">Create An Account</h2>
 
-              <form [formGroup]="form" (ngSubmit)="submit()" class="create-form" novalidate>
+              <!-- aria-live region for screen readers (visually hidden) -->
+              <div class="sr-only" aria-live="assertive" *ngIf="submitted && invalidFieldsMessage">{{ invalidFieldsMessage }}</div>
+
+              <!-- Extend form to include terms, reCAPTCHA, and submit button -->
+              <form [formGroup]="form" (ngSubmit)="submit()" class="create-form" novalidate autocomplete="off">
                 <div class="form-row">
                   <div class="form-field">
-                    <label for="firstName">First Name</label>
-                    <input id="firstName" type="text" placeholder="First Name" formControlName="name" [attr.aria-invalid]="controlHasError('name')" />
-                    <small *ngIf="controlHasError('name','required') && form.get('name')?.touched" class="error">First name is required.</small>
-                    <small *ngIf="controlHasError('name','minlength') && form.get('name')?.touched" class="error">Enter at least 2 characters.</small>
-                    <small *ngIf="controlHasError('name','invalidName') && form.get('name')?.touched" class="error">Only alphabets and spaces allowed.</small>
+                    <label for="firstName">First Name <span class="required-star" *ngIf="true">*</span>
+                      <span class="label-cross" *ngIf="submitted && controlHasError('name')" aria-hidden="true">✖</span>
+                    </label>
+                    <input id="firstName" type="text" placeholder="First Name" formControlName="name" [attr.aria-invalid]="controlHasError('name')" [class.input-invalid]="submitted && (controlHasError('name') || nameHasDigits('name'))" />
+                    <!-- Name errors intentionally hidden until Create Account and per user request no name error texts -->
                   </div>
                   <div class="form-field">
-                    <label for="lastName">Last Name</label>
-                    <input id="lastName" type="text" placeholder="Last Name" formControlName="lastName" [attr.aria-invalid]="controlHasError('lastName')" />
-                    <small *ngIf="controlHasError('lastName','required') && form.get('lastName')?.touched" class="error">Last name is required.</small>
-                    <small *ngIf="controlHasError('lastName','minlength') && form.get('lastName')?.touched" class="error">Enter at least 2 characters.</small>
-                    <small *ngIf="controlHasError('lastName','invalidName') && form.get('lastName')?.touched" class="error">Only alphabets and spaces allowed.</small>
+                    <label for="lastName">Last Name <span class="required-star" *ngIf="true">*</span>
+                      <span class="label-cross" *ngIf="submitted && controlHasError('lastName')" aria-hidden="true">✖</span>
+                    </label>
+                    <input id="lastName" type="text" placeholder="Last Name" formControlName="lastName" [attr.aria-invalid]="controlHasError('lastName')" [class.input-invalid]="submitted && (controlHasError('lastName') || nameHasDigits('lastName'))" />
+                    <!-- Last name errors intentionally hidden until Create Account and per user request no name error texts -->
                   </div>
                 </div>
                 <div class="form-row">
-                  <div class="form-field">
-                    <label for="email">Email</label>
-                    <input id="email" type="text" placeholder="email@gmail.com" formControlName="email" [attr.aria-invalid]="controlHasError('email')" />
-                    <small *ngIf="controlHasError('email','required') && form.get('email')?.touched" class="error">Email is required.</small>
-                    <small *ngIf="controlHasError('email','pattern') && form.get('email')?.touched" class="error">Enter a valid email/phone.</small>
+                  <div class="form-field email-field" [class.email-invalid]="submitted && controlHasError('email')">
+                    <label for="email">Email <span class="required-star">*</span>
+                    </label>
+                    <input id="email" type="text" placeholder="email@gmail.com" formControlName="email" [attr.aria-invalid]="controlHasError('email')" [class.input-invalid]="submitted && controlHasError('email')" autocomplete="off" autocapitalize="off" spellcheck="false" />
+                    <small *ngIf="submitted && controlHasError('email','required')" class="error">Email is required.</small>
+                    <small *ngIf="submitted && controlHasError('email','pattern')" class="error">Enter a valid email/phone.</small>
+                    <small *ngIf="submitted && controlHasError('email','emailExists')" class="error">Email already exists.</small>
                   </div>
                   <div class="form-field role-field-wrapper">
-                    <label for="role">
-                      Role
-                      <button class="info-btn" type="button" (click)="showInfo = true">i</button>
+                    <label for="roleGroup">Role Group <span class="required-star">*</span>
+                      <span class="label-cross" *ngIf="submitted && controlHasError('roleGroup')" aria-hidden="true">✖</span>
                     </label>
-                    <select id="role" formControlName="role" [attr.aria-invalid]="controlHasError('role')">
-                      <option value="">-- Select Role --</option>
-                      <option value="admin">Admin</option>
-                      <option value="teachers">Teachers</option>
-                      <option value="lawyers">Lawyers</option>
-                      <option value="investigators">Investigators</option>
-                      <option value="others">Others</option>
+                    <select id="roleGroup" formControlName="roleGroup" (change)="onRoleGroupChange($any($event.target).value)" aria-label="Role group" [class.input-invalid]="submitted && controlHasError('roleGroup')">
+                      <option value="">-- Select role group --</option>
+                      <option *ngFor="let g of roleGroups" [value]="g.key">{{ g.label }}</option>
                     </select>
-                    <small *ngIf="controlHasError('role','required') && form.get('role')?.touched" class="error">Role is required.</small>
+                    <small *ngIf="submitted && controlHasError('roleGroup','required')" class="error">Please select a role group.</small>
                   </div>
                 </div>
+ 
                 <div class="form-row">
-                  <div class="form-field" style="position:relative;">
-                    <label for="password">Create Password</label>
-                    <input id="password" [type]="showPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="password" [attr.aria-invalid]="controlHasError('password')" />
-                    <button type="button" class="eye-toggle" (click)="toggleConfirmPasswordVisibility()" tabindex="-1" aria-label="Show/Hide confirm password">
-                    </button>
-                    <small *ngIf="controlHasError('password','required') && form.get('password')?.touched" class="error">Password is required.</small>
-                    <small *ngIf="controlHasError('password','minlength') && form.get('password')?.touched" class="error">Use at least 8 characters.</small>
-                    <small *ngIf="form.get('password')?.hasError('passwordPolicy') && form.get('password')?.touched" class="policy-info">
-                      Create a strong password with at least 8 characters using letters, numbers, and special symbols.
+                  <div class="form-field password-field">
+                    <label for="password">Create Password <span class="required-star">*</span>
+                    </label>
+                    <!-- wrap input and eye in a positioned wrapper so the eye is anchored to the input only -->
+                    <div class="input-with-eye">
+                      <input id="password" [type]="showPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="password" (keydown)="onPasswordKey($event)" (keyup)="onPasswordKey($event)" [class.input-invalid]="submitted && controlHasError('password')" autocomplete="new-password" autocapitalize="off" spellcheck="false" />
+                      <!-- local eye toggle button (sign-up only) -->
+                      <button type="button" class="eye-toggle variant-signup" aria-label="Show password" [attr.aria-pressed]="showPassword" (click)="togglePasswordVisibility()">
+                        <i class="fa-solid" [ngClass]="showPassword ? 'fa-eye' : 'fa-eye-slash'" aria-hidden="true"></i>
+                      </button>
+                    </div>
+                    <div *ngIf="capsLockOn" class="caps-lock-warning">Caps Lock is on</div>
+                    <small *ngIf="submitted && controlHasError('password','required')" class="error">Password is required.</small>
+                    <small *ngIf="submitted && form.get('password')?.hasError('passwordPolicy')" class="policy-info">
+                      Required at least 8 characters using letters, numbers, and special character.
                     </small>
                   </div>
-
-                  <div class="form-field" style="position:relative;">
-                    <label for="confirmPassword">Confirm Password</label>
-                    <input id="confirmPassword" [type]="showConfirmPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="confirmPassword" [attr.aria-invalid]="showPwdMismatch()" />
-                    <button type="button" class="eye-toggle" (click)="toggleConfirmPasswordVisibility()" tabindex="-1" aria-label="Show/Hide confirm password">
-                    </button>
-                    <small *ngIf="controlHasError('confirmPassword','required') && form.get('confirmPassword')?.touched" class="error">Confirm password is required.</small>
-                    <small *ngIf="showPwdMismatch() && form.get('confirmPassword')?.touched" class="error">Passwords do not match.</small>
+ 
+                  <div class="form-field password-field">
+                    <label for="confirmPassword">Confirm Password <span class="required-star">*</span>
+                    </label>
+                    <!-- wrap confirm input and eye similarly -->
+                    <div class="input-with-eye" [class.password-mismatch]="submitted && pwdMismatch" [class.confirm-cross]="submitted && pwdMismatch">
+                      <input id="confirmPassword" [type]="showConfirmPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="confirmPassword" (keydown)="onPasswordKey($event)" (keyup)="onPasswordKey($event)" [class.input-invalid]="submitted && (controlHasError('confirmPassword') || showPwdMismatch())" autocomplete="new-password" autocapitalize="off" spellcheck="false" />
+                      <!-- local eye toggle for confirm (sign-up only) -->
+                      <button type="button" class="eye-toggle variant-signup" aria-label="Show confirm password" [attr.aria-pressed]="showConfirmPassword" (click)="toggleConfirmPasswordVisibility()">
+                        <i class="fa-solid" [ngClass]="showConfirmPassword ? 'fa-eye' : 'fa-eye-slash'" aria-hidden="true"></i>
+                      </button>
+                    </div>
+                    <div *ngIf="capsLockOn" class="caps-lock-warning">Caps Lock is on</div>
+                    <small *ngIf="submitted && controlHasError('confirmPassword','required')" class="error">Confirm password is required.</small>
+                    <small *ngIf="submitted && showPwdMismatch()" class="error">Passwords do not match.</small>
                   </div>
                 </div>
-                <div class="form-checkbox">
-                  <input type="checkbox" id="terms" formControlName="terms" />
-                  <label for="terms">Creating your account and you accepting <a href="#">Terms & Conditions.</a></label>
-                </div>
-                <div *ngIf="submitted && !form.get('terms')?.value" class="terms-info">
-                  Please accept Terms &amp; Conditions.
+ 
+                <!--2FA opt-in and method selection -->
+                <div class="form-row">
+                  <div class="form-field twofa-field">
+                    <!-- single row: checkbox + methods -->
+                    <div class="twofa-row">
+                      <div class="form-checkbox twofa-checkbox">
+                        <input type="checkbox" id="twoFAOptIn" formControlName="twoFAOptIn" />
+                        <label for="twoFAOptIn">Enable Two-Factor Authentication (2FA)</label>
+                      </div>
+ 
+                      <div *ngIf="form.get('twoFAOptIn')?.value" class="twofa-methods">
+                        <label class="inline-control plain-control"><input type="radio" formControlName="twoFAMethod" value="email" /> Email</label>
+                        <label class="inline-control plain-control"><input type="radio" formControlName="twoFAMethod" value="sms" /> SMS</label>
+                      </div>
+                    </div>
+ 
+                    <!-- Email-specific display: show account email (plain text) -->
+                    <div *ngIf="form.get('twoFAOptIn')?.value && form.get('twoFAMethod')?.value === 'email'" class="twofa-email-display">
+                      <label class="twofa-email-label">2FA will be sent to</label>
+                      <div class="twofa-email-value">{{ form.get('email')?.value || '—' }}</div>
+                    </div>
+ 
+                    <!-- SMS-specific input -->
+                    <div *ngIf="form.get('twoFAOptIn')?.value && form.get('twoFAMethod')?.value === 'sms'" class="twofa-sms-options">
+                      <label for="twoFAPhone">Phone number for SMS2FA</label>
+                      <input id="twoFAPhone" type="tel" placeholder="+1234567890" formControlName="twoFAPhone" (input)="formatPhone($event)" inputmode="tel" autocomplete="tel" [class.input-invalid]="submitted && form.get('twoFAPhone')?.invalid" />
+                      <small *ngIf="submitted && form.get('twoFAPhone')?.invalid" class="error">Enter a valid phone number for SMS 2FA.</small>
+                    </div>
+ 
+                    <small *ngIf="twoFAError" class="error twofa-error">{{ twoFAError }}</small>
+                  </div>
                 </div>
-                <button class="create-btn ai-pulse" type="submit" [disabled]="loading">
+ 
+                <!-- reCAPTCHA -->
+                <div id="recaptcha-container" class="recaptcha-container"></div>
+                <small *ngIf="recaptchaError" class="error">{{ recaptchaError }}</small>
+ 
+                <!-- Submit -->
+                <button class="create-btn ai-pulse" type="submit" [disabled]="loading || !isFormFilled()">
                   <ng-container *ngIf="!loading; else creatingAccount">
-                    Create Account
+                  Create Account
                   </ng-container>
                   <ng-template #creatingAccount>
-                    <span class="spinner"></span> Creating Account...
+                  <span class="spinner"></span> Creating Account...
                   </ng-template>
                 </button>
+                </form>
+ 
+              <!-- Terms & Privacy moved outside form group, aligned with2FA -->
+              <div [formGroup]="form">
+              <div class="form-checkbox">
+                <input type="checkbox" id="terms" formControlName="terms" />
+                <label for="terms">Agree to our <a href="/legal/terms" target="_blank" rel="_noopener noreferrer">Terms &amp; Conditions</a> and <a href="/legal/privacy" target="_blank" rel="_noopener noreferrer">Privacy Policy</a>.</label>
+              </div>
+              </div>
 
-
-                <!-- Google Sign-In button -->
-                <div class="google-signup-row">
-                  <div id="google-signup-btn-div">
-                    <div class="g-signin2" data-width="240" data-height="50" data-longtitle="true"></div>
-                  </div>
+              <!-- Google Sign-In button -->
+              <div class="google-signup-row">
+                <div id="google-signup-btn-div">
+                  <div class="g-signin2" data-width="240" data-height="50" data-longtitle="true"></div>
                 </div>
-
-                <div class="create-footer"><b>© Pykara Technologies, 2025. All rights reserved.</b></div>
-              </form>
+              </div>
+ 
+              <div class="create-footer"><b>Version1.0.0 | © Pykara Technologies</b></div>
             </div>
           </div>
         </div>
@@ -117,15 +171,14 @@
   <div class="role-help-overlay" *ngIf="showRoleInfo" (click)="hideRoleInfo()">
     <div class="role-help-modal" role="dialog" aria-label="Role descriptions" (click)="$event.stopPropagation()">
       <button type="button" class="role-help-close" aria-label="Close role info" (click)="hideRoleInfo()">×</button>
-      <h3 class="role-help-title">Choose the right role</h3>
+      <h3 class="role-help-title">Role Information</h3>
       <ul class="role-help-list">
-        <li><strong>Admin:</strong> Full control: users, roles, system settings.</li>
-        <li><strong>Teachers:</strong> Run assessments / training evaluations.</li>
-        <li><strong>Lawyers:</strong> Review analytics for case & witness prep.</li>
-        <li><strong>Investigators:</strong> Conduct interviews and capture signals.</li>
-        <li><strong>Others:</strong> General or limited access usage.</li>
+        <li><strong>Law Enforcement</strong><br/>Investigator, Supervisor — for users handling case investigation, interviews, evidence review, and workflow supervision. These roles may require admin approval or identity verification.</li>
+        <li><strong>Legal</strong><br/>Lawyer — for legal professionals involved in reviewing case summaries, preparing legal notes, analyzing evidence, or assisting in compliance processes.</li>
+        <li><strong>Administration</strong><br/>Admin — for users who manage system settings, user access, roles, case assignments, and overall application operations.</li>
+        <li><strong>General Access</strong><br/>Other — for users who require limited or basic access, such as support staff, trainees, or external collaborators.</li>
       </ul>
-      <p class="role-help-tip">Not sure? Select Others; an Admin can upgrade your role later.</p>
+      <p class="role-help-tip">If you are not sure which role to choose, select <strong>Other</strong>, or contact: <a href="mailto:support@pykara.ai">support@pykara.ai</a></p>
     </div>
   </div>
 
@@ -134,20 +187,16 @@
     <div class="info-popup">
       <button class="info-close" type="button" (click)="showInfo = false">&times;</button>
       <div class="info-title">Role Information</div>
+
       <div class="info-text">
         <ul>
-          <li><strong>Admin:</strong> Full control: users, roles, system settings.</li>
-          <li><strong>Teachers:</strong> Run assessments / training evaluations.</li>
-          <li><strong>Lawyers:</strong> Review analytics for case & witness prep.</li>
-          <li><strong>Investigators:</strong> Conduct interviews and capture signals.</li>
-          <li><strong>Others:</strong> General or limited access usage.</li>
+          <li><strong>Law Enforcement</strong><br/>Investigator, Supervisor — for users handling case investigation, interviews, evidence review, and workflow supervision. These roles may require admin approval or identity verification.</li>
+          <li><strong>Legal</strong><br/>Lawyer — for legal professionals involved in reviewing case summaries, preparing legal notes, analyzing evidence, or assisting in compliance processes.</li>
+          <li><strong>Administration</strong><br/>Admin — for users who manage system settings, user access, roles, case assignments, and overall application operations.</li>
+          <li><strong>General Access</strong><br/>Other — for users who require limited or basic access, such as support staff, trainees, or external collaborators.</li>
         </ul>
-        <p>Not sure? Select Others; an Admin can upgrade your role later.</p>
+        <p>If you are not sure which role to choose, select <strong>Other</strong>, or contact: <a href="mailto:info@pykara.ai">info@pykara.ai</a></p>
       </div>
     </div>
   </div>
 
-
-
-
-

src/app/homepage/sign-up/sign-up.component.ts

@@ -1,267 +1,612 @@
-
-import { Component, Output, EventEmitter, ChangeDetectorRef, Input, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
-import { SignUpService } from './sign-up.service';  // Import the SignUpService
+import { SignUpService } from './sign-up.service'; // Import the SignUpService
 import { AuthService } from '../../auth.service';
 import { trigger, transition, style, animate } from '@angular/animations';
+import { ChangeDetectorRef, Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { EyeToggleComponent } from '../../shared/eye-toggle/eye-toggle.component';
+import { Subscription } from 'rxjs';
+
+// allow grecaptcha global variable
+declare global {
+ interface Window { grecaptcha: any; }
+}
+declare const grecaptcha: any;
 
 export function nameValidator(control: AbstractControl): ValidationErrors | null {
-  const value = control.value || '';
-  // Only allow alphabets and spaces, min2 chars
-  if (!/^[A-Za-z ]{2,}$/.test(value)) {
-    return { invalidName: true };
-  }
-  return null;
+ const value = control.value || '';
+ // Only allow alphabets and spaces, min2 chars
+ if (!/^[A-Za-z ]{2,}$/.test(value)) {
+ return { invalidName: true };
+ }
+ return null;
 }
 
 @Component({
-  selector: 'app-sign-up',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterLink],
-  templateUrl: './sign-up.component.html',
-  styleUrls: ['./sign-up.component.css'],
-  animations: [
-    trigger('fadeInOut', [
-      transition(':enter', [
-        style({ opacity:0 }),
-        animate('600ms', style({ opacity:1 }))
-      ]),
-      transition(':leave', [
-        animate('600ms', style({ opacity:0 }))
-      ])
-    ])
-  ]
+ selector: 'app-sign-up',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule, RouterLink, EyeToggleComponent],
+ templateUrl: './sign-up.component.html',
+ styleUrls: ['./sign-up.component.css'],
+ animations: [
+ trigger('fadeInOut', [
+ transition(':enter', [
+ style({ opacity:0 }),
+ animate('600ms', style({ opacity:1 }))
+ ]),
+ transition(':leave', [
+ animate('600ms', style({ opacity:0 }))
+ ])
+ ])
+ ]
 })
 export class SignUpComponent implements OnInit, OnDestroy {
-  @Input() embedded = false; // when true, render only inner panel (for embedding in auth-card)
-  @Output() switchToSignIn = new EventEmitter<void>();
-  form: FormGroup;
-  private isSubmitting = false;
-
-  // Role info popover logic preserved
-  showRoleInfo = false;
-  toggleRoleInfo(ev?: Event) { ev?.stopPropagation(); this.showRoleInfo = !this.showRoleInfo; }
-  hideRoleInfo() { this.showRoleInfo = false; }
-
-  @Output() close = new EventEmitter<void>();
-
-  showPassword = false;
-  showConfirmPassword = false;
-  errorMessage = '';
-
-  isSignUpActive = true; // ← Added state for sign-up panel activation
-  public loading = false; // Used to disable the button during sign-up
-  submitted = false; // Track form submission status
-
-  // Added: terms & conditions error handling
-  termsError: string = '';
-
-  facts: string[] = [
-    '🧠 Py-Detect AI analyzes tone, emotion, and consistency.',
-    '🎥 Supports video and audio interrogation analysis.',
-    '📊 Generates instant investigation summary reports.'
-  ];
-  currentFact: string = this.facts[0];
-  private factIndex =0;
-  private factInterval: any;
-
-  showInfo = false;
-
-  constructor(
-    private fb: FormBuilder,
-    private router: Router,
-    private signUpService: SignUpService,
-    private cdr: ChangeDetectorRef
-  ) {
-    this.form = this.fb.group({
-      name: ['', [Validators.required, Validators.minLength(2), nameValidator]],
-      lastName: ['', [Validators.required, Validators.minLength(2), nameValidator]],
-      email: ['', [
-        Validators.required,
-        Validators.pattern(/(^[^@]+@[^@]+\.[^@]+$)|(^\+?\d[\d\-\s]{8,14}\d$)/)
-      ]],
-      password: ['', [Validators.required, Validators.minLength(8), passwordPolicyValidator]],
-      confirmPassword: ['', [Validators.required]],
-      role: ['', [Validators.required]],
-      terms: [false, Validators.requiredTrue] // Added terms control with requiredTrue validator
-    }, { validators: [this.passwordsMatchValidator] });
-
-    // Close popover when clicking anywhere in document (capture phase not needed here)
-    document.addEventListener('click', () => this.hideRoleInfo());
-  }
-
-  ngOnInit() {
-    this.startFactRotation();
-  }
-
-  ngOnDestroy() {
-    if (this.factInterval) {
-      clearInterval(this.factInterval);
-    }
-  }
-
-  startFactRotation() {
-    this.factInterval = setInterval(() => {
-      this.factIndex = (this.factIndex +1) % this.facts.length;
-      this.currentFact = this.facts[this.factIndex];
-    },5000);
-  }
-
-  control(path: string): AbstractControl | null { return this.form.get(path); }
-
-  controlHasError(path: string, error?: string): boolean {
-    const c = this.control(path);
-    if (!c) return false;
-    return error ? !!(c.touched && c.errors?.[error]) : !!(c.touched && c.invalid);
-  }
-
-  showPwdMismatch(): boolean {
-    const pw = this.control('password');
-    const cpw = this.control('confirmPassword');
-    const groupMismatch = this.form.errors?.['passwordMismatch'];
-    return !!(pw && cpw && (cpw.touched || pw.touched) && groupMismatch);
-  }
-
-  passwordsMatchValidator(group: AbstractControl) {
-    const pw = group.get('password')?.value;
-    const cpw = group.get('confirmPassword')?.value;
-    return pw && cpw && pw === cpw ? null : { passwordMismatch: true };
-  }
-
-  togglePasswordVisibility() {
-    this.showPassword = !this.showPassword;
-  }
-  toggleConfirmPasswordVisibility() {
-    this.showConfirmPassword = !this.showConfirmPassword;
-  }
-
-  submit() {
-    // Confirm button click
-    alert("Sign-Up button clicked!");
-    console.log("Sign-Up button clicked!");
-
-    this.submitted = true; // Track the form submission attempt
-
-    // Mark all form controls as touched to trigger validation
-    this.form.markAllAsTouched();
-
-    // Check if the form is invalid
-    if (this.form.invalid) {
-      console.log("Form is invalid:");
-
-      // Log individual control states for debugging
-      Object.keys(this.form.controls).forEach(controlName => {
-        const control = this.form.get(controlName);
-        if (control?.invalid) {
-          console.log(`${controlName} is invalid. Errors:`, control?.errors);
-        }
-      });
-      return;
-    }
-
-    // Check terms & conditions acceptance
-    if (!this.form.get('terms')?.value) {
-      this.termsError = 'Please accept Terms & Conditions.';
-      return;
-    }
-    this.termsError = '';
-
-    this.loading = true; // Set loading to true when starting submission
-    try {
-      // Prepare the payload to send to the backend
-      const payload = {
-        name: this.control('name')?.value,
-        lastName: this.control('lastName')?.value,
-        email: this.control('email')?.value,
-        password: this.control('password')?.value,
-        role: this.control('role')?.value
-      };
-
-      console.log("Form data before submission:", this.form.value);
-      console.log("Payload to send:", payload);
-
-      // Make the HTTP request
-      this.signUpService.signUp(payload).subscribe(
-        (response) => {
-          this.errorMessage = '';
-          console.log("Sign-up request sent successfully!");
-          this.loading = false; // Reset loading on success
-          // Wait for loader to finish, then navigate
-          setTimeout(() => {
-            this.router.navigate(['/auth/signin']);
-          }, 500);
-        },
-        (error) => {
-          if (error && error.status === 400) {
-            this.errorMessage = 'This email or username is already registered.';
-          } else {
-            this.errorMessage = 'An error occurred. Please try again.';
-          }
-          this.loading = false; // Reset loading on error
-          this.cdr.markForCheck();
-          setTimeout(() => {
-            this.errorMessage = '';
-            this.cdr.markForCheck();
-          }, 3000);
-        }
-      );
-    } catch (error) {
-      console.error("Error occurred during sign-up:", error); // Log any errors from the API call
-      this.loading = false; // Reset loading on exception
-    }
-  }
-
-  navigateHome() { this.router.navigateByUrl('/'); }
-
-  goToLogin() {
-    this.switchToSignIn.emit(); // ← Emit event instead of router navigation
-  }
-
-  closePopup() {
-    try {
-      // dispatch a global event so parent or other listeners always can close modals
-      window.dispatchEvent(new CustomEvent('auth-close'));
-    } catch (e) {
-      // ignore
-    }
-
-    this.close.emit();
-    // Defensive: remove modal/backdrop if parent didn't hide them
-    try {
-      const modal = document.querySelector('.modal');
-      if (modal && modal.parentElement) modal.parentElement.removeChild(modal);
-      const backdrop = document.querySelector('.modal-backdrop');
-      if (backdrop && backdrop.parentElement) backdrop.parentElement.removeChild(backdrop);
-    } catch (e) {
-      console.warn('Failed to remove modal/backdrop DOM elements', e);
-    }
-    // Ensure change detection updates
-    this.cdr.markForCheck();
-  }
-
-  tr(key: string): string {
-    const map: Record<string, string> = { title: 'Create your account', subtitle: 'Join to continue' };
-    return map[key] || '';
-  }
-
-  goToSignIn() {
-    // Emit to parent when embedded so the card can slide back
-    this.switchToSignIn.emit();
-  }
-
-  goToSignUp() {
-    // no-op when embedded
-  }
+ @Input() embedded = false; // when true, render only inner panel (for embedding in auth-card)
+ @Input() cardState?: 'signup' | 'signin';
+ @Output() switchToSignIn = new EventEmitter<void>();
+ form: FormGroup;
+ private isSubmitting = false;
+
+ // Role info popover logic preserved
+ showRoleInfo = false;
+ toggleRoleInfo(ev?: Event) { ev?.stopPropagation(); this.showRoleInfo = !this.showRoleInfo; }
+ hideRoleInfo() { this.showRoleInfo = false; }
+
+ @Output() close = new EventEmitter<void>();
+
+ showPassword = false;
+ showConfirmPassword = false;
+ errorMessage = '';
+
+ isSignUpActive = true; //  Added state for sign-up panel activation
+ public loading = false; // Used to disable the button during sign-up
+ submitted = false; // Track form submission status
+ // Explicit flag to drive mismatch UI (set on submit)
+ public pwdMismatch: boolean = false;
+
+ // Added: terms & conditions error handling
+ termsError: string = '';
+ twoFAError: string = ''; // validation message for2FA
+
+ // reCAPTCHA
+ private recaptchaSiteKey = 'YOUR_RECAPTCHA_SITE_KEY'; // <-- Replace with your real site key
+ private recaptchaWidgetId: number | null = null;
+ recaptchaError = '';
+
+ facts: string[] = [
+ '🧠 Py-Detect AI analyzes tone, emotion, and consistency.',
+ '🎥 Supports video and audio interrogation analysis.',
+ '📊 Generates instant investigation summary reports.'
+ ];
+ currentFact: string = this.facts[0];
+ private factIndex =0;
+ private factInterval: any;
+
+ showInfo = false;
+
+ // Caps Lock state
+ capsLockOn = false;
+
+ // Role grouping options
+ roleGroups = [
+ { key: 'lawenforcement', label: 'Law Enforcement', subs: [ { key: 'investigator', label: 'Investigator' }, { key: 'supervisor', label: 'Supervisor' } ] },
+ { key: 'legal', label: 'Legal', subs: [ { key: 'lawyer', label: 'Lawyer' } ] },
+ { key: 'adminothers', label: 'Admin & Others', subs: [ { key: 'admin', label: 'Admin' }, { key: 'other', label: 'Other' } ] }
+ ];
+
+ availableSubRoles: Array<{key:string,label:string}> = [];
+
+ // subscriptions for2FA opt-in/method/phone changes
+ private twoFASubscriptions: Subscription[] = [];
+ private savedTwoFAMethod: string | null = null;
+ private savedTwoFAPhone: string | null = null;
+
+ // Additional property to track form enable state
+ public canEnable: boolean = false;
+ private formSubscription?: Subscription;
+
+ constructor(
+ private fb: FormBuilder,
+ private router: Router,
+ private signUpService: SignUpService,
+ private cdr: ChangeDetectorRef
+ ) {
+ this.form = this.fb.group({
+ name: ['', [Validators.required, Validators.minLength(2), nameValidator]],
+ lastName: ['', [Validators.required, Validators.minLength(2), nameValidator]],
+ email: ['', [
+ Validators.required,
+ Validators.pattern(/(^[^@]+@[^@]+\.[^@]+$)|(^\+?\d[\d\-\s]{8,14}\d$)/)
+ ]],
+ password: ['', [Validators.required, Validators.minLength(8), passwordPolicyValidator]],
+ confirmPassword: ['', [Validators.required]],
+ roleGroup: ['', [Validators.required]],
+ role: ['', [Validators.required]],
+ terms: [false, Validators.requiredTrue], // Added terms control with requiredTrue validator
+ // reCAPTCHA token
+ // recaptcha: ['', [Validators.required]],
+
+ //2FA controls
+ twoFAOptIn: [false],
+ twoFAMethod: [''], // 'email' or 'sms'
+ twoFAUseSameEmail: [true],
+ twoFAAltEmail: ['', [Validators.pattern(/^[^@]+@[^@]+\.[^@]+$/)]],
+ twoFAPhone: ['', [Validators.pattern(/^\+?\d[\d\-\s]{8,14}\d$/)]]
+
+ }, { validators: [this.passwordsMatchValidator] });
+
+ // Close popover when clicking anywhere in document (capture phase not needed here)
+ document.addEventListener('click', () => this.hideRoleInfo());
+ }
+
+ ngOnInit() {
+ this.startFactRotation();
+ this.loadRecaptcha();
+
+ // update initial canEnable state
+ this.canEnable = this.isFormFilled();
+
+ // keep canEnable updated whenever form values change
+ this.formSubscription = this.form.valueChanges.subscribe(() => {
+ this.canEnable = this.isFormFilled();
+ // debug log to help diagnose why button remains disabled
+ // eslint-disable-next-line no-console
+ console.log('form value changed, isFormFilled=', this.canEnable, 'form values:', this.form.value);
+ try { this.cdr.detectChanges(); } catch (e) { /* ignore */ }
+ // Do NOT compute pwdMismatch here; only compute on submit so crosses appear after clicking Create Account
+ });
+
+ // Persist2FA selection when toggling opt-in
+ const optInCtrl = this.form.get('twoFAOptIn');
+ const methodCtrl = this.form.get('twoFAMethod');
+ const phoneCtrl = this.form.get('twoFAPhone');
+
+ if (optInCtrl) {
+ const sub = optInCtrl.valueChanges.subscribe((val: boolean) => {
+ if (!val) {
+ // save current selections when user unchecks
+ this.savedTwoFAMethod = methodCtrl?.value || null;
+ this.savedTwoFAPhone = phoneCtrl?.value || null;
+ } else {
+ // restore previous selections when user re-checks
+ if (this.savedTwoFAMethod) {
+ methodCtrl?.setValue(this.savedTwoFAMethod, { emitEvent: false });
+ }
+ if (this.savedTwoFAPhone) {
+ phoneCtrl?.setValue(this.savedTwoFAPhone, { emitEvent: false });
+ }
+ }
+ });
+ this.twoFASubscriptions.push(sub);
+ }
+
+ if (this.form.get('twoFAMethod')) {
+ const sub2 = this.form.get('twoFAMethod')!.valueChanges.subscribe((m: string) => {
+ // update saved value whenever user changes method while visible
+ this.savedTwoFAMethod = m || this.savedTwoFAMethod;
+ });
+ this.twoFASubscriptions.push(sub2);
+ }
+
+ if (this.form.get('twoFAPhone')) {
+ const sub3 = this.form.get('twoFAPhone')!.valueChanges.subscribe((p: string) => {
+ this.savedTwoFAPhone = p || this.savedTwoFAPhone;
+ });
+ this.twoFASubscriptions.push(sub3);
+ }
+ }
+
+ ngOnDestroy() {
+ if (this.factInterval) {
+ clearInterval(this.factInterval);
+ }
+ // cleanup subscriptions
+ this.twoFASubscriptions.forEach(s => s.unsubscribe());
+ if (this.formSubscription) {
+ this.formSubscription.unsubscribe();
+ }
+ }
+
+ private loadRecaptcha() {
+ // Don't attempt to load if no site key configured
+ if (!this.recaptchaSiteKey || this.recaptchaSiteKey === 'YOUR_RECAPTCHA_SITE_KEY') {
+ // skip loading but keep control present so dev can replace key
+ console.warn('reCAPTCHA site key not configured. Please replace recaptchaSiteKey with your site key.');
+ return;
+ }
+
+ const existing = document.querySelector('script[src*="recaptcha/api.js"]');
+ const renderWhenReady = () => {
+ try {
+ // render explicit
+ this.recaptchaWidgetId = window.grecaptcha.render('recaptcha-container', {
+ sitekey: this.recaptchaSiteKey,
+ callback: (token: string) => this.onRecaptchaSuccess(token),
+ 'expired-callback': () => this.onRecaptchaExpired()
+ });
+ } catch (e) {
+ console.error('Failed to render grecaptcha', e);
+ }
+ };
+
+ if (existing) {
+ if (window.grecaptcha && window.grecaptcha.render) {
+ renderWhenReady();
+ } else {
+ // wait for onload
+ existing.addEventListener('load', renderWhenReady);
+ }
+ return;
+ }
+
+ const script = document.createElement('script');
+ script.src = 'https://www.google.com/recaptcha/api.js?onload=__onRecaptchaLoadCallback&render=explicit';
+ script.async = true;
+ script.defer = true;
+ (window as any).__onRecaptchaLoadCallback = () => {
+ renderWhenReady();
+ };
+ document.head.appendChild(script);
+ }
+
+ onRecaptchaSuccess(token: string) {
+ this.form.get('recaptcha')?.setValue(token);
+ this.recaptchaError = '';
+ this.cdr.markForCheck();
+ }
+
+ onRecaptchaExpired() {
+ this.form.get('recaptcha')?.setValue('');
+ this.recaptchaError = 'reCAPTCHA expired. Please verify again.';
+ this.cdr.markForCheck();
+ }
+
+ resetRecaptcha() {
+ try {
+ if (window.grecaptcha && this.recaptchaWidgetId != null) {
+ window.grecaptcha.reset(this.recaptchaWidgetId);
+ }
+ this.form.get('recaptcha')?.setValue('');
+ this.cdr.markForCheck();
+ } catch (e) { /* ignore */ }
+ }
+
+ startFactRotation() {
+ this.factInterval = setInterval(() => {
+ this.factIndex = (this.factIndex +1) % this.facts.length;
+ this.currentFact = this.facts[this.factIndex];
+ },5000);
+ }
+
+ control(path: string): AbstractControl | null { return this.form.get(path); }
+
+ controlHasError(path: string, error?: string): boolean {
+ const c = this.control(path);
+ if (!c) return false;
+ // Only show validation state after the user has attempted submission
+ if (!this.submitted) return false;
+ return error ? !!(c.errors?.[error]) : !!(c.invalid);
+ }
+
+ showPwdMismatch(): boolean {
+ return !!this.pwdMismatch;
+ }
+
+ passwordsMatchValidator(group: AbstractControl) {
+ const pw = group.get('password')?.value;
+ const cpw = group.get('confirmPassword')?.value;
+ // don't mark mismatch unless both fields have a value
+ if (!pw || !cpw) return null;
+ return pw === cpw ? null : { passwordMismatch: true };
+ }
+
+ togglePasswordVisibility() {
+ this.showPassword = !this.showPassword;
+ }
+ toggleConfirmPasswordVisibility() {
+ this.showConfirmPassword = !this.showConfirmPassword;
+ }
+
+ invalidFieldsMessage: string = ''; // ARIA live message for screen reader
+
+ submit() {
+ // Confirm button click
+ this.submitted = true; // Track the form submission attempt
+
+ // Mark all form controls as touched to trigger validation
+ this.form.markAllAsTouched();
+ // Ensure validators (including group validator) run so form.errors is populated
+ this.form.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+ // Trigger change detection so template picks up updated form errors immediately
+ try { this.cdr.detectChanges(); } catch (e) { this.cdr.markForCheck(); }
+
+ // Ensure the group validator ran and update the pwdMismatch flag used by template bindings
+ try { this.cdr.detectChanges(); } catch (e) { this.cdr.markForCheck(); }
+ // update pwdMismatch from the form-level validator result so existing template bindings work
+ this.pwdMismatch = !!this.form.hasError('passwordMismatch');
+ // Debug logs to verify validation state
+ // eslint-disable-next-line no-console
+ console.log('submit: form.errors=', this.form.errors, 'pwdMismatch=', this.pwdMismatch);
+ // eslint-disable-next-line no-console
+ console.log('submit: email.errors=', this.form.get('email')?.errors, 'email.invalid=', this.form.get('email')?.invalid);
+
+ // Build invalid fields message for screen readers
+ const missing: string[] = [];
+ const checks: Array<[string, string]> = [ ['name','First name'], ['lastName','Last name'], ['email','Email'], ['roleGroup','Role'], ['password','Password'], ['confirmPassword','Confirm password'] ];
+ for (const [k,label] of checks) {
+ if (this.form.get(k)?.invalid) missing.push(label);
+ }
+ if (this.form.get('twoFAOptIn')?.value && this.form.get('twoFAMethod')?.value === 'sms') {
+ if (this.form.get('twoFAPhone')?.invalid) missing.push('2FA phone');
+ }
+ if (!this.form.get('terms')?.value) missing.push('Terms and Privacy');
+ this.invalidFieldsMessage = missing.length ? 'Please correct the following fields: ' + missing.join(', ') : '';
+
+ // Check if the form is invalid
+ if (this.form.invalid) {
+ return;
+ }
+
+ // Check terms & conditions acceptance
+ if (!this.form.get('terms')?.value) {
+ this.termsError = 'Please accept Terms & Conditions.';
+ return;
+ }
+ this.termsError = '';
+
+ // Additional2FA validation if opted-in
+ this.twoFAError = '';
+ if (this.form.get('twoFAOptIn')?.value) {
+ const method = this.form.get('twoFAMethod')?.value;
+ if (!method) {
+ this.twoFAError = 'Please select a2FA method (Email or SMS).';
+ return;
+ }
+ if (method === 'email') {
+ const useSame = this.form.get('twoFAUseSameEmail')?.value;
+ if (!useSame) {
+ const alt = this.form.get('twoFAAltEmail');
+ if (!alt || alt.invalid) {
+ this.twoFAError = 'Please provide a valid alternate email for2FA.';
+ return;
+ }
+ }
+ }
+ if (method === 'sms') {
+ const phone = this.form.get('twoFAPhone');
+ if (!phone || phone.invalid) {
+ this.twoFAError = 'Please provide a valid phone number for SMS2FA.';
+ return;
+ }
+ }
+ }
+
+ // recaptcha check
+ // if (!this.form.get('recaptcha')?.value) {
+ // this.recaptchaError = 'Please verify that you are not a robot.';
+ // }
+
+ // if (this.form.invalid || this.recaptchaError) {
+ if (this.form.invalid) {
+ return;
+ }
+
+ this.loading = true; // Set loading to true when starting submission
+ try {
+ // Prepare the payload to send to the backend
+ const payload: any = {
+ name: this.control('name')?.value,
+ lastName: this.control('lastName')?.value,
+ email: this.control('email')?.value,
+ password: this.control('password')?.value,
+ role: this.control('role')?.value
+ };
+
+ // Include2FA settings when opted-in
+ if (this.form.get('twoFAOptIn')?.value) {
+ payload.twoFAEnabled = true;
+ payload.twoFAMethod = this.form.get('twoFAMethod')?.value;
+ if (payload.twoFAMethod === 'email') {
+ payload.twoFAContact = this.form.get('twoFAUseSameEmail')?.value ? payload.email : this.form.get('twoFAAltEmail')?.value;
+ } else if (payload.twoFAMethod === 'sms') {
+ payload.twoFAContact = this.form.get('twoFAPhone')?.value;
+ }
+ } else {
+ payload.twoFAEnabled = false;
+ }
+
+ // Make the HTTP request
+ this.signUpService.signUp(payload).subscribe(
+ (response) => {
+ this.errorMessage = '';
+ console.log("Sign-up request sent successfully!");
+ this.loading = false; // Reset loading on success
+ // Wait for loader to finish, then navigate
+ setTimeout(() => {
+ this.switchToSignIn.emit();
+ },500);
+ },
+ (error) => {
+ // If backend indicates duplicate email/user, set a specific error on the email control
+ const emailCtrl = this.form.get('email');
+ if (error && (error.status ===409 || error.status ===400)) {
+ this.errorMessage = 'Email already exists!';
+ // set reactive form error on email so template can render inline message
+ if (emailCtrl) {
+ const currentErrors = emailCtrl.errors || {};
+ emailCtrl.setErrors({ ...currentErrors, emailExists: true });
+ }
+ } else {
+ this.errorMessage = 'An error occurred. Please try again.';
+ }
+ this.loading = false; // Reset loading on error
+ this.cdr.markForCheck();
+ // keep the error visible briefly
+ setTimeout(() => {
+ this.errorMessage = '';
+ this.cdr.markForCheck();
+ },3000);
+ }
+ );
+ } catch (error) {
+ console.error("Error occurred during sign-up:", error); // Log any errors from the API call
+ this.loading = false; // Reset loading on exception
+ }
+ }
+
+ navigateHome() { this.router.navigateByUrl('/'); }
+
+ goToLogin() {
+ this.switchToSignIn.emit(); // ← Emit event instead of router navigation
+ }
+
+ closePopup() {
+ try {
+ // dispatch a global event so parent or other listeners always can close modals
+ window.dispatchEvent(new CustomEvent('auth-close'));
+ } catch (e) {
+ // ignore
+ }
+
+ this.close.emit();
+ // Defensive: remove modal/backdrop if parent didn't hide them
+ try {
+ const modal = document.querySelector('.modal');
+ if (modal && modal.parentElement) modal.parentElement.removeChild(modal);
+ const backdrop = document.querySelector('.modal-backdrop');
+ if (backdrop && backdrop.parentElement) backdrop.parentElement.removeChild(backdrop);
+ } catch (e) {
+ console.warn('Failed to remove modal/backdrop DOM elements', e);
+ }
+ // Ensure change detection updates
+ this.cdr.markForCheck();
+ }
+
+ tr(key: string): string {
+ const map: Record<string, string> = { title: 'Create your account', subtitle: 'Join to continue' };
+ return map[key] || '';
+ }
+
+ goToSignIn() {
+ // Emit to parent when embedded so the card can slide back
+ this.switchToSignIn.emit();
+ }
+
+ goToSignUp() {
+ // no-op when embedded
+ }
+
+ onPasswordKey(event: KeyboardEvent) {
+ const caps = event.getModifierState && event.getModifierState('CapsLock');
+ this.capsLockOn = !!caps;
+ this.cdr.markForCheck();
+ }
+
+ // Called when user changes top-level role group
+ onRoleGroupChange(groupKey: string) {
+ const group = this.roleGroups.find(g => g.key === groupKey);
+ this.availableSubRoles = group ? group.subs : [];
+ // set the form's role to the selected group key so backend receives the grouping
+ this.form.get('role')?.setValue(groupKey);
+ this.cdr.markForCheck();
+ }
+
+ // Simple phone formatting: keep '+' then digits, group by spaces for readability
+ formatPhone(event: Event) {
+ const input = event.target as HTMLInputElement;
+ if (!input) return;
+ // strip non-digit except leading +
+ let v = input.value.trim();
+ const hasPlus = v.startsWith('+');
+ v = v.replace(/[^0-9]/g, '');
+ // group digits in blocks of3 for readability
+ const parts: string[] = [];
+ while (v.length) {
+ parts.push(v.substring(0,3));
+ v = v.substring(3);
+ }
+ input.value = (hasPlus ? '+' : '') + parts.join(' ');
+ // update reactive form control value without emitting extra events
+ const control = this.form.get('twoFAPhone');
+ if (control) {
+ control.setValue(input.value, { emitEvent: false });
+ }
+}
+
+ // Return true if all mandatory fields have a non-empty value (used to enable the Create Account button)
+ isFormFilled(): boolean {
+ try {
+ const req = ['name', 'lastName', 'email', 'password', 'confirmPassword', 'roleGroup'];
+ let allFilled = true;
+ for (const k of req) {
+ const v = (this.form.get(k)?.value || '').toString().trim();
+ if (!v) { allFilled = false; break; }
+ }
+ if (!allFilled) {
+ const domIds = { name: 'firstName', lastName: 'lastName', email: 'email', password: 'password', confirmPassword: 'confirmPassword', roleGroup: 'roleGroup' };
+ let domAll = true;
+ for (const k of Object.keys(domIds)) {
+ const el = document.getElementById((domIds as any)[k]) as HTMLInputElement | HTMLSelectElement | null;
+ if (!el) { domAll = false; break; }
+ const val = (el as HTMLInputElement).value || '';
+ if (!val.toString().trim()) { domAll = false; break; }
+ }
+ if (domAll) {
+ try {
+ this.form.get('name')?.setValue((document.getElementById('firstName') as HTMLInputElement).value, { emitEvent: false });
+ this.form.get('lastName')?.setValue((document.getElementById('lastName') as HTMLInputElement).value, { emitEvent: false });
+ this.form.get('email')?.setValue((document.getElementById('email') as HTMLInputElement).value, { emitEvent: false });
+ this.form.get('password')?.setValue((document.getElementById('password') as HTMLInputElement).value, { emitEvent: false });
+ this.form.get('confirmPassword')?.setValue((document.getElementById('confirmPassword') as HTMLInputElement).value, { emitEvent: false });
+ const rg = (document.getElementById('roleGroup') as HTMLSelectElement).value;
+ if (rg) this.form.get('roleGroup')?.setValue(rg, { emitEvent: false });
+ } catch (e) { }
+ allFilled = true;
+ }
+ }
+ if (!allFilled) return false;
+ const termsChecked = !!this.form.get('terms')?.value || !!(document.getElementById('terms') as HTMLInputElement)?.checked;
+ if (!termsChecked) return false;
+ const twoFAOptIn = !!this.form.get('twoFAOptIn')?.value;
+ if (twoFAOptIn) {
+ const method = (this.form.get('twoFAMethod')?.value || '').toString().trim();
+ if (!method) return false;
+ if (method === 'sms') {
+ const phoneVal = (this.form.get('twoFAPhone')?.value || '').toString().trim() || (document.getElementById('twoFAPhone') as HTMLInputElement)?.value || '';
+ if (!phoneVal.toString().trim()) return false;
+ }
+ }
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+
+ // Ensure we trigger change detection when controls change so template reevaluates the method
+ // (formSubscription added in ngOnInit keeps canEnable updated)
+
+ // Visual helpers used by the template
+ // Return true if the name contains any digits (show cross after submit)
+ public nameHasDigits(controlName: string): boolean {
+ if (!this.submitted) return false;
+ const v = (this.form.get(controlName)?.value || '').toString();
+ return /\d/.test(v);
+ }
+
+ // Return true when password mismatch should show the cross (after submit)
+ public passwordMismatchClass(): boolean {
+ return !!this.pwdMismatch;
+ }
 }
 
+// standalone validator follows
 function passwordPolicyValidator(control: AbstractControl): ValidationErrors | null {
-  const value = control.value || '';
-  // Policy: min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special char
-  const policy = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?]).{8,}$/;
-  if (!policy.test(value)) {
-    return { passwordPolicy: true };
-  }
-  return null;
+ const value = control.value || '';
+ // Policy: min8 chars,1 uppercase,1 lowercase,1 number,1 special char
+ const policy = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?]).{8,}$/;
+ if (!policy.test(value)) {
+ return { passwordPolicy: true };
+ }
+ return null;
 }

src/app/homepage/sign-up/sign-up.service.ts

@@ -1,16 +1,15 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { environment } from 'src/environments/environment';  // adjust path if needed
+import { HttpClient } from '@angular/common/http';  // Import HttpClient for API calls
+import { Observable } from 'rxjs';  // Import Observable for async handling
 
 @Injectable({
   providedIn: 'root'
 })
 export class SignUpService {
-  private apiUrl = environment.pyDetectApiUrl;
-
+  private apiUrl = 'http://127.0.0.1:5002';  // The base URL for your Flask backend
   constructor(private http: HttpClient) { }
 
+  // Method to sign up a user
   signUp(payload: any): Observable<any> {
     return this.http.post(`${this.apiUrl}/sign-up`, payload);
   }

src/app/legal/privacy.component.ts

@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-privacy',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+ <section style="padding:24px; max-width:900px; margin:32px auto; background:#fff; border-radius:8px; box-shadow:08px24px rgba(0,0,0,0.08);">
+ <h1>Privacy Policy</h1>
+ <p><strong>(For Py-Detect Application)</strong></p>
+
+ <h2>1. Introduction</h2>
+ <p>This Privacy Policy explains how Pykara Technologies collects, uses, stores, and protects your information when you use the PyDetect application. We respect your privacy and handle your data responsibly.</p>
+
+ <h2>2. Information We Collect</h2>
+ <h3>a. Personal Information</h3>
+ <ul>
+ <li>Name</li>
+ <li>Email address</li>
+ <li>Profile details (role, department)</li>
+ <li>Login activity</li>
+ </ul>
+
+ <h3>b. Case-Related Information</h3>
+ <ul>
+ <li>Crime details</li>
+ <li>Suspect details</li>
+ <li>Evidence</li>
+ <li>Notes and reports</li>
+ </ul>
+
+ <h3>c. Audio & Video Data</h3>
+ <ul>
+ <li>Voice recordings</li>
+ <li>Video recordings</li>
+ <li>Body-language metrics</li>
+ <li>AI analysis summaries</li>
+ </ul>
+
+ <h3>d. Technical Data</h3>
+ <ul>
+ <li>IP address</li>
+ <li>Browser details</li>
+ <li>Device details</li>
+ <li>Log files</li>
+ <li>Activity history</li>
+ </ul>
+
+ <h2>3. How We Use Your Data</h2>
+ <p>We use the collected data to: create and manage user accounts, provide investigation features, generate AI-based analysis, improve system accuracy, maintain security, prevent unauthorized access, and respond to support requests. We do not sell or rent your data to third parties.</p>
+
+ <h2>4. Legal Basis for Data Processing</h2>
+ <p>We process your data based on user consent, contractual need, legal obligations, and security and fraud-prevention.</p>
+
+ <h2>5. Sharing of Information</h2>
+ <p>We may share data only with authorized users (based on role), internal team members for support, and legal authorities if required by law. We never share your data for marketing purposes.</p>
+
+ <h2>6. Data Storage and Security</h2>
+ <p>We use secure methods to store your data, including encrypted databases, restricted access, secure servers, and regular audits. Audio and video data may be stored in cloud storage with encryption.</p>
+
+ <h2>7. Data Retention</h2>
+ <p>We keep your data for as long as required for active investigations, legal compliance, and system analysis. After that, data may be archived or deleted securely.</p>
+
+ <h2>8. Your Rights</h2>
+ <p>Depending on your region (India/UK/EU/US), you may have rights including access, correction, deletion, restriction, and withdrawal of consent. Send requests to <a href="mailto:support@pykara.ai">support@pykara.ai</a>.</p>
+
+ <h2>9. Cookies</h2>
+ <p>The application may use cookies for login sessions, security, and preferences. You may disable cookies, but some features may not work.</p>
+
+ <h2>10. Changes to This Policy</h2>
+ <p>We may update this Privacy Policy from time to time. The updated version will be available on our website.</p>
+
+ <h2>11. Contact Information</h2>
+ <p>For questions or privacy concerns: <a href="mailto:info@pykara.ai">info@pykara.ai</a></p>
+ <p>Company: Pykara Technologies</p>
+ </section>
+ `
+})
+export class PrivacyComponent {}

src/app/legal/terms.component.ts

@@ -0,0 +1,94 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-terms',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+ <section style="padding:24px; max-width:900px; margin:32px auto; background:#fff; border-radius:8px; box-shadow:08px24px rgba(0,0,0,0.08);">
+ <h1>Terms & Conditions (T&C)</h1>
+ <p><strong>(For Py-Detect Application)</strong></p>
+
+ <h2>1. Introduction</h2>
+ <p>Welcome to Py-Detect, a platform developed by Pykara Technologies. By creating an account or using our application, you agree to follow the terms explained here.</p>
+ <p>If you do not agree with any part of these terms, please do not use this application.</p>
+
+ <h2>2. Eligibility</h2>
+ <p>You must:</p>
+ <ul>
+ <li>Be at least18 years old</li>
+ <li>Provide accurate information</li>
+ <li>Use the application only for lawful activities</li>
+ </ul>
+ <p>Roles such as Admin, Investigator, Lawyer, and Supervisor may require approval from Pykara Technologies.</p>
+
+ <h2>3. User Responsibilities</h2>
+ <p>You agree to:</p>
+ <ul>
+ <li>Keep your login details safe</li>
+ <li>Use the application responsibly</li>
+ <li>Not misuse the platform in any way</li>
+ <li>Not attempt to damage, hack, or interfere with the system</li>
+ </ul>
+ <p>You are responsible for all activities that happen under your account.</p>
+
+ <h2>4. Prohibited Activities</h2>
+ <ul>
+ <li>Upload harmful, illegal, or misleading content</li>
+ <li>Reverse-engineer the application</li>
+ <li>Access data you are not authorized to view</li>
+ <li>Share confidential investigation data with unauthorized persons</li>
+ </ul>
+
+ <h2>5. Application Purpose</h2>
+ <p>PyDetect is designed to support:</p>
+ <ul>
+ <li>Data collection</li>
+ <li>Analytical processing</li>
+ <li>AI-based insights</li>
+ <li>Investigation workflows</li>
+ </ul>
+ <p>The AI outputs are for support purposes only and are not guaranteed to be100% accurate.</p>
+
+ <h2>6. Data Usage</h2>
+ <p>You allow us to process:</p>
+ <ul>
+ <li>Personal details</li>
+ <li>Case data</li>
+ <li>Audio/video recordings</li>
+ <li>Analytical results</li>
+ </ul>
+ <p>All processing will follow our Privacy Policy.</p>
+
+ <h2>7. Account Suspension & Termination</h2>
+ <p>Your account may be suspended or terminated if:</p>
+ <ul>
+ <li>You violate these terms</li>
+ <li>You misuse data</li>
+ <li>You attempt unauthorized access</li>
+ <li>You provide false information</li>
+ </ul>
+
+ <h2>8. Intellectual Property</h2>
+ <p>All code, design, texts, graphics, and features belong to Pykara Technologies. You are not allowed to copy, modify, or sell any part of the application.</p>
+
+ <h2>9. Limitation of Liability</h2>
+ <p>Pykara Technologies is not responsible for:</p>
+ <ul>
+ <li>Data loss caused by user actions</li>
+ <li>Incorrect interpretation of AI results</li>
+ <li>Operational delays due to internet or device issues</li>
+ <li>Any damage caused by misuse of the application</li>
+ </ul>
+
+ <h2>10. Changes to Terms</h2>
+ <p>We may update these Terms & Conditions at any time. Updated versions will be posted on our website.</p>
+
+ <h2>11. Contact Information</h2>
+ <p>For any concerns or questions: <a href="mailto:info@pykara.ai">info@pykara.ai</a></p>
+ <p>Company: Pykara Technologies</p>
+ </section>
+ `
+})
+export class TermsComponent {}

src/app/shared/eye-toggle/eye-toggle.component.css

@@ -0,0 +1,55 @@
+:root { --eye-size:28px; --eye-gap:10px; }
+
+/* Base button: neutral by default; variants handle positioning */
+.eye-toggle {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--eye-size);
+ height: var(--eye-size);
+ border-radius:6px;
+ border: none;
+ cursor: pointer;
+ color: inherit;
+ z-index:3; /* above input */
+ padding:0;
+ line-height:1;
+}
+
+.eye-toggle i { font-size:0.95rem; pointer-events:none; }
+.eye-toggle:focus { outline:2px solid rgba(29,233,182,0.12); outline-offset:2px; }
+
+/* Visual variants */
+.eye-toggle.variant-signin { background: rgba(255,255,255,0.06); color:#23395d; }
+.eye-toggle.variant-signup { background: rgba(0,0,0,0.04); color:#23395d; }
+
+/* Reserve input right padding when a toggle is present */
+.form-field.has-eye input,
+.signin-field.has-eye input { padding-right: calc(var(--eye-size) + var(--eye-gap) +6px); }
+
+/* Fallback when markup doesn't add .has-eye */
+.form-field:has(.eye-toggle) input,
+.signin-field:has(.eye-toggle) input { padding-right: calc(var(--eye-size) + var(--eye-gap) +6px); }
+
+/* Small screens */
+@media (max-width:700px) {
+ :root { --eye-size:24px; --eye-gap:8px; }
+ .eye-toggle { width: var(--eye-size); height: var(--eye-size); }
+}
+
+/* Separate positioning by context to avoid cross-page impact */
+/* Sign-in page context: position absolutely inside field */
+:host-context(.signin-popup) .eye-toggle.variant-signin {
+ position: absolute;
+ right:10px;
+ top:50%;
+ transform: translateY(-50%);
+}
+
+/* Sign-up page context (if used similarly), keep independent positioning */
+:host-context(.signup-popup) .eye-toggle.variant-signup {
+ position: absolute;
+ right:10px;
+ top:50%;
+ transform: translateY(-50%);
+}

src/app/shared/eye-toggle/eye-toggle.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-eye-toggle',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+ <button
+ type="button"
+ class="eye-toggle"
+ [class.variant-signin]="variant === 'signin'"
+ [class.variant-signup]="variant === 'signup'"
+ (click)="onToggle()"
+ [attr.aria-label]="pressed ? 'Hide password' : 'Show password'"
+ [attr.aria-pressed]="pressed"
+ >
+ <i [ngClass]="pressed ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'" aria-hidden="true"></i>
+ </button>
+ `,
+ styleUrls: ['./eye-toggle.component.css']
+})
+export class EyeToggleComponent {
+ @Input() pressed = false;
+ // new input variant: 'signin' | 'signup'
+ @Input() variant: 'signin' | 'signup' = 'signin';
+ @Output() toggle = new EventEmitter<void>();
+
+ onToggle() {
+ this.toggle.emit();
+ }
+}

src/environments/environment.ts

@@ -9,7 +9,7 @@ const isLocal =
 
 // Decide API URL based on where the app is running
 const pyDetectApiUrl = isLocal
-  ? 'http://127.0.0.1:5000'                        // your local Flask
+  ? 'http://127.0.0.1:5002'                        // your local Flask
   : 'https://pykara-Py-detect-backend.hf.space';   // Hugging Face backend
 
 export const environment = {

tsconfig.app.json

@@ -1,14 +1,15 @@
 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": [
-    "src/main.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/app",
+ "types": []
+ },
+ "include": [
+ "src/**/*.ts"
+ ],
+ "exclude": [
+ "src/test.ts",
+ "src/**/*.spec.ts"
+ ]
 }