Contact option added

hasanpeal · hasanpeal · commit 4b7d7bd08609 · 2026-01-01T15:58:32.000-05:00
diff --git a/client/app/components/ContactModal.tsx b/client/app/components/ContactModal.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { useState } from "react";
+import { X } from "lucide-react";
+import { apiClient } from "../lib/api";
+import toast from "react-hot-toast";
+
+interface ContactModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function ContactModal({ isOpen, onClose }: ContactModalProps) {
+  const [formData, setFormData] = useState({
+    name: "",
+    message: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!formData.name.trim() || !formData.message.trim()) {
+      toast.error("Please fill in all fields");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      await apiClient.sendContact(formData.name.trim(), formData.message.trim());
+      toast.success("Message sent successfully!");
+      setFormData({ name: "", message: "" });
+      onClose();
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : "Failed to send message. Please try again.";
+      toast.error(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
+      <div className="bg-slate-800/95 backdrop-blur-md rounded-2xl border border-slate-700/50 shadow-2xl w-full max-w-md">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-slate-700/50">
+          <h2 className="text-xl font-bold text-slate-100">Contact Us</h2>
+          <button
+            onClick={onClose}
+            className="p-2 text-slate-400 hover:text-slate-200 transition-colors cursor-pointer rounded-lg hover:bg-slate-700/50"
+            aria-label="Close"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="p-6 space-y-5">
+          <div>
+            <label
+              htmlFor="name"
+              className="block text-sm font-semibold text-slate-300 mb-2"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              required
+              maxLength={200}
+              autoComplete="name"
+              className="w-full px-4 py-3 bg-slate-900/80 backdrop-blur-sm border border-slate-600 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-slate-100 font-medium placeholder:text-slate-500"
+              placeholder="Your name"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="message"
+              className="block text-sm font-semibold text-slate-300 mb-2"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              value={formData.message}
+              onChange={handleChange}
+              required
+              maxLength={5000}
+              rows={6}
+              className="w-full px-4 py-3 bg-slate-900/80 backdrop-blur-sm border border-slate-600 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-slate-100 font-medium placeholder:text-slate-500 resize-none"
+              placeholder="Your message..."
+            />
+            <p className="mt-1 text-xs text-slate-500">
+              {formData.message.length}/5000 characters
+            </p>
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isLoading}
+              className="flex-1 px-4 py-3 bg-slate-700/50 hover:bg-slate-700 text-slate-200 rounded-xl font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="flex-1 px-4 py-3 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white rounded-xl font-semibold hover:shadow-xl transition-all shadow-lg hover:shadow-indigo-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+            >
+              {isLoading ? (
+                <span className="flex items-center justify-center">
+                  <svg
+                    className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      className="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                    ></circle>
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    ></path>
+                  </svg>
+                  Sending...
+                </span>
+              ) : (
+                "Send Message"
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
diff --git a/client/app/dashboard/page.tsx b/client/app/dashboard/page.tsx
@@ -12,6 +12,7 @@ import {
 } from "../lib/api";
 import toast from "react-hot-toast";
 import { Plus, Menu, X, Lock, Crown, ShieldCheck, User } from "lucide-react";
+import ContactModal from "../components/ContactModal";
 
 export default function DashboardPage() {
   const { isLoading, isAuthenticated, user, logout } = useAuth();
@@ -24,6 +25,7 @@ export default function DashboardPage() {
     null
   );
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [showContactModal, setShowContactModal] = useState(false);
   const [createForm, setCreateForm] = useState<CreateVaultRequest>({
     name: "",
     description: "",
@@ -242,16 +244,22 @@ export default function DashboardPage() {
         </Link>
 
         {/* Desktop Navigation */}
-        <div className="hidden md:flex items-center space-x-4">
+        <div className="hidden md:flex items-center gap-1">
           <Link
             href="/account"
-            className="px-5 py-2.5 text-slate-300 hover:text-indigo-400 font-medium transition-colors rounded-lg hover:bg-slate-800/50 backdrop-blur-sm cursor-pointer"
+            className="px-4 py-2 text-slate-300 hover:text-indigo-400 font-medium transition-colors rounded-lg hover:bg-slate-800/50 backdrop-blur-sm cursor-pointer"
           >
             Account
           </Link>
+          <button
+            onClick={() => setShowContactModal(true)}
+            className="px-4 py-2 text-slate-300 hover:text-indigo-400 font-medium transition-colors rounded-lg hover:bg-slate-800/50 backdrop-blur-sm cursor-pointer"
+          >
+            Contact
+          </button>
           <button
             onClick={handleLogout}
-            className="px-5 py-2.5 text-slate-300 hover:text-indigo-400 font-medium transition-colors rounded-lg hover:bg-slate-800/50 backdrop-blur-sm cursor-pointer"
+            className="px-4 py-2 text-slate-300 hover:text-indigo-400 font-medium transition-colors rounded-lg hover:bg-slate-800/50 backdrop-blur-sm cursor-pointer"
           >
             Logout
           </button>
@@ -273,20 +281,29 @@ export default function DashboardPage() {
         {/* Mobile Menu */}
         {isMobileMenuOpen && (
           <div className="absolute top-full left-0 right-0 mt-2 mx-6 bg-slate-800/95 backdrop-blur-md rounded-xl border border-slate-700/50 shadow-2xl md:hidden z-50">
-            <div className="flex flex-col p-4 space-y-2">
+            <div className="flex flex-col p-2">
               <Link
                 href="/account"
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="px-5 py-3 text-slate-300 hover:text-indigo-400 font-medium transition-colors rounded-lg hover:bg-slate-700/50 cursor-pointer text-left block"
+                className="px-4 py-2.5 text-slate-300 hover:text-indigo-400 font-medium transition-colors rounded-lg hover:bg-slate-700/50 cursor-pointer text-left"
               >
                 Account
               </Link>
+              <button
+                onClick={() => {
+                  setShowContactModal(true);
+                  setIsMobileMenuOpen(false);
+                }}
+                className="px-4 py-2.5 text-slate-300 hover:text-indigo-400 font-medium transition-colors rounded-lg hover:bg-slate-700/50 cursor-pointer text-left"
+              >
+                Contact
+              </button>
               <button
                 onClick={() => {
                   handleLogout();
                   setIsMobileMenuOpen(false);
                 }}
-                className="px-5 py-3 text-slate-300 hover:text-indigo-400 font-medium transition-colors rounded-lg hover:bg-slate-700/50 cursor-pointer text-left"
+                className="px-4 py-2.5 text-slate-300 hover:text-indigo-400 font-medium transition-colors rounded-lg hover:bg-slate-700/50 cursor-pointer text-left"
               >
                 Logout
               </button>
@@ -321,7 +338,6 @@ export default function DashboardPage() {
               <p className="text-slate-400 text-lg">
                 You don&apos;t have any vaults yet.
               </p>
-              
             </div>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -646,6 +662,12 @@ export default function DashboardPage() {
           </div>
         </div>
       )}
+
+      {/* Contact Modal */}
+      <ContactModal
+        isOpen={showContactModal}
+        onClose={() => setShowContactModal(false)}
+      />
     </div>
   );
 }
diff --git a/client/app/lib/api.ts b/client/app/lib/api.ts
@@ -488,6 +488,16 @@ class ApiClient {
     });
   }
 
+  async sendContact(name: string, message: string): Promise<{ message: string }> {
+    return this.request<{ message: string }>("/contact", {
+      method: "POST",
+      body: JSON.stringify({
+        Name: name,
+        Message: message,
+      }),
+    });
+  }
+
   isAuthenticated(): boolean {
     return !!this.getAccessToken();
   }
diff --git a/server/Controllers/ContactController.cs b/server/Controllers/ContactController.cs
@@ -0,0 +1,62 @@
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.Mvc;
+using server.Dtos.Contact;
+using server.Interfaces;
+using server.Models;
+
+namespace server.Controllers;
+
+[ApiController]
+[Route("api/[controller]")]
+[Authorize]
+public class ContactController : ControllerBase
+{
+    private readonly UserManager<User> _userManager;
+    private readonly IEmailService _emailService;
+
+    public ContactController(UserManager<User> userManager, IEmailService emailService)
+    {
+        _userManager = userManager;
+        _emailService = emailService;
+    }
+
+    [HttpPost]
+    public async Task<ActionResult> SendContact([FromBody] ContactRequestDTO dto)
+    {
+        if (!ModelState.IsValid)
+        {
+            return BadRequest(ModelState);
+        }
+
+        try
+        {
+            var userId = User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
+            if (string.IsNullOrEmpty(userId))
+            {
+                return Unauthorized();
+            }
+
+            var user = await _userManager.FindByIdAsync(userId);
+            if (user == null)
+            {
+                return Unauthorized();
+            }
+
+            await _emailService.SendContactEmailAsync(
+                user.UserName ?? "Unknown",
+                user.Email ?? "Unknown",
+                user.Id,
+                dto.Name,
+                dto.Message
+            );
+
+            return Ok(new { message = "Contact message sent successfully" });
+        }
+        catch (Exception ex)
+        {
+            return StatusCode(500, new { message = "Failed to send contact message. Please try again later." });
+        }
+    }
+}
+
diff --git a/server/Dtos/Contact/ContactRequestDTO.cs b/server/Dtos/Contact/ContactRequestDTO.cs
@@ -0,0 +1,15 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace server.Dtos.Contact;
+
+public class ContactRequestDTO
+{
+    [Required]
+    [StringLength(200, ErrorMessage = "Name cannot exceed 200 characters.")]
+    public string Name { get; set; } = string.Empty;
+
+    [Required]
+    [StringLength(5000, ErrorMessage = "Message cannot exceed 5000 characters.")]
+    public string Message { get; set; } = string.Empty;
+}
+
diff --git a/server/Interfaces/IEmailService.cs b/server/Interfaces/IEmailService.cs
@@ -6,5 +6,6 @@ public interface IEmailService
     Task SendDeviceVerificationAsync(string email, string username, string deviceCode, string verificationUrl);
     Task SendPasswordResetAsync(string email, string username, string resetCode, string resetUrl);
     Task SendVaultInviteAsync(string email, string inviterName, string vaultName, string inviteUrl, string privilege, string? note = null);
+    Task SendContactEmailAsync(string userName, string userEmail, string userId, string contactName, string message);
 }
 
diff --git a/server/Services/CloudflareR2Service.cs b/server/Services/CloudflareR2Service.cs
@@ -34,8 +34,7 @@ public CloudflareR2Service(IConfiguration configuration, ILogger<CloudflareR2Ser
         secretAccessKey = secretAccessKey.Trim();
 
         _logger.LogInformation(
-            "Initializing Cloudflare R2 service with MinIO | Endpoint: {Endpoint} | Bucket: {Bucket}",
-            endpoint, _bucketName
+            "Initializing Cloudflare R2 service with MinIO"
         );
 
         // Don't log access key details in production
diff --git a/server/Services/EmailService.cs b/server/Services/EmailService.cs
diff --git a/server/appsettings.json b/server/appsettings.json

Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,6 @@ public interface IEmailService`
`6`	`6`	`Task SendDeviceVerificationAsync(string email, string username, string deviceCode, string verificationUrl);`
`7`	`7`	`Task SendPasswordResetAsync(string email, string username, string resetCode, string resetUrl);`
`8`	`8`	`Task SendVaultInviteAsync(string email, string inviterName, string vaultName, string inviteUrl, string privilege, string? note = null);`
	`9`	`+ Task SendContactEmailAsync(string userName, string userEmail, string userId, string contactName, string message);`
`9`	`10`	`}`
`10`	`11`