Skip to content

refactor: improve user profile and keys UI/UX #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: push-xvnxuowunxpz
Choose a base branch
from
Open

refactor: improve user profile and keys UI/UX #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9abb0e
refactor: improve user settings UI/UX
NTBBloodbath Oct 10, 2025
66e6e14
fix: proper API keys header alignment on mobile
NTBBloodbath Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 14 additions & 12 deletions luanox/lib/luanox_web/live/user_live/keys.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,27 @@ defmodule LuaNoxWeb.UserLive.Keys do

alias Phoenix.LiveView.JS

on_mount {LuaNoxWeb.UserAuth, :require_sudo_mode}
on_mount({LuaNoxWeb.UserAuth, :require_sudo_mode})

def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_scope={@current_scope}>
<div class="bg-base-100 border-b border-base-300">
<div class="max-w-4xl mx-auto px-4 lg:px-8 py-6 lg:py-8">
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-primary/10 border-2 border-primary/20 rounded-full flex items-center justify-center flex-shrink-0">
<.icon name={:key} type={:outline} class="w-10 h-10 sm:w-12 sm:h-12 text-primary" />
</div>
<div class="flex flex-col md:flex-row justify-between items-center gap-4 sm:gap-6">
<div class="flex items-center gap-4 sm:gap-6">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-primary/10 border-2 border-primary/20 rounded-full flex items-center justify-center flex-shrink-0">
<.icon name={:key} type={:outline} class="w-10 h-10 sm:w-12 sm:h-12 text-primary" />
</div>

<div class="space-y-1 flex-1">
<h1 class="text-2xl sm:text-3xl font-bold text-base-content">
API Keys
</h1>
<p class="text-sm sm:text-base text-base-content/70">
Generate and manage API keys for programmatic access to your packages
</p>
<div class="space-y-1 flex-1">
<h1 class="text-2xl sm:text-3xl font-bold text-base-content">
API Keys
</h1>
<p class="text-sm sm:text-base text-base-content/70">
Generate and manage API keys for programmatic access to your packages
</p>
</div>
</div>

<div class="w-full sm:w-auto">
Expand Down
281 changes: 141 additions & 140 deletions luanox/lib/luanox_web/live/user_live/settings.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
defmodule LuaNoxWeb.UserLive.Settings do
use LuaNoxWeb, :live_view

on_mount {LuaNoxWeb.UserAuth, :require_sudo_mode}
on_mount({LuaNoxWeb.UserAuth, :require_sudo_mode})

def mount(_params, _session, socket) do
# TODO: actually use a changeset or create the Phoenix.HTML.Form struct by hand
Expand All @@ -12,33 +12,32 @@ defmodule LuaNoxWeb.UserLive.Settings do
~H"""
<Layouts.app flash={@flash} current_scope={@current_scope}>
<div class="bg-base-100 border-b border-base-300">
<div class="max-w-4xl mx-auto px-4 lg:px-8 py-6 lg:py-8">
<div class="flex flex-col sm:flex-row items-start justify-center sm:items-center gap-4 sm:gap-6">
<div class="max-w-5xl mx-auto px-4 lg:px-6 py-4 lg:py-6">
<div class="flex items-center gap-3">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-primary/10 border-2 border-primary/20 rounded-full flex items-center justify-center flex-shrink-0">
<.icon name={:user} type={:outline} class="w-10 h-10 sm:w-12 sm:h-12 text-primary" />
</div>

<div class="space-y-1">
<h1 class="text-2xl sm:text-3xl font-bold text-base-content">
Account Settings
</h1>
<div>
<h1 class="text-xl sm:text-2xl font-semibold text-base-content">Settings</h1>
<p class="text-sm sm:text-base text-base-content/70">
Manage your profile, email, and account preferences
Manage your profile and account preferences
</p>
</div>
</div>
</div>
</div>

<div class="max-w-4xl mx-auto px-4 lg:px-8 py-6 lg:py-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
<div class="max-w-5xl mx-auto px-4 lg:px-6 py-6 lg:py-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<%!-- Profile Card --%>
<div class="lg:col-span-1">
<div class="bg-base-200 border border-base-300 p-6 shadow-sm space-y-6">
<div class="bg-base-200 border border-base-300 p-6 sticky top-6">
<div class="text-center">
<div class="w-24 h-24 bg-primary/10 border-2 border-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
<.icon name={:user} type={:outline} class="w-16 h-16 text-primary" />
<div class="avatar avatar-placeholder mb-4">
<div class="w-20 bg-primary/10 border-2 border-primary/20 rounded-full">
<span class="text-3xl font-bold text-primary">{String.first(@current_scope.user.username)}</span>
</div>
</div>

<h3 class="text-lg font-semibold text-base-content mb-1">
{@current_scope.user.username}
</h3>
Expand All @@ -63,141 +62,148 @@ defmodule LuaNoxWeb.UserLive.Settings do
</div>
</div>
</div>
<div class="lg:col-span-2 space-y-6">
<div class="bg-base-200 border border-base-300 p-6 shadow-sm">
<div class="flex items-center gap-3 mb-4">
<.icon name={:mail} type={:outline} class="w-5 h-5 text-primary" />
<h2 class="text-lg font-semibold text-base-content">Email Address</h2>
</div>

<p class="text-sm text-base-content/70 mb-4">
Update your email address for account notifications and login.
</p>

<.form for={@email_form} id="email_form" phx-submit="update_email" class="space-y-4">
<.input
field={@current_scope.user.email}
type="email"
name="user-email"
placeholder={@current_scope.user.email}
value=""
label="Email Address"
autocomplete="email"
required
/>
<div class="pt-2">
<button
role="button"
class="btn bg-primary text-primary-content border-primary hover:bg-primary/90 w-full sm:w-auto"
phx-disable-with="Updating..."
>
<.icon name={:check} type={:outline} class="w-4 h-4" /> Update Email
</button>
<%!-- Settings Sections --%>
<div class="lg:col-span-2 space-y-4">
<%!-- Account Section --%>
<div class="collapse collapse-arrow bg-base-200 border border-base-300 !rounded-none">
<input type="checkbox" checked />
<div class="collapse-title flex items-center gap-3 px-4 sm:px-6">
<.icon name={:user_circle} type={:outline} class="w-5 h-5 text-primary" />
<div>
<h2 class="font-semibold text-base-content">Account</h2>
<p class="text-sm text-base-content/60">Personal information</p>
</div>
</.form>
</div>

<div class="bg-base-200 border border-base-300 p-6 shadow-sm">
<div class="flex items-center gap-3 mb-4">
<.icon name={:user} type={:outline} class="w-5 h-5 text-secondary" />
<h2 class="text-lg font-semibold text-base-content">Username</h2>
</div>
<div class="collapse-content px-4 sm:px-6">
<div class="space-y-6 pt-2">
<%!-- Email Form --%>
<div>
<label class="text-sm font-medium text-base-content/80 mb-2 block">
Email Address
</label>
<.form
for={@email_form}
id="email_form"
phx-submit="update_email"
class="space-y-3"
>
<input
type="email"
name="user-email"
placeholder={@current_scope.user.email}
class="input input-bordered w-full"
autocomplete="email"
required
/>
<button
type="submit"
class="btn btn-primary btn-sm w-full sm:w-auto"
phx-disable-with="Updating..."
>
<.icon name={:check} type={:outline} class="w-4 h-4" /> Save Changes
</button>
</.form>
</div>

<p class="text-sm text-base-content/70 mb-4">
Choose a unique username that will be displayed publicly.
</p>

<.form
for={@username_form}
id="username_form"
phx-submit="update_username"
class="space-y-4"
>
<.input
field={@current_scope.user.username}
type="text"
name="user-name"
placeholder={@current_scope.user.username}
value=""
label="Username"
autocomplete="username"
required
/>
<div class="pt-2">
<button
role="button"
class="btn bg-secondary text-secondary-content border-secondary hover:bg-secondary/90 w-full sm:w-auto"
phx-disable-with="Updating..."
>
<.icon name={:check} type={:outline} class="w-4 h-4" /> Update Username
</button>
<%!-- Username Form --%>
<div>
<label class="text-sm font-medium text-base-content/80 mb-2 block">
Username
</label>
<.form
for={@username_form}
id="username_form"
phx-submit="update_username"
class="space-y-3"
>
<input
type="text"
name="user-name"
placeholder={@current_scope.user.username}
class="input input-bordered w-full"
autocomplete="username"
required
/>
<button
type="submit"
class="btn btn-primary btn-sm w-full sm:w-auto"
phx-disable-with="Updating..."
>
<.icon name={:check} type={:outline} class="w-4 h-4" /> Save Changes
</button>
</.form>
</div>
</div>
</.form>
</div>
</div>

<div class="bg-base-200 border border-base-300 p-6 shadow-sm">
<div class="flex items-center gap-3 mb-4">
<.icon name={:settings} type={:outline} class="w-5 h-5 text-secondary" />
<h2 class="text-lg font-semibold text-base-content">Preferences</h2>
<%!-- Notifications Section --%>
<div class="collapse collapse-arrow bg-base-200 border border-base-300 !rounded-none">
<input type="checkbox" />
<div class="collapse-title flex items-center gap-3 px-4 sm:px-6">
<.icon name={:bell} type={:outline} class="w-5 h-5 text-primary" />
<div>
<h2 class="font-semibold text-base-content">Notifications</h2>
<p class="text-sm text-base-content/60">Email and push preferences</p>
</div>
</div>

<p class="text-sm text-base-content/70 mb-4">
Customize your experience on the platform.
</p>

<div class="space-y-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium">Email Notifications</p>
<p class="text-xs text-base-content/60">Receive updates about your packages</p>
<div class="collapse-content px-4 sm:px-6">
<div class="space-y-6 pt-2">
<div class="flex items-center justify-between py-2">
<div>
<p class="text-sm font-medium text-base-content">Email Notifications</p>
<p class="text-xs text-base-content/60">Receive updates about your packages</p>
</div>
<input type="checkbox" class="toggle toggle-primary" checked />
</div>
<input type="checkbox" class="toggle toggle-primary" checked />
</div>

<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium">Package Updates</p>
<p class="text-xs text-base-content/60">Get notified about new releases</p>
<div class="flex items-center justify-between py-2">
<div>
<p class="text-sm font-medium text-base-content">Package Updates</p>
<p class="text-xs text-base-content/60">Get notified about new releases</p>
</div>
<input type="checkbox" class="toggle toggle-primary" checked />
</div>
<input type="checkbox" class="toggle toggle-primary" checked />
</div>
</div>
</div>

<div class="bg-base-200 border border-base-300 p-6 shadow-sm">
<div class="flex items-center gap-3 mb-4">
<%!-- Advanced Section --%>
<div class="collapse collapse-arrow bg-base-200 border border-base-300 !rounded-none">
<input type="checkbox" />
<div class="collapse-title flex items-center gap-3 px-4 sm:px-6">
<.icon name={:settings} type={:outline} class="w-5 h-5 text-primary" />
<h2 class="text-lg font-semibold text-base-content">Account Management</h2>
<div>
<h2 class="font-semibold text-base-content">Advanced Settings</h2>
<p class="text-sm text-base-content/60">Account management</p>
</div>
</div>

<p class="text-sm text-base-content/70 mb-4">
Manage your account settings and connected services.
</p>

<div class="space-y-4">
<div class="bg-base-100 border border-base-300 p-4 rounded">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<.icon name={:shield_check} type={:outline} class="w-5 h-5 text-green-500" />
<div>
<p class="text-sm font-medium">GitHub Account</p>
<p class="text-xs text-base-content/60">Authentication provider</p>
<div class="collapse-content px-4 sm:px-6">
<div class="space-y-6 pt-2">
<div class="bg-base-100 border border-base-300 rounded-sm p-4 sm:p-6 space-y-4">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<.icon name={:brand_github} type={:outline} class="w-5 h-5 text-success" />
<div>
<p class="text-sm font-medium text-base-content">GitHub Account</p>
<p class="text-xs text-base-content/60">Authentication provider</p>
</div>
</div>
<span class="badge badge-success badge-sm">Connected</span>
</div>
<span class="text-xs badge badge-success">Connected</span>
</div>
</div>

<div>
<button class="btn btn-neutral w-full sm:w-auto">
<.icon name={:refresh} type={:outline} class="w-4 h-4" /> Sync Profile Data
</button>
<button
class="btn btn-error w-full sm:w-auto"
onclick="disable_account_modal.showModal()"
>
<.icon name={:trash} type={:outline} class="w-4 h-4" /> Disable Account
</button>
<div class="divider"></div>
<div class="flex flex-col sm:flex-row justify-end gap-2">
<button class="btn btn-neutral">
<.icon name={:refresh} type={:outline} class="w-4 h-4" /> Sync Profile
</button>
<button
class="btn btn-error"
onclick="disable_account_modal.showModal()"
>
<.icon name={:trash} type={:outline} class="w-4 h-4" /> Disable Account
</button>
</div>
</div>
</div>
</div>
Expand All @@ -207,20 +213,15 @@ defmodule LuaNoxWeb.UserLive.Settings do

<dialog id="disable_account_modal" class="modal">
<div class="modal-box">
<h3 class="text-lg font-bold text-base-content mb-4">Are you sure?</h3>
<h3 class="text-lg font-bold text-base-content mb-4">Disable Account?</h3>
<p class="text-sm text-base-content/80 mb-6">
Disabling your account prevents you from creating or updating any of your packages. You can reenable your account at any time.
Disabling your account prevents you from creating or updating any packages. You can re-enable it at any time.
</p>
<div class="modal-action">
<form method="dialog">
<button class="btn btn-neutral mr-3">
Cancel
</button>
<button class="btn btn-neutral btn-sm mr-3">Cancel</button>
</form>
<button
class="btn btn-error"
phx-click="disable_account"
>
<button class="btn btn-error btn-sm" phx-click="disable_account">
<.icon name={:trash} type={:outline} class="w-4 h-4" /> Disable Account
</button>
</div>
Expand Down
Loading