feat(frontend): add initial frontend structure with components, services, and assets

frontend/app/security/page.tsx

@@ -0,0 +1,163 @@
+/*
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ @author: Davidson Gomes                                                      │
+│ @file: /app/security/page.tsx                                                │
+│ Developed by: Davidson Gomes                                                 │
+│ Creation date: May 13, 2025                                                  │
+│ Contact: contato@evolution-api.com                                           │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @copyright © Evolution API 2025. All rights reserved.                        │
+│ Licensed under the Apache License, Version 2.0                               │
+│                                                                              │
+│ You may not use this file except in compliance with the License.             │
+│ You may obtain a copy of the License at                                      │
+│                                                                              │
+│    http://www.apache.org/licenses/LICENSE-2.0                                │
+│                                                                              │
+│ Unless required by applicable law or agreed to in writing, software          │
+│ distributed under the License is distributed on an "AS IS" BASIS,            │
+│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     │
+│ See the License for the specific language governing permissions and          │
+│ limitations under the License.                                               │
+├──────────────────────────────────────────────────────────────────────────────┤
+│ @important                                                                   │
+│ For any future changes to the code in this file, it is recommended to        │
+│ include, together with the modification, the information of the developer    │
+│ who changed it and the date of modification.                                 │
+└──────────────────────────────────────────────────────────────────────────────┘
+*/
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { useToast } from "@/components/ui/use-toast"
+import { Shield } from "lucide-react"
+import { changePassword } from "@/services/authService"
+
+export default function SecurityPage() {
+  const { toast } = useToast()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const [passwordData, setPasswordData] = useState({
+    currentPassword: "",
+    newPassword: "",
+    confirmPassword: "",
+  })
+
+  const handlePasswordUpdate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+
+    if (passwordData.newPassword !== passwordData.confirmPassword) {
+      toast({
+        title: "Error updating password",
+        description: "The passwords do not match.",
+        variant: "destructive",
+      })
+      setIsLoading(false)
+      return
+    }
+
+    try {
+      await changePassword({
+        current_password: passwordData.currentPassword,
+        new_password: passwordData.newPassword
+      })
+
+      // Reset password fields
+      setPasswordData({
+        currentPassword: "",
+        newPassword: "",
+        confirmPassword: "",
+      })
+
+      toast({
+        title: "Password updated",
+        description: "Your password has been updated successfully.",
+      })
+    } catch (error) {
+      toast({
+        title: "Error updating password",
+        description: error instanceof Error ? error.message : "Unable to update your password. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="container mx-auto p-6">
+      <div className="max-w-2xl mx-auto">
+        <Card className="bg-[#1a1a1a] border-[#333]">
+          <CardHeader className="flex flex-row items-center gap-4">
+            <Shield className="w-8 h-8 text-emerald-400" />
+            <div>
+              <CardTitle className="text-white">Account Security</CardTitle>
+              <CardDescription className="text-neutral-400">
+                Manage your account security settings
+              </CardDescription>
+            </div>
+          </CardHeader>
+          
+          <form onSubmit={handlePasswordUpdate}>
+            <CardContent className="space-y-4">
+              <div className="space-y-1">
+                <Label htmlFor="current-password" className="text-neutral-300">
+                  Current Password
+                </Label>
+                <Input
+                  id="current-password"
+                  type="password"
+                  value={passwordData.currentPassword}
+                  onChange={(e) => setPasswordData({ ...passwordData, currentPassword: e.target.value })}
+                  className="bg-[#222] border-[#444] text-white"
+                  required
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="new-password" className="text-neutral-300">
+                  New Password
+                </Label>
+                <Input
+                  id="new-password"
+                  type="password"
+                  value={passwordData.newPassword}
+                  onChange={(e) => setPasswordData({ ...passwordData, newPassword: e.target.value })}
+                  className="bg-[#222] border-[#444] text-white"
+                  required
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="confirm-password" className="text-neutral-300">
+                  Confirm New Password
+                </Label>
+                <Input
+                  id="confirm-password"
+                  type="password"
+                  value={passwordData.confirmPassword}
+                  onChange={(e) => setPasswordData({ ...passwordData, confirmPassword: e.target.value })}
+                  className="bg-[#222] border-[#444] text-white"
+                  required
+                />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button
+                type="submit"
+                className="w-full bg-emerald-400 text-black hover:bg-[#00cc7d]"
+                disabled={isLoading}
+              >
+                {isLoading ? "Updating..." : "Update Password"}
+              </Button>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  )
+}