141 integrate spring endpoints with vanilla js login contact us registration reset update password

users_microservice/pom.xml

@@ -21,7 +21,7 @@
         <dependency>
             <groupId>com.h2database</groupId>
             <artifactId>h2</artifactId>
-            <scope>test</scope>
+            <scope>runtime</scope>
         </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>

users_microservice/src/main/java/com/users/application/controllers/PagesController.java

@@ -13,6 +13,9 @@ public String index(){
         return "home/index";
     }
 
+    @GetMapping("/add-privilege")
+    public String addPrivilege(){return "home/add-privilege";}
+
     @GetMapping("/sign-up")
     public String signupPage() {
         return "home/registration"; // looks for signup.html in src/main/resources/templates

users_microservice/src/main/java/com/users/application/controllers/UsersAuthController.java

@@ -37,7 +37,7 @@ public ResponseEntity<List<? extends ResponseContract>> userRegisters(@RequestBo
             var uri = uriBuilder.path("/dev/api/findUserByIdentityNumber/{id}").buildAndExpand(request.getUserIdentityNo()).toUri();
             return ResponseEntity.created(uri).body(set);
         } else {
-            ErrorResponse error = (ErrorResponse) set;
+            ErrorResponse error = (ErrorResponse) set.getFirst();
             logger.warn("Error response : {}", error);
             return ResponseEntity.badRequest().body(List.of(error));
         }
@@ -77,7 +77,7 @@ public ResponseEntity<List<? extends ResponseContract>> forgotPassword(@RequestB
         if (response.getFirst() instanceof UsersResponse) {
             return ResponseEntity.ok(response);
         } else {
-            ErrorResponse error = (ErrorResponse) response;
+            ErrorResponse error = (ErrorResponse) response.getFirst();
             logger.warn("Error response : {}", error);
             return ResponseEntity.badRequest().body(List.of(error));
         }

users_microservice/src/main/java/com/users/application/controllers/VerifyCustomerController.java

@@ -42,7 +42,7 @@ public String verifyPasswordUpdate(@RequestParam String qTokq1) {
         var response = super.executeUserService(service,"verifyUser",new FindByTokenRequest(qTokq1)).getFirst();
 
         if (response instanceof UsersResponse users) {
-            return "redirect:/reset?emailAddess="+users.getUsersEmailAddress();
+            return "redirect:/reset?token="+qTokq1;
         } else {
             return "redirect:/login";
         }

users_microservice/src/main/java/com/users/application/dtos/UpdatePasswordRequest.java

@@ -12,7 +12,7 @@
 public class UpdatePasswordRequest implements RequestContract {
 
 
-    private String usersPassword,usersEmailAddress;
+    private String usersPassword,userToken;
     private String usersConfirmPassword;
 
 }

users_microservice/src/main/java/com/users/application/services/UsersService.java

@@ -183,7 +183,7 @@ private List<UsersResponse> resetPassword(RequestContract request) {
 
         if (request instanceof UpdatePasswordRequest castedRequest) {
             try {
-                var dbEntity = userRepository.findByUserEmailAddress(castedRequest.getUsersEmailAddress());
+                var dbEntity = userRepository.findByToken(castedRequest.getUserToken());
                 if (dbEntity.isPresent()) {
                     var user = dbEntity.get();
                     if (getInstance().checkPasswordValidity(castedRequest.getUsersPassword()).equals(getInstance().checkPasswordValidity(castedRequest.getUsersConfirmPassword()))) {

users_microservice/src/main/resources/application-dev.properties

@@ -4,10 +4,17 @@ spring.sql.unit.mode= always
 
 
 # MySQL Database Configuration
-spring.datasource.url=${SUPABASE_URL}
-
+# In-memory database (data lost on restart - perfect for quick dev/testing)
+spring.datasource.url=jdbc:h2:mem:devdb;DB_CLOSE_DELAY=-1;MODE=MySQL;INIT=CREATE SCHEMA IF NOT EXISTS devdb
+spring.datasource.driver-class-name=org.h2.Driver
+spring.datasource.username=sa
+spring.datasource.password=
+spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
+# Enable H2 web console → http://localhost:8080/h2-console (or your port)
+spring.h2.console.enabled=true
+spring.h2.console.path=/h2-console
 spring.flyway.clean-disabled=false
-
+spring.h2.console.settings.web-allow-others=true
 server.port=${PORT}
 spring.mail.host=smtp.gmail.com
 spring.mail.port=587
@@ -16,3 +23,7 @@ spring.mail.password=${MAIL_PASSWORD}
 spring.mail.properties.mail.smtp.auth=true
 spring.mail.properties.mail.smtp.starttls.enable=true
 spring.docker.compose.enabled=true
+
+# Optional: if you have data.sql / schema.sql in resources, run them automatically
+spring.sql.init.mode=always
+spring.sql.init.continue-on-error=true

users_microservice/src/main/resources/application-prod.properties

@@ -4,6 +4,7 @@ spring.datasource.url=${SUPABASE_URL}
 
 spring.flyway.clean-disabled=true
 spring.flyway.enabled=true
+spring.datasource.driver-class-name=org.postgresql.Driver
 
 logging.level.root=WARN
 logging.level.org.springframework=INFO

users_microservice/src/main/resources/application.properties

@@ -5,7 +5,6 @@ logging.level.org.springframework.boot.docker.compose=DEBUG
 spring.docker.compose.lifecycle-management=start_only
 spring.threads.virtual.enabled= true
 
-spring.datasource.driver-class-name=org.postgresql.Driver
 
 
 

users_microservice/src/main/resources/static/css/landing-page.css

@@ -40,4 +40,22 @@
   box-shadow: 0 16px 32px rgba(255, 105, 180, 0.18);
 }
 
+/* Optional: make it even more visible or add italic style */
+#contactForm .form-control::placeholder {
+  /* color: rgba(255, 255, 255, 0.9); */   /* alternative - almost fully white */
+  /* font-style: italic; */
+}
+
+/* If your background is dark → ensure inputs have dark background so white text shows */
+#contactForm .form-control {
+  background-color: #2c2c2c;            /* dark grey/black - adjust to your theme */
+  color: #ffffff;                       /* white text when typing */
+  border: 1px solid #555;               /* subtle border */
+}
+
+/* Optional: placeholder changes color slightly on focus */
+#contactForm .form-control:focus::placeholder {
+  color: rgba(255, 255, 255, 0.4);      /* fades a bit when focused */
+}
+
 /* ... add your other landing sections: CTA, testimonials, etc. ... */

users_microservice/src/main/resources/static/css/loader.css

@@ -0,0 +1,93 @@
+/* Make the form a positioning context */
+#contactForm {
+  position: relative;
+}
+
+/* Loader container – covers the form */
+.loader-container {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  pointer-events: none;
+  background: transparent;
+}
+
+/* Very subtle overlay (almost invisible – keeps form readable) */
+.loader-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.10);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  border-radius: inherit;
+}
+
+/* The spinning colorful circle */
+.loader {
+  position: relative;
+  width: 90px;
+  height: 90px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: conic-gradient(
+    #ff0000 0deg,
+    #ff7f00 45deg,
+    #ffff00 90deg,
+    #00ff00 135deg,
+    #0000ff 180deg,
+    #4b0082 225deg,
+    #8b00ff 270deg,
+    #ff0000 315deg,
+    #ff0000 360deg
+  );
+
+  box-shadow: 
+    0 0 25px #ff0000aa,
+    0 0 50px #ffff00aa,
+    0 0 75px #00ff00aa,
+    0 0 100px #0000ffaa,
+    inset 0 0 20px rgba(255,255,255,0.6);
+
+  animation: rotate 1.6s linear infinite;
+}
+
+/* Text INSIDE the loader circle */
+.loader-text {
+  color: white;
+  font-size: 1.05rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  white-space: nowrap;
+
+  /* Black outline around the white text */
+  -webkit-text-stroke: 0.5px black;
+
+  /* Extra contrast & shadow */
+  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
+
+  /* Gentle pulse animation */
+  animation: pulseText 2.2s ease-in-out infinite;
+}
+
+/* Animations */
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes pulseText {
+  0%, 100% { opacity: 0.85; }
+  50%      { opacity: 1.00; }
+}
+
+/* Hide class */
+.d-none {
+  display: none !important;
+}

users_microservice/src/main/resources/static/js/Privilege-script.js

@@ -0,0 +1,84 @@
+// ────────────────────────────────────────────────────────────────
+// Add Privilege Form Handler
+// ────────────────────────────────────────────────────────────────
+document.getElementById('addPrivilegeForm')?.addEventListener('submit', async function(e) {
+    e.preventDefault();
+
+    const alertDiv = document.getElementById('privilegeAlert');
+    const submitBtn = document.getElementById('submitBtn');
+
+    // Reset UI
+    alertDiv.classList.add('d-none');
+    alertDiv.classList.remove('alert-success', 'alert-danger');
+    alertDiv.textContent = '';
+    submitBtn.disabled = true;
+    submitBtn.textContent = 'Creating...';
+
+    // Get form values
+    const name = document.getElementById('privilegeName').value.trim();
+
+    if (!name) {
+        showAlert('Privilege name is required.', 'danger');
+        resetButton();
+        return;
+    }
+
+    // Prepare payload (adjust fields to match your backend DTO)
+    const payload = {
+        privilegeName: name,
+    };
+
+    try {
+        const response = await fetch('http://localhost:8081/dev/privileges/api/addPrivilege', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify(payload)
+        });
+
+        if (response.ok) {
+            showAlert('Privilege created successfully!', 'success');
+            document.getElementById('addPrivilegeForm').reset(); // clear form
+            // Optional: refresh privileges list elsewhere on page
+        } else {
+            let errorData = null;
+            try {
+                errorData = await response.json();
+            } catch {}
+
+            let message = `Failed to create privilege (${response.status})`;
+
+            if (errorData) {
+                if (Array.isArray(errorData) && errorData[0]?.resolveIssueDetails) {
+                    message = errorData[0].resolveIssueDetails;
+                } else if (errorData.resolveIssueDetails) {
+                    message = errorData.resolveIssueDetails;
+                } else if (errorData.message) {
+                    message = errorData.message;
+                } else if (errorData.detail) {
+                    message = errorData.detail;
+                }
+            }
+
+            showAlert(message, 'danger');
+        }
+    } catch (err) {
+        console.error('Error:', err);
+        showAlert('Network error – please check if the server is running.', 'danger');
+    } finally {
+        resetButton();
+    }
+
+    function showAlert(text, type) {
+        alertDiv.textContent = text;
+        alertDiv.classList.add(`alert-${type}`);
+        alertDiv.classList.remove('d-none');
+    }
+
+    function resetButton() {
+        submitBtn.disabled = false;
+        submitBtn.textContent = 'Create Privilege';
+    }
+});