[Netmanager]: Profile Settings Page

netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Skeleton } from "@/components/ui/skeleton"
+import type { Client } from "@/app/types/clients"
+import { getUserClientsApi } from "@/core/apis/settings"
+import { useAppSelector } from "@/core/redux/hooks"
+
+export default function ApiTokens() {
+  const [clients, setClients] = useState<Client[]>([])
+  const [newTokenName, setNewTokenName] = useState("")
+  const [isLoading, setIsLoading] = useState(true)
+  const currentuser = useAppSelector((state) => state.user.userDetails)
+
+  useEffect(() => {
+    const fetchClients = async () => {
+      try {
+        setIsLoading(true)
+        const userID = currentuser?._id || ""
+        const response = await getUserClientsApi(userID)
+        setClients(response)
+      } catch (error) {
+        console.error("Failed to fetch clients:", error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchClients()
+  }, [currentuser?._id])
+
+  const handleCreateToken = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Handle token creation logic here if needed
+    console.log("Create token feature is not implemented yet.")
+  }
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold">API Access Tokens</h2>
+      <p className="text-sm text-gray-500">
+        Clients are used to generate API tokens that can be used to authenticate with the API. Your secret API tokens
+        are listed below. Remember to keep them secure and never share them.
+      </p>
+      <form onSubmit={handleCreateToken} className="space-y-4">
+        <div className="flex space-x-2">
+          <div className="flex-grow">
+            <Label htmlFor="new-token-name" className="sr-only">
+              New Token Name
+            </Label>
+            <Input
+              id="new-token-name"
+              placeholder="Enter new token name"
+              value={newTokenName}
+              onChange={(e) => setNewTokenName(e.target.value)}
+              required
+            />
+          </div>
+          <Button type="submit">Create New Token</Button>
+        </div>
+      </form>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Client Name</TableHead>
+            <TableHead>IP Address</TableHead>
+            <TableHead>Client Status</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead>Token</TableHead>
+            <TableHead>Expires</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {isLoading ? (
+            // Loading skeleton
+            Array.from({ length: 3 }).map((_, index) => (
+              <TableRow key={index}>
+                {Array.from({ length: 6 }).map((_, cellIndex) => (
+                  <TableCell key={cellIndex}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : clients.length > 0 ? (
+            clients.map((client) => (
+              <TableRow key={client._id}>
+                <TableCell>{client.name}</TableCell>
+                <TableCell>{client.ip_addresses.length > 0 ? client.ip_addresses[0] : "N/A"}</TableCell>
+                <TableCell>{client.isActive ? "Active" : "Inactive"}</TableCell>
+                <TableCell>{new Date(client.access_token.createdAt).toLocaleDateString()}</TableCell>
+                <TableCell>{client.access_token.token}</TableCell>
+                <TableCell>
+                  {client.access_token.expires
+                    ? new Date(client.access_token.expires).toLocaleDateString()
+                    : "No Expiration"}
+                </TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={6} className="text-center">
+                No clients found.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+

netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { getCountries } from "@/utils/countries";
+import { getTimezones } from "@/utils/timezones";
+import { users } from "@/core/apis/users";
+import { useAppSelector } from "@/core/redux/hooks";
+
+export default function MyProfile() {
+  const currentuser = useAppSelector((state) => state.user.userDetails);
+  const [profile, setProfile] = useState<any>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [countries, setCountries] = useState<{ value: string; label: string }[]>([]);
+  const [timezones, setTimezones] = useState<{ value: string; label: string }[]>([]);
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      if (currentuser) {
+        const response = await users.getUserDetails(currentuser._id);
+        const userData = response.users[0]; 
+        setProfile({
+          firstName: userData.firstName,
+          lastName: userData.lastName,
+          email: userData.email,
+          jobTitle: userData.jobTitle,
+          country: userData.country,
+          timezone: userData.timezone,
+          bio: userData.description,
+          profilePicture: userData.profilePicture,
+        });
+      }
+    };
+    fetchUserData();
+  }, [currentuser]);
+
+  useEffect(() => {
+    setCountries(getCountries());
+    setTimezones(getTimezones());
+  }, []);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setProfile({ ...profile, [e.target.name]: e.target.value });
+  };
+
+  const handleSelectChange = (name: string) => (value: string) => {
+    setProfile({ ...profile, [name]: value });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsEditing(false);
+  };
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setProfile({ ...profile, profilePicture: reader.result as string });
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  if (!profile) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold">Personal Information</h2>
+      <p className="text-sm text-gray-500">Update your photo and personal details.</p>
+
+      <form onSubmit={handleSubmit} className="space-y-8">
+        <div className="flex items-center space-x-4">
+          <Avatar className="w-24 h-24">
+            {profile?.profilePicture ? (
+              <AvatarImage
+                src={profile.profilePicture}
+                alt={`${profile.firstName} ${profile.lastName}`}
+              />
+            ) : (
+              <div className="bg-gray-200 w-full h-full flex items-center justify-center">
+                <span className="text-gray-500">No Image</span>
+              </div>
+            )}
+          </Avatar>
+          <div>
+            <Button type="button" variant="outline" className="mb-2">
+              <Label htmlFor="avatar-upload" className="cursor-pointer">
+                Update
+              </Label>
+            </Button>
+            <Input
+              id="avatar-upload"
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={handleImageUpload}
+              disabled={isEditing}
+            />
+            <Button type="button" variant="outline" className="text-red-500">
+              Delete
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="firstName">First name</Label>
+            <Input
+              id="firstName"
+              name="firstName"
+              value={profile.firstName || ""}
+              onChange={handleInputChange}
+              disabled={isEditing}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="lastName">Last name</Label>
+            <Input
+              id="lastName"
+              name="lastName"
+              value={profile.lastName || ""}
+              onChange={handleInputChange}
+              disabled={isEditing}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={profile.email || ""}
+              onChange={handleInputChange}
+              disabled={isEditing}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="jobTitle">Job title</Label>
+            <Input
+              id="jobTitle"
+              name="jobTitle"
+              value={profile.jobTitle || ""}
+              onChange={handleInputChange}
+              disabled={isEditing}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="country">Country</Label>
+            <Select value={profile.country} onValueChange={handleSelectChange("country")} disabled={isEditing}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a country" />
+              </SelectTrigger>
+              <SelectContent>
+                {countries.map((country) => (
+                  <SelectItem key={country.value} value={country.value}>
+                    {country.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="timezone">Timezone</Label>
+            <Select value={profile.timezone} onValueChange={handleSelectChange("timezone")} disabled={isEditing}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a timezone" />
+              </SelectTrigger>
+              <SelectContent>
+                {timezones.map((timezone) => (
+                  <SelectItem key={timezone.value} value={timezone.value}>
+                    {timezone.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="description">Bio</Label>
+          <Textarea
+            id="description"
+            name="description"
+            value={profile.bio || ""}
+            onChange={handleInputChange}
+            disabled={isEditing}
+            rows={4}
+          />
+        </div>
+          <Button type="submit">Save Changes</Button>
+      </form>
+    </div>
+  );
+}

netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+export default function PasswordEdit() {
+  const [passwords, setPasswords] = useState({
+    current: "",
+    new: "",
+    confirm: "",
+  })
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPasswords({ ...passwords, [e.target.name]: e.target.value })
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setPasswords({ current: "", new: "", confirm: "" })
+  }
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold">Change Password</h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="current-password">Current Password</Label>
+          <Input
+            id="current-password"
+            name="current"
+            type="password"
+            value={passwords.current}
+            onChange={handleInputChange}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="new-password">New Password</Label>
+          <Input
+            id="new-password"
+            name="new"
+            type="password"
+            value={passwords.new}
+            onChange={handleInputChange}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="confirm-password">Confirm New Password</Label>
+          <Input
+            id="confirm-password"
+            name="confirm"
+            type="password"
+            value={passwords.confirm}
+            onChange={handleInputChange}
+            required
+          />
+        </div>
+        <Button type="submit">Change Password</Button>
+      </form>
+    </div>
+  )
+}
+