269 lines
21 KiB
Plaintext
269 lines
21 KiB
Plaintext
package userView
|
|
|
|
import (
|
|
"github.com/fossyy/filekeeper/types"
|
|
"github.com/fossyy/filekeeper/view/layout"
|
|
"github.com/fossyy/filekeeper/session"
|
|
)
|
|
|
|
templ content(title string, user types.User, ListSession []*session.SessionInfo) {
|
|
@layout.Base(title){
|
|
@layout.Navbar(user)
|
|
<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={user.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={user.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="[&_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 [&:has([role=checkbox])]:pr-0">
|
|
IP Address
|
|
</th>
|
|
<th
|
|
class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
|
|
Browser
|
|
</th>
|
|
<th
|
|
class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
|
|
Device
|
|
</th>
|
|
<th
|
|
class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
|
|
Last Activity
|
|
</th>
|
|
<th
|
|
class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="[&_tr:last-child]:border-0">
|
|
for _, ses := range ListSession {
|
|
<tr
|
|
class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{ses.IP}
|
|
</td>
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{ses.Browser + ses.Version}
|
|
</td>
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{ses.OS + ses.OSVersion}
|
|
</td>
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{ses.AccessAt}
|
|
</td>
|
|
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
|
|
<a
|
|
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"
|
|
href="/">
|
|
Terminate
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</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">
|
|
<a
|
|
href="/logout"
|
|
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
|
|
</a>
|
|
</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>42.0GB</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>6.9GB</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>
|
|
<a
|
|
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" href="/upload">
|
|
Upload
|
|
</a>
|
|
<a
|
|
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" href="/download">
|
|
Download
|
|
</a>
|
|
</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>
|
|
<a
|
|
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" href="#">
|
|
Upgrade
|
|
</a>
|
|
</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>
|
|
<a
|
|
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" href="#">
|
|
Upgrade
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
@layout.Footer()
|
|
}
|
|
}
|
|
|
|
templ Main(title string, user types.User, ListSession []*session.SessionInfo) {
|
|
@content(title, user, ListSession)
|
|
} |