homepage

src.zip

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

src/app/homepage/homepage.component.css

@@ -673,9 +673,42 @@ label {
 .card p { font-size: 16px; line-height: 1.6; color: #000; }
 
 /* Mission */
-.mission { background: transparent; color: #fff; padding: 60px 10%; text-align: center; }
-.mission-row { display: flex; justify-content: space-between; gap: 30px; margin-top: 20px; margin-left: 7vw; flex-wrap: wrap; }
-.mission-left, .mission-right { flex: 1; min-width: 300px; text-align: left; font-size: 16px; line-height: 1.6; color: #f0f4f8; }
+.mission { 
+ background: transparent; 
+ color: #fff; 
+ padding: 60px 10%; 
+ text-align: center; 
+ /* Ensure the mission section forms a centered block and prevents overflow */
+ box-sizing: border-box;
+}
+
+/* Center the mission row and keep content within the blue section */
+.mission-row { 
+ display: flex; 
+ justify-content: space-between; 
+ gap: 30px; 
+ margin-top: 20px; 
+ /* Remove the left offset which was pushing content outside */
+ margin-left: 0; 
+ /* Constrain width and center horizontally */
+ max-width: 1100px; 
+ margin-right: 36px; 
+ margin-left: auto; 
+ flex-wrap: wrap; 
+ box-sizing: border-box; 
+}
+
+.mission-left, .mission-right { 
+ flex: 1; 
+ min-width: 300px; 
+ text-align: left; 
+ font-size: 16px; 
+ line-height: 1.6; 
+ color: #f0f4f8; 
+ /* Add inner padding so text doesn't touch edges of blue card */
+ padding: 20px; 
+ box-sizing: border-box; 
+}
 
 /* Features */
 .features { padding: 60px 10%; background: #011329; color: #010207; }
@@ -683,7 +716,7 @@ label {
 .feature-row.reverse { flex-direction: row-reverse; }
 .feature-text { flex: 1 1 320px; padding: 20px; }
 .feature-text h2 { color: #c62828; margin-bottom: 15px; }
-.feature-text p { font-size: 20px; line-height: 1.6; }
+.feature-text p { font-size: 16px; line-height: 1.6; }
 .feature-image { flex: 1 1 320px; padding: 20px; }
 .feature-image img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,.2); }
 
@@ -873,10 +906,9 @@ footer .social-icons .si.ig:hover { filter:brightness(1.15); color:#fff; box-sha
 
 
   .how-to-use .section-title {
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
+    font-size: 28px;
+    color: #0d9de3; /* blue highlight */
+    margin-bottom: 10px;
   }
 
   .how-to-use .section-subtitle {
@@ -889,67 +921,42 @@ footer .social-icons .si.ig:hover { filter:brightness(1.15); color:#fff; box-sha
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: 30px;
+  gap: 25px;
+  line-height: 1.6;
 }
 
 .use-card {
   background: #fff;
   color: #000;
-  flex: 11 calc(25% - 30px);
-  min-width: 260px;
+  flex: 1 1 calc(20% - 20px); /* 5 cards in a row */
+  min-width: 220px;
   border-radius: 12px;
-  padding: 28px 24px;
+  padding: 25px 20px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   transition: transform 0.3s;
 }
 
-/* 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:nth-child(5) .icon {
-  font-size: 46px;
-  color: #5a35d6;
-}
-
-.use-card:nth-child(5) h3 {
-  font-size: 22px;
-  color: #5a35d6;
-  margin-top: 6px;
-}
-
-.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:hover {
+    transform: translateY(-6px);
+  }
 
-.use-card h3 {
-  font-size: 18px;
-  margin-bottom: 10px;
-  color: #3328c6;
-}
+  .use-card .icon {
+    font-size: 40px;
+    margin-bottom: 15px;
+    color: #3328c6; /* red accent */
+  }
 
-.use-card p {
-  font-size: 16px;
-  line-height: 1.5;
-  color: #000;
-}
+  .use-card h3 {
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: #3328c6;
+  }
 
-/* Hover lift */
-.use-card:hover {
-  transform: translateY(-6px);
-}
+  .use-card p {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #000;
+  }
 
 .social-icons {
   display: flex;
@@ -1303,7 +1310,7 @@ footer .social-icons {
 .auth-topright .auth-btn[data-tooltip]:focus-visible::after { opacity:1; transform: translateX(50%) translateY(0); }
 .hero .hero-cta {
   margin-top: 12px;
-  background: linear-gradient(90deg, #38bdf80%, #23272b100%);
+  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
   color: #18181b;
   border: none;
   border-radius: 999px;
@@ -1345,8 +1352,6 @@ footer .social-icons {
  width: min(1000px,92vw);
  height:380px;
  border-radius:24px;
- background: linear-gradient(180deg, rgba(7,16,28,0.95), rgba(5,12,22,0.95)); /* darker decorative layer */
- box-shadow:0 20px 60px rgba(2,6,23,0.45), inset 0 0 1px rgba(56,189,248,0.15);
  z-index:0; /* behind card content */
 }
 .how-it-works .section-title,
@@ -1380,32 +1385,54 @@ footer .social-icons {
 }
 
 /* How It Works: blue background card and2x3 grid */
-.how-wrapper { position: relative; max-width:1200px; margin:0 auto; padding:12px 12px 24px; }
+.how-wrapper { position: relative; max-width:7000px; 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-tiles {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  gap: 22px;
+  font-size: 16px;
+  line-height: 1.6;
+}
 .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;
+  height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .how-illustration i { font-size:62px; }
 .how-tile-title {
-  text-align: center;
+  text-align: left !important;
   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; }
+.how-divider {
+  height: 3px;
+  width: 81%;
+  margin: 8px auto 8px;
+  border-bottom: 2px dotted #3328c6;
+  margin-right: 84px;
+}
+.how-tile p, .how-tile ul {
+  text-align: left !important;
+  padding:0 18px 12px;
+  margin:0;
+  color:#333;
+}
+.how-tile ul { padding-left:24px; }
+
+/* Ensure illustration remains centered but not affecting text */
+.how-illustration { display:flex; align-items:center; justify-content:center; }
 
 @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; } }
@@ -1426,3 +1453,6 @@ footer .social-icons {
 
 
 
+
+
+

src/app/homepage/homepage.component.html

@@ -43,9 +43,6 @@
  <a class="dropdown-item" [class.active]="selectedNav==='how-it-works'" href="#how-it-works" (click)="scrollToHowItWorks($event)">
  <i class="fas fa-cogs nav-icon" aria-hidden="true"></i> How it works
  </a>
- <a class="dropdown-item" href="#" (click)="openInfoDialog(); markSelected('about'); $event.preventDefault()">
- <i class="fas fa-book-open nav-icon" aria-hidden="true"></i> Know more
- </a>
  </div>
  </div>
  <span class="nav-sep">|</span>
@@ -106,7 +103,7 @@
  </div>
  <div class="mission-right">
  <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.
+     Through advanced behavioural analysis—examining verbal responses, facial cues, and body language—the platform provides clear insight into consistency, credibility, and <br /> potential risks. This enables teams to act with accuracy, <br /> clarity, and confidence across a wide range of situations.
    </p>
  </div>
  </div>
@@ -201,7 +198,7 @@
 
 <!-- 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>
+ <h2 class="section-title how-title">How It Works?</h2>
  <div class="how-wrapper">
  <div class="how-bg"></div>
  <div class="how-tiles">
@@ -211,7 +208,7 @@
  <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.
+   The system reviews case details and presents structured, relevant follow-up questions based on previous responses to keep the interview natural and continuous.
  </p>
  </div>
 
@@ -221,12 +218,11 @@
  <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>
+   <li>Tone variations and stress points</li>
+   <li>Speech pace, pauses, and hesitations</li>
+   <li>Sudden pitch changes</li>
  </ul>
- <p class="how-tile-text">These cues help identify emotional states and potential inconsistencies.</p>
- </div>
+  </div>
 
  <!--3: Facial & Micro‑Expression Tracking -->
  <div class="how-tile">
@@ -234,12 +230,11 @@
  <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>
+   <li>Eye movement and gaze behaviour</li>
+   <li>Lip tension and brow compression</li>
+   <li>Small, involuntary gestures</li>
  </ul>
- <p class="how-tile-text">Signals that contribute to behavioural interpretation.</p>
- </div>
+  </div>
 
  <!--4: Body‑Language Pattern Detection -->
  <div class="how-tile">
@@ -247,7 +242,7 @@
  <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.
+   Posture, hand movements, head position, and timing are assessed to interpret confidence, engagement, and anxiety levels.
  </p>
  </div>
 
@@ -257,22 +252,21 @@
  <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>
+   <li>Key behavioural indicators and stress markers</li>
+   <li>Consistency highlights</li>
+   <li>A clear, structured summary for review and decision-makin</li>
  </ul>
  </div>
 
  <!--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>
+ <h3 class="how-tile-title">Workflow Overview</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>
+   <li><strong>Process:</strong> Admin creates the case → Assigned user records the session → Behavioural analysis is generated → Summary available for review.</li>
+   <li><strong>Who Uses It:</strong> Law enforcement, legal professionals, HR and recruitment teams, private investigators, counselling/education professionals.</li>
+   <li><strong>Benefits:</strong> Simple to use, non-invasive, reliable, configurable, and secure.</li>
  </ul>
  </div>
  </div>
@@ -361,24 +355,6 @@
  </ng-container>
 </div>
 
-<!-- ===== Info Dialog ===== -->
-<div class="modal-backdrop modal-backdrop--fade" *ngIf="showInfoDialog" (click)="closeInfoDialog()"></div>
-<div class="modal dialog-modal dialog-modal--zoom" *ngIf="showInfoDialog" role="dialog" aria-modal="true" aria-label="About Py-Detect">
- <div class="dialog-content" (click)="$event.stopPropagation()">
- <button class="dialog-close" (click)="closeInfoDialog()" aria-label="Close">×</button>
 
- <h3>How It Works</h3>
- <p>
- The platform asks context-aware questions and analyses verbal, facial, and behavioral cues using computer vision.
- It then generates a clear summary with risk indicators and consistency metrics.
- </p>
-
- <h3>Who Can Use Py-Detect?</h3>
- <p>Investigators, law enforcement teams, legal professionals, HR and security departments, educators, and any organization that needs accurate behavioral insights.</p>
-
- <h3>Why Py-Detect?</h3>
- <p>It is fast, non-invasive, configurable for different scenarios, and supports decision-making with reliable, data-driven analysis.</p>
- </div>
-</div>
 
 

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

@@ -1127,7 +1127,7 @@ form {
     border-radius: 10px !important;
     font-weight: 700 !important;
     cursor: pointer !important;
-    margin-top: 300px !important;
+    margin-top: 357px !important;
     margin-left: 25px;
     width: 293px;
     height: 58px;
@@ -1196,7 +1196,7 @@ form {
     border-radius: 10px !important;
     font-weight: 700 !important;
     cursor: pointer !important;
-    margin-bottom: 25px !important;
+    margin-top: 30px !important;
     margin-left: 50px;
     width: 293px;
     height: 58px;

src/app/homepage/sign-up-1.zip

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

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

@@ -0,0 +1,1018 @@
+:host {
+  display: block;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.signup-bg {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f7fafd;
+}
+
+.signup-container {
+  display: flex;
+  width: 100vw;
+  max-width: 1200px;
+  min-height: 600px;
+  border-radius: 0;
+  box-shadow: none;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+}
+
+.signup-panel-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 0;
+}
+
+.signup-panel-right {
+  flex: 1 1 0;
+  background: #f7fafd;
+}
+
+.create-card {
+  background: #fff;
+  width: 90%;
+  max-width: 540px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 38px 38px 28px 38px;
+  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 {
+  font-size: 2.1rem;
+  font-weight: 900;
+  text-align: center;
+  margin-bottom: 28px;
+  letter-spacing: 0.6px;
+  color: #23395d;
+}
+
+.signup-title.center-title {
+  text-align: center;
+  margin-bottom: 32px;
+  width: 100%;
+  font-size: 2.1rem;
+  font-weight: 800;
+  letter-spacing: 1px;
+  color: #23395d;
+  text-shadow: 0 2px 8px #0008;
+  margin-top:24px;
+  /* animation: logoGlow 3.5s ease-in-out infinite; */
+}
+
+@keyframes logoGlow {
+  0% {
+    text-shadow: 0 2px 8px #0008, 0 0 12px #38bdf8, 0 0 6px #13bfa6;
+  }
+
+  100% {
+    text-shadow: 0 2px 8px #0008, 0 0 32px #38bdf8, 0 0 18px #13bfa6;
+  }
+}
+
+.create-form {
+  width: 100%;
+  max-width: 580px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px 16px;
+  align-items: start;
+  margin-bottom: 10px;
+  padding: 25px;
+  padding-top: 0px;
+}
+
+.terms-info {
+  color: #137ec4;
+  font-size: 1.08rem;
+  font-weight: 600;
+  text-align: left;
+  margin: 12px 0 0 0;
+  letter-spacing: 0.5px;
+  display: block;
+  margin-left: 25px !important; /* align with .twofa-methods and .form-checkbox */
+}
+
+.form-row {
+  display: contents;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+  .form-field label {
+    color: #e6f7f9;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #23395d;
+    letter-spacing: 0.5px;
+  }
+
+  .form-field input,
+  .form-field select {
+    background: #fff;
+    color: #23395d;
+    border: none;
+    border-radius: 8px;
+    padding: 3px 10px 3px 10px;
+    font-size: 1rem;
+    margin-bottom: 2px;
+    box-shadow: 0 1px 4px #0002;
+    transition: border 0.2s, box-shadow 0.2s;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    height: 36px;
+    box-sizing: border-box;
+  }
+
+    .form-field input:focus,
+    .form-field select:focus {
+      outline: 2px solid #1de9b6;
+      border-color: #1de9b6;
+      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: 6px;
+  align-items: center;
+}
+
+.twofa-email-options .twofa-alt-email,
+.twofa-sms-options {
+  margin-top: 8px;
+  margin-left: 25px !important; /* align alt inputs with checkbox label */
+}
+
+.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 {
+  width: 50%;
+  max-width: 320px;
+  background: #23395d;
+  color: #fff;
+  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: 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;
+}
+
+/* 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;
+  text-align: center;
+  color: #137ec4;
+  margin-top: 0px;
+}
+
+  .create-login-link a {
+    color: #137ec4;
+    font-weight: 700;
+  }
+
+.create-footer {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: #010207;
+  font-size: 0.9rem;
+  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;
+  left: 0;
+  width: 100%;
+  padding: 0 32px;
+  z-index: 2;
+  text-align: left;
+}
+
+.welcome-info-title {
+  font-size: 1.35rem;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 6px;
+  letter-spacing: 0.5px;
+}
+
+.welcome-info-desc {
+  font-size: 1.08rem;
+  color: #fff;
+  margin-bottom: 8px;
+}
+
+.welcome-info-link {
+  color: #fff;
+  font-weight: 700;
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+  .welcome-info-link:hover {
+    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 {
+    flex-direction: column;
+    width: 98vw;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .signup-panel-right {
+    padding: 18px 6vw;
+  }
+
+  .create-card {
+    padding: 18px 6vw;
+    margin: 0 auto;
+  }
+
+  .create-form {
+    grid-template-columns: 1fr;
+    gap: 18px;
+  }
+
+  .create-btn {
+    width: 100%;
+  }
+}
+
+@media (max-width: 600px) {
+  .create-card {
+    padding: 10px 2vw;
+  }
+
+  .signup-panel-right {
+    padding: 10px 2vw;
+  }
+}
+
+.signin-close {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 38px;
+  height: 38px;
+  border: none;
+  background: #14263c;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 2rem;
+  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;
+}
+
+  .signin-close:hover {
+    background: #38bdf8;
+    color: #18314a;
+  }
+
+.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;
+}
+
+@keyframes floatSlow { }
+@keyframes floatSlowReverse { }
+@keyframes ringPulse { }
+
+.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; }
+
+.welcome-back-title,
+.welcome-info-title {
+ color: #ffffff !important;
+}
+
+.side-panel.side-right .side-img {
+ z-index:0 !important; /* image underlay */
+}
+
+.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 .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-right .action-btn,
+.side-panel.side-right .panel-cta,
+.welcome-line-4,
+.side-panel.side-right .action-btn {
+ position: relative;
+ z-index:6 !important;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+
+@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; }
+}
+
+
+.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;
+}
+
+.info-popup-bg {
+  position: fixed;
+  inset: 0;
+  background: rgba(30,41,59,0.45);
+  backdrop-filter: blur(2px);
+  z-index:;
+  display: flex;
+  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;
+  color: #23395d;
+  opacity: 0.95;
+}
+
+.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;
+}
+
+/* Floating info popup (small) */
+.info-popup-bg {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1200;
+}
+
+.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;
+}
+
+.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;
+}
+
+.info-title {
+  color: #38bdf8;
+  font-weight: 800;
+  margin-bottom: 8px;
+  padding-left: 6px;
+}
+
+.info-text ul {
+  list-style: disc;
+  padding-left: 22px;
+  margin: 6px 0;
+}
+
+.info-text li {
+  margin-bottom: 8px;
+  line-height: 1.35;
+}
+
+  .info-text li strong {
+    display: inline-block;
+    width: 120px;
+    font-weight: 800;
+  }
+
+/* Ensure popup scales on small screens */
+@media (max-width:520px) {
+  .role-help-modal, .info-popup {
+    width: auto;
+    margin: 016px;
+    padding: 12px;
+  }
+
+  .role-help-list li strong, .info-text li strong {
+    display: block;
+    width: auto;
+    margin-bottom: 4px;
+  }
+}
+
+/* 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;
+}
+.twofa-email-label {
+ font-weight:600;
+ color: #23395d;
+}
+.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;
+}
+
+/* Ensure eye toggle never overlays popups */
+.input-with-eye .eye-toggle { z-index:20 !important; }
+
+/* Keep the role info popup above all form controls */
+.info-popup-bg { z-index:1200 !important; }
+.info-popup { z-index:1201 !important; }

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

@@ -0,0 +1,198 @@
+<section class="signup-popup">
+  <div class="ai-particle-bg"></div>
+  <div class="signup-header">
+    <div class="signup-logo">
+      
+    </div>
+  </div>
+
+  <div class="auth-card">
+    <div class="card-inner">
+      <!-- FRONT: sign-up on main panel, image side on left -->
+      <div class="card-front">
+        <button class="signin-close" type="button" (click)="closePopup()" aria-label="Close">&times;</button>
+
+        <div class="card-content">
+          <div class="side-panel side-left">
+            <div class="signup-panel-left">
+
+            </div>
+            <div class="main-panel" [class.pwd-mismatch]="submitted && pwdMismatch">
+              <h2 class="signup-title center-title">Create An Account</h2>
+
+              <!-- 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')" [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')" [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 email-field" [class.email-invalid]="submitted && controlHasError('email')">
+                    <label for="email">Email</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="roleGroup">Role Group
+                      <span class="label-cross" *ngIf="submitted && controlHasError('roleGroup')" aria-hidden="true">✖</span>
+                      <button type="button" class="info-btn" (click)="showInfo = true" aria-label="Role info">i</button>
+                    </label>
+                    <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="submitted && controlHasError('roleGroup','required')" class="error">Please select a role group.</small>
+                  </div>
+                </div>
+ 
+                <div class="form-row">
+                  <div class="form-field password-field">
+                    <label for="password">Create Password
+                    </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 password-field">
+                    <label for="confirmPassword">Confirm Password
+                    </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>
+ 
+                <!--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>
+ 
+                <!-- 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
+                  </ng-container>
+                  <ng-template #creatingAccount>
+                  <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>
+              </div>
+ 
+              <div class="create-footer"><b>Version1.0.0 | © Pykara Technologies</b></div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+  <!-- Detached overlay/modal so layout doesn't shift -->
+  <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">Role Information</h3>
+      <ul class="role-help-list">
+        <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">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>
+
+  <!-- Floating Info Popup -->
+  <div *ngIf="showInfo" class="info-popup-bg" (click)="showInfo = false">
+    <div class="info-popup" (click)="$event.stopPropagation()">
+      <button class="info-close" type="button" (click)="showInfo = false" aria-label="Close">&times;</button>
+      <div class="info-title">Role Information</div>
+
+      <div class="info-text">
+        <ul>
+          <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>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-1/sign-up/sign-up.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignUpComponent } from './sign-up.component';
+
+describe('SignUpComponent', () => {
+  let component: SignUpComponent;
+  let fixture: ComponentFixture<SignUpComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SignUpComponent]
+    });
+    fixture = TestBed.createComponent(SignUpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,613 @@
+import { CommonModule } from '@angular/common';
+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
+// Fix import paths to point to root app services/components
+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;
+}
+
+@Component({
+ 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)
+ @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: 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-1/sign-up/sign-up.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SignUpService } from './sign-up.service';
+
+describe('SignUpService', () => {
+  let service: SignUpService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SignUpService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,17 @@
+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 SignUpService {
+  private apiUrl = environment.pyDetectApiUrl;
+
+  constructor(private http: HttpClient) { }
+
+  signUp(payload: any): Observable<any> {
+    return this.http.post(`${this.apiUrl}/sign-up`, payload);
+  }
+}

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

@@ -979,33 +979,7 @@ input#twoFAOptIn {
  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;
-}
+/* Hide validation cross labels globally on sign-up without affecting form logic */
+.label-cross { display: none !important; visibility: hidden !important; }
+/* If any confirm-password cross indicator relies on a class, neutralize it */
+.input-with-eye.confirm-cross::after { content: none !important; }

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

@@ -27,14 +27,14 @@
               <form [formGroup]="form" (ngSubmit)="submit()" class="create-form" novalidate autocomplete="off">
                 <div class="form-row">
                   <div class="form-field">
-                    <label for="firstName">First Name <span class="required-star" *ngIf="true">*</span>
+                    <label for="firstName">First Name
                       <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 <span class="required-star" *ngIf="true">*</span>
+                    <label for="lastName">Last Name
                       <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'))" />
@@ -43,7 +43,7 @@
                 </div>
                 <div class="form-row">
                   <div class="form-field email-field" [class.email-invalid]="submitted && controlHasError('email')">
-                    <label for="email">Email <span class="required-star">*</span>
+                    <label for="email">Email
                     </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>
@@ -51,7 +51,7 @@
                     <small *ngIf="submitted && controlHasError('email','emailExists')" class="error">Email already exists.</small>
                   </div>
                   <div class="form-field role-field-wrapper">
-                    <label for="roleGroup">Role Group <span class="required-star">*</span>
+                    <label for="roleGroup">Role Group
                       <span class="label-cross" *ngIf="submitted && controlHasError('roleGroup')" aria-hidden="true">✖</span>
                       <button type="button" class="info-btn" (click)="showInfo = true" aria-label="Role info">i</button>
                     </label>
@@ -65,7 +65,7 @@
  
                 <div class="form-row">
                   <div class="form-field password-field">
-                    <label for="password">Create Password <span class="required-star">*</span>
+                    <label for="password">Create Password
                     </label>
                     <!-- wrap input and eye in a positioned wrapper so the eye is anchored to the input only -->
                     <div class="input-with-eye">
@@ -83,7 +83,7 @@
                   </div>
  
                   <div class="form-field password-field">
-                    <label for="confirmPassword">Confirm Password <span class="required-star">*</span>
+                    <label for="confirmPassword">Confirm Password
                     </label>
                     <!-- wrap confirm input and eye similarly -->
                     <div class="input-with-eye" [class.password-mismatch]="submitted && pwdMismatch" [class.confirm-cross]="submitted && pwdMismatch">

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

@@ -23,6 +23,12 @@ export function nameValidator(control: AbstractControl): ValidationErrors | null
  return null;
 }
 
+// Relaxed validator for last name: allow any non-empty trimmed value
+export function lastNameMinValidator(control: AbstractControl): ValidationErrors | null {
+ const value = (control.value || '').toString().trim();
+ return value.length >=1 ? null : { lastNameTooShort: true };
+}
+
 @Component({
  selector: 'app-sign-up',
  standalone: true,
@@ -114,7 +120,8 @@ export class SignUpComponent implements OnInit, OnDestroy {
  ) {
  this.form = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(2), nameValidator]],
- lastName: ['', [Validators.required, Validators.minLength(2), nameValidator]],
+ // Allow single-character last name
+ lastName: ['', [Validators.required, lastNameMinValidator]],
  email: ['', [
  Validators.required,
  Validators.pattern(/(^[^@]+@[^@]+\.[^@]+$)|(^\+?\d[\d\-\s]{8,14}\d$)/)