From 9568b35fa7934c185868fe050f18f854ba47c3fc Mon Sep 17 00:00:00 2001
From: bagas <bagas@fossy.my.id>
Date: Fri, 26 Apr 2024 11:21:44 +0700
Subject: [PATCH] Revamped user page UI

---
 .idea/.gitignore     |   8 ++
 .idea/filekeeper.iml |   9 ++
 .idea/modules.xml    |   8 ++
 .idea/vcs.xml        |   6 +
 view/user/user.templ | 294 +++++++++++++++++++++++++++++++++++++------
 5 files changed, 285 insertions(+), 40 deletions(-)
 create mode 100644 .idea/.gitignore
 create mode 100644 .idea/filekeeper.iml
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/vcs.xml

diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..13566b8
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/filekeeper.iml b/.idea/filekeeper.iml
new file mode 100644
index 0000000..5e764c4
--- /dev/null
+++ b/.idea/filekeeper.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="Go" enabled="true" />
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..33fcc00
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/filekeeper.iml" filepath="$PROJECT_DIR$/.idea/filekeeper.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/view/user/user.templ b/view/user/user.templ
index 3e520b1..4e09a30 100644
--- a/view/user/user.templ
+++ b/view/user/user.templ
@@ -4,47 +4,261 @@ import "github.com/fossyy/filekeeper/view/layout"
 
 templ content(email string, username string, title string) {
     @layout.Base(title){
-        <div class="bg-white overflow-hidden shadow rounded-lg border">
-            <div class="px-4 py-5 sm:px-6">
-                <h3 class="text-lg leading-6 font-medium text-gray-900">
-                    User Profile
-                </h3>
-                <p class="mt-1 max-w-2xl text-sm text-gray-500">
-                    This is some information about the user.
-                </p>
+        <main class="container mx-auto px-4 py-12 md:px-6 md:py-16 lg:py-10">
+            <div class="grid gap-10 lg:grid-cols-[1fr_300px]">
+                <div class="space-y-8">
+                    <section>
+                        <h2 class="text-2xl font-bold tracking-tight">Profile</h2>
+                        <div class="mt-6 grid gap-6">
+                            <div class="grid gap-2">
+                                <label
+                                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    for="name">
+                                    Name
+                                </label>
+                                <input
+                                    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                                    id="name" placeholder="Enter your name" value={username} disabled />
+                            </div>
+                            <div class="grid gap-2">
+                                <label
+                                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    for="email">
+                                    Email
+                                </label>
+                                <input
+                                    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                                    type="email" id="email" placeholder="Enter your email" value={email} disabled />
+                            </div>
+                            <div class="grid gap-2">
+                                <label
+                                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    for="profile-picture">
+                                    Profile Picture
+                                </label>
+                                <div class="flex items-center gap-4">
+                                    <div
+                                        class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full">
+                                        <span class="font-medium text-gray-600">JL</span>
+                                    </div>
+                                    <button
+                                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round" class="mr-2 h-4 w-4">
+                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                                            <polyline points="17 8 12 3 7 8"></polyline>
+                                            <line x1="12" x2="12" y1="3" y2="15"></line>
+                                        </svg>
+                                        Upload
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <section>
+                        <h2 class="text-2xl font-bold tracking-tight">Session Management</h2>
+                        <div class="mt-6 grid gap-6">
+                            <div class="grid gap-2">
+                                <div class="flex items-center justify-between">
+                                    <label
+                                        class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                        for="two-factor">
+                                        Two-Factor Authentication
+                                    </label>
+                                    <label class="inline-flex items-center cursor-pointer">
+                                        <input type="checkbox" value="" class="sr-only peer" checked />
+                                        <div
+                                            class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
+                                        </div>
+                                    </label>
+                                    <input type="checkbox" aria-hidden="true"
+                                        style="transform:translateX(-100%);position:absolute;pointer-events:none;opacity:0;margin:0"
+                                        tabindex="-1" value="on" />
+                                </div>
+                            </div>
+                            <div class="grid gap-2">
+                                <div class="bg-white rounded-lg shadow-md overflow-hidden">
+                                    <div class="relative w-full overflow-auto">
+                                        <table class="w-full caption-bottom text-sm">
+                                            <thead class="[&amp;_tr]:border-b">
+                                                <tr
+                                                    class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+                                                    <th
+                                                        class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0">
+                                                        IP Address
+                                                    </th>
+                                                    <th
+                                                        class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0">
+                                                        Browser
+                                                    </th>
+                                                    <th
+                                                        class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0">
+                                                        Device
+                                                    </th>
+                                                    <th
+                                                        class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0">
+                                                        Last Activity
+                                                    </th>
+                                                    <th
+                                                        class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0">
+                                                        Actions
+                                                    </th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="[&amp;_tr:last-child]:border-0">
+                                                <tr
+                                                    class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+                                                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">
+                                                        192.168.1.100</td>
+                                                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">Chrome 89
+                                                    </td>
+                                                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">Desktop
+                                                    </td>
+                                                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">1 week
+                                                        ago
+                                                    </td>
+                                                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">
+                                                        <button
+                                                            class="hover:bg-gray-200 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
+                                                            type="button" id="radix-:rq:" aria-haspopup="menu"
+                                                            aria-expanded="false" data-state="closed">
+                                                            Terminate
+                                                            <span class="sr-only">Actions</span>
+                                                        </button>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="grid gap-2">
+                                <label
+                                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    for="session-info">
+                                    Session Information
+                                </label>
+                                <div class="bg-gray-100 rounded-md p-4">
+                                    <p>
+                                        Logged in as <span class="font-medium">John Doe</span>
+                                    </p>
+                                    <p>
+                                        Logged in from <span class="font-medium">192.168.1.100</span>
+                                    </p>
+                                    <p>
+                                        Logged in at <span class="font-medium">2023-04-26 15:30:00</span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <section>
+                        <h2 class="text-2xl font-bold tracking-tight">Reset Password</h2>
+                        <div class="mt-6 grid gap-6">
+                            <div class="grid gap-2">
+                                <label
+                                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    for="name">
+                                    Current password
+                                </label>
+                                <input
+                                    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                                    type="password" id="name" placeholder="Current password" />
+                            </div>
+                            <div class="grid gap-2">
+                                <label
+                                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    for="name">
+                                    New password
+                                </label>
+                                <input
+                                    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                                    type="password" id="name" placeholder="New password" />
+                            </div>
+                            <div class="grid gap-2">
+                                <label
+                                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    for="name">
+                                    New password confirmation
+                                </label>
+                                <input
+                                    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                                    type="password" id="name" placeholder="New password confirmation" />
+                            </div>
+                            <button type="button" class="focus:outline-none text-white bg-red-500 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2">Update password</button>
+                        </div>
+                    </section>
+                    <div class="grid gap-1">
+                        <div class="flex items-center justify-between">
+                            <button
+                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" class="mr-2 h-4 w-4">
+                                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                                    <polyline points="16 17 21 12 16 7"></polyline>
+                                    <line x1="21" x2="9" y1="12" y2="12"></line>
+                                </svg>
+                                Log Out
+                            </button>
+                        </div>
+                        <p class="text-sm text-gray-500">
+                            Click to log out or terminate the current session.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="space-y-8">
+                    <div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+                        <div class="flex flex-col space-y-1.5 p-6">
+                            <h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">Storage Usage
+                            </h3>
+                        </div>
+                        <div class="p-6 grid gap-4">
+                            <div class="flex items-center justify-between">
+                                <span>Used</span>
+                                <span>12.5GB</span>
+                            </div>
+                            <div class="w-full bg-gray-300 rounded-full h-2.5">
+                                <div class="bg-gray-800 h-2.5 rounded-full" style="width: 45%"></div>
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span>Available</span>
+                                <span>37.5GB</span>
+                            </div>
+                            <div class="w-full bg-gray-300 rounded-full h-2.5">
+                                <div class="bg-gray-800 h-2.5 rounded-full" style="width: 100%"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+                        <div class="flex flex-col space-y-1.5 p-6">
+                            <h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">Upgrade Storage
+                            </h3>
+                        </div>
+                        <div class="p-6 grid gap-4">
+                            <div class="grid gap-2">
+                                <h3 class="text-lg font-semibold">Pro Plan</h3>
+                                <p class="text-gray-500">50GB of storage for $9.99/month</p>
+                                <button
+                                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+                                    Upgrade
+                                </button>
+                            </div>
+                            <div class="grid gap-2">
+                                <h3 class="text-lg font-semibold">Enterprise Plan</h3>
+                                <p class="text-gray-500">1TB of storage for $49.99/month</p>
+                                <button
+                                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+                                    Upgrade
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
-                <dl class="sm:divide-y sm:divide-gray-200">
-                    <div class="py-3 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt class="text-sm font-medium text-gray-500">
-                            Full name
-                        </dt>
-                        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                            { username }
-                        </dd>
-                    </div>
-                    <div class="py-3 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt class="text-sm font-medium text-gray-500">
-                            Email address
-                        </dt>
-                        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                            { email }
-                        </dd>
-                    </div>
-                    <div class="py-3 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt class="text-sm font-medium text-gray-500">
-                            Password
-                        </dt>
-                        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                            ntah lah
-                        </dd>
-                    </div>
-                </dl>
-            </div>
-            <form action="/logout" method="get">
-                <button type="submit" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">Logout</button>
-            </form>
-        </div>
+        </main>
     }
 }