feat: complete deployment codebase for BackOne DPI dashboard with dynamic telemetry, rebranding, database size tracking, and modular design

src/components/layout/UsernameTab.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+
+interface Props {
+  user: any;
+  setUser: (user: any) => void;
+  onClose: () => void;
+}
+
+export default function UsernameTab({ user, setUser, onClose }: Props) {
+  const [newUsername, setNewUsername] = useState("");
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [errorMsg, setErrorMsg] = useState("");
+  const [successMsg, setSuccessMsg] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showCurrent, setShowCurrent] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setErrorMsg("");
+    setSuccessMsg("");
+
+    try {
+      const res = await fetch('/api/auth/change-username', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ currentPassword, newUsername }),
+      });
+
+      const data = await res.json();
+      if (res.ok) {
+        setSuccessMsg("Username changed successfully!");
+        setCurrentPassword("");
+        setNewUsername("");
+        if (user) {
+          setUser({ ...user, username: data.newUsername });
+        }
+      } else {
+        setErrorMsg(data.error || "Failed to change username.");
+      }
+    } catch (err: any) {
+      setErrorMsg(err.message || "A system error occurred.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 text-xs">
+      {errorMsg && (
+        <div className="rounded-lg bg-red-500/10 p-3 text-red-400 border border-red-500/20">
+          {errorMsg}
+        </div>
+      )}
+      {successMsg && (
+        <div className="rounded-lg bg-green-500/10 p-3 text-green-400 border border-green-500/20">
+          {successMsg}
+        </div>
+      )}
+
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-slate-300">New Username</label>
+        <input
+          type="text"
+          value={newUsername}
+          onChange={(e) => setNewUsername(e.target.value)}
+          required
+          className="w-full rounded-lg border border-border bg-background/50 backdrop-blur-sm px-4 py-2.5 text-sm text-white placeholder-slate-500 focus:border-primary focus:ring-1 focus:ring-primary/50 transition-all focus:outline-none"
+          placeholder="Enter new username (min. 4 characters)"
+        />
+      </div>
+
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-slate-300">Current Password (Authorization)</label>
+        <div className="relative">
+          <input
+            type={showCurrent ? "text" : "password"}
+            value={currentPassword}
+            onChange={(e) => setCurrentPassword(e.target.value)}
+            required
+            className="w-full rounded-lg border border-border bg-background/50 backdrop-blur-sm px-4 py-2.5 text-sm text-white placeholder-slate-500 focus:border-primary focus:ring-1 focus:ring-primary/50 transition-all focus:outline-none pr-10"
+            placeholder="Enter password to continue"
+          />
+          <button
+            type="button"
+            onClick={() => setShowCurrent(!showCurrent)}
+            className="absolute right-3 top-2.5 text-slate-400 hover:text-white transition-colors"
+          >
+            {showCurrent ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex justify-end gap-3 pt-4">
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded-lg px-4 py-2 text-sm font-medium text-slate-300 hover:bg-secondary hover:text-white transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          disabled={!newUsername || !currentPassword || isSubmitting}
+          className="rounded-lg px-6 py-2 text-sm font-medium text-[#fff] shadow-lg bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-500 hover:to-blue-700 disabled:from-slate-700 disabled:to-slate-800 disabled:text-slate-500 disabled:shadow-none transition-all duration-300 flex items-center"
+        >
+          {isSubmitting ? (
+            <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2" />
+          ) : null}
+          {isSubmitting ? "Saving..." : "Save Username"}
+        </button>
+      </div>
+    </form>
+  );
+}