Merge pull request 'refactor: streamline Jenkinsfile by using helper methods for environment variables and agent labels' (#10) from develop into prod

Reviewed-on: #10

Jenkinsfile

@@ -0,0 +1,113 @@
+pipeline {
+
+    agent none
+
+    options {
+        buildDiscarder(logRotator(numToKeepStr: '10'))
+    }
+
+    environment {
+        DEPLOY_PATH = getDeployPath()
+        ENV_FILE_ID = getEnvFileId()
+        TARGET_URL = getHealthUrl()
+    }
+
+    stages {
+
+        stage('Checkout') {
+            agent { label getAgentLabel() }
+            steps {
+                checkout scm
+            }
+        }
+
+        stage('Inject Environment File') {
+            agent { label getAgentLabel() }
+            steps {
+                configFileProvider(
+                    [configFile(
+                        fileId: ENV_FILE_ID,
+                        targetLocation: 'src/environments/environment.ts',
+                        replaceTokens: true
+                    )]
+                ) {
+                    echo "Environment file injected for ${env.BRANCH_NAME}"
+                }
+            }
+        }
+
+        stage('Build Angular') {
+            agent { label getAgentLabel() }
+            steps {
+                sh '''
+                npm install
+                ng build --configuration production --base-href /admin/
+                '''
+            }
+        }
+
+        stage('Deploy') {
+            agent { label getAgentLabel() }
+            steps {
+                sh '''
+                rm -rf $DEPLOY_PATH/*
+                cp -r dist/portfolio-admin/browser/* $DEPLOY_PATH/
+                sudo /usr/bin/systemctl reload nginx
+                '''
+            }
+        }
+
+        stage('Health Check') {
+            agent { label getAgentLabel() }
+            steps {
+                sh """
+                sleep 2
+                curl -f ${TARGET_URL}
+                """
+            }
+        }
+    }
+
+    post {
+        failure {
+            echo "Deployment failed!"
+        }
+        success {
+            echo "Deployment successful!"
+        }
+    }
+}
+
+// -------- Helper Methods --------
+
+def getAgentLabel() {
+    if (env.BRANCH_NAME == 'prod') {
+        return 'oracle-node'
+    } else {
+        return 'built-in'   // for develop
+    }
+}
+
+def getEnvFileId() {
+    if (env.BRANCH_NAME == 'prod') {
+        return 'admin-prod-properties'
+    } else {
+        return 'admin-uat-properties'
+    }
+}
+
+def getDeployPath() {
+    if (env.BRANCH_NAME == 'prod') {
+        return "/var/www/bangararaju.kottedi.in/admin"
+    } else {
+        return "/var/www/bangararaju.kottedi.in/admin"
+    }
+}
+
+def getHealthUrl() {
+    if (env.BRANCH_NAME == 'prod') {
+        return "https://bangararaju.kottedi.in/admin"
+    } else {
+        return "https://bangararaju-uat.kottedi.in/admin"
+    }
+}

src/app/admin/projects/project-detail-popup/project-detail-popup.html

@@ -88,7 +88,7 @@
     </div>
     }
 
-    @if (project.categories?.length) {
+    @if (project.categories.length) {
     <div class="detail-section">
         <h4>Categories</h4>
         <div class="tag-list">

src/app/admin/projects/project-detail-popup/project-detail-popup.scss

@@ -4,7 +4,7 @@
     max-height: 80vh;
     overflow-y: auto;
     background: var(--eerie-black-2, #1e1e1e);
-    border: 1px solid var(--jet, #383838);
+    border: 1.2px solid hsla(45, 100%, 72%, 0.45);
     border-radius: 14px;
 }
 

src/app/auth/otp/otp.component.html

@@ -21,19 +21,9 @@
         <!-- Step 2: OTP Input -->
         @if (isOtpSent() && !isVerified()) {
         <div class="otp-section">
-            <p class="info-text">
-                OTP sent to <b>{{ emailForm.value.email }}</b>
-            </p>
-
             <form [formGroup]="otpForm" (ngSubmit)="verifyOtp()">
                 <label for="otp">Enter 6-digit OTP</label>
                 <input id="otp" type="text" maxlength="6" formControlName="otp" placeholder="123456" />
-                @if (isError()) {
-                <div class="error-banner">
-                    <i class="fa-solid fa-circle-exclamation"></i>
-                    <span>{{ message() }}</span>
-                </div>
-                }
                 <button type="submit" [disabled]="otpForm.invalid">
                     Verify OTP
                 </button>
@@ -47,5 +37,19 @@
             </button>
         </div>
         }
+
+        @if (isError()) {
+        <div class="error-banner">
+            <i class="fa-solid fa-circle-exclamation"></i>
+            <span>{{ message() }}</span>
+        </div>
+        }
+
+        @if (!isError() && isOtpSent() && !isVerified()) {
+        <div class="success-banner">
+            <i class="fa-solid fa-circle-check"></i>
+            <span>{{ message() }}</span>
+        </div>
+        }
     </div>
 </div>

src/app/auth/otp/otp.component.scss

@@ -171,3 +171,23 @@ button {
     font-size: 14px;
     margin-bottom: 10px;
 }
+
+/* Success banner for OTP sent */
+.success-banner {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(120, 255, 140, 0.07);
+    border: 1px solid rgba(120, 255, 140, 0.25);
+    border-radius: 8px;
+    padding: 10px 14px;
+    margin: 10px 0 10px;
+    color: #78ff8c;
+    font-size: 13px;
+
+    i {
+        font-size: 15px;
+        flex-shrink: 0;
+        color: #78ff8c;
+    }
+}

src/app/auth/otp/otp.component.ts

@@ -48,15 +48,27 @@ export class OtpComponent implements OnInit {
     if (this.emailForm.invalid) return;
     const email = this.emailForm.value.email;
 
-    this.authService.sendOtp(email).subscribe(() => {
+    this.authService.sendOtp(email).subscribe({
+      next: () => {
         this.isOtpSent.set(true);
-      this.message.set('OTP sent successfully!');
+        this.isError.set(false);
+        this.message.set(`OTP sent to ${email}.`);
         this.startTimer(30); // 30 seconds countdown
-    });
+      },
+      error: (err) => {
+        this.isError.set(true);
+        if (err.status === 404) {
+          this.message.set('Email not found. Please check and try again.');
+        } else {
+          this.message.set('Failed to send OTP. Please try again.');
         }
+      }
+    });
+}
 
   resendOtp() {
     if (this.countdown() > 0) return;
+    this.otpForm.reset();
     this.sendOtp();
   }
 

src/app/shared/dynamic-form/dynamic-form.scss

@@ -1,10 +1,18 @@
 /* Dynamic form spacing and material tweaks to match popup theme */
-.full-width { width: 100%; display: block; }
+.full-width {
+    width: 100%;
+    display: block;
+}
 
-mat-form-field.full-width { margin-bottom: 12px; }
+mat-form-field.full-width {
+    margin-bottom: 12px;
+}
 
 /* Reduce label size slightly to fit popup */
-mat-form-field .mat-form-field-label { font-size: 0.95rem; color: var(--light-gray-70); }
+mat-form-field .mat-form-field-label {
+    font-size: 0.95rem;
+    color: var(--light-gray-70);
+}
 
 /* Make input text contrast better */
 .mat-input-element,
@@ -15,10 +23,16 @@ textarea.mat-mdc-input-element,
 }
 
 /* Smaller helper/hint text */
-.mat-hint { color: var(--light-gray-70); font-size: 0.85rem; }
+.mat-hint {
+    color: var(--light-gray-70);
+    font-size: 0.85rem;
+}
 
 /* Error styling consistent with theme */
-mat-error { color: #ff8a80; font-size: 0.9rem; }
+mat-error {
+    color: #ff8a80;
+    font-size: 0.9rem;
+}
 
 /* Outline border always visible, highlight on focus */
 ::ng-deep .mdc-notched-outline__leading,
@@ -34,8 +48,18 @@ mat-error { color: #ff8a80; font-size: 0.9rem; }
 }
 
 /* Make array item fields inline on larger screens */
-.array-item-fields { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
+.array-item-fields {
-.array-item-fields mat-form-field { flex: 1 1 auto; margin-bottom: 0; min-width: 120px; }
+    display: flex;
+    gap: 12px;
+    align-items: baseline;
+    flex-wrap: wrap;
+}
+
+.array-item-fields mat-form-field {
+    flex: 1 1 auto;
+    margin-bottom: 0;
+    min-width: 120px;
+}
 
 /* Stack array item fields vertically on small screens */
 @media (max-width: 580px) {
@@ -83,6 +107,7 @@ mat-error { color: #ff8a80; font-size: 0.9rem; }
 
 /* Force material label/input colors to match dark popup theme (covers MDC + legacy classes) */
 .themed-popup {
+
     ::ng-deep .mat-form-field-label,
     ::ng-deep .mat-mdc-floating-label,
     ::ng-deep .mat-form-field .mat-form-field-label {
@@ -107,6 +132,7 @@ mat-error { color: #ff8a80; font-size: 0.9rem; }
         opacity: 1 !important;
     }
 }
+
 .form-array {
     margin-bottom: 20px;
     padding: 10px 0;

src/styles.scss

@@ -507,9 +507,9 @@
   .mat-mdc-text-field.mat-mdc-focused .mat-mdc-notched-outline .mat-mdc-notched-outline-path {
     stroke: var(--orange-yellow-crayola) !important;
     border-color: var(--orange-yellow-crayola) !important;
-
+  }
 /* Additional overrides: set MDC theme variables and force a gold focus ring */
-.themed-popup {
+// .themed-popup {
   /* Override MDC primary color used by many Material components */
   --mdc-theme-primary: var(--orange-yellow-crayola);
   --mdc-theme-on-primary: var(--smoky-black);
@@ -529,10 +529,9 @@
   .mat-mdc-text-field.mat-mdc-focused .mat-mdc-notched-outline-path {
     stroke: var(--orange-yellow-crayola) !important;
   }
-}
+// }
-    box-shadow: 0 6px 18px rgba(36,26,18,0.12) !important;
+    // box-shadow: 0 6px 18px rgba(36,26,18,0.12) !important;
   }
-}
   
   .contacts-list {
     display: grid;