feat(account): #49 account page
This commit was merged in pull request #59.
This commit is contained in:
@@ -1,68 +1,90 @@
|
||||
package auth
|
||||
|
||||
templ SignInOrUpComp(isSignIn bool) {
|
||||
{{
|
||||
{{
|
||||
var postUrl string
|
||||
if isSignIn {
|
||||
postUrl = "/api/auth/signin"
|
||||
postUrl = "/api/auth/signin"
|
||||
} else {
|
||||
postUrl = "/api/auth/signup"
|
||||
postUrl = "/api/auth/signup"
|
||||
}
|
||||
}}
|
||||
<form class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center" hx-target="#sign-in-or-up-error" hx-post={
|
||||
postUrl }>
|
||||
<h2 class="text-4xl mb-4">
|
||||
if isSignIn {
|
||||
Sign In
|
||||
} else {
|
||||
Sign Up
|
||||
}
|
||||
</h2>
|
||||
<label class="input flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
|
||||
<path
|
||||
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z">
|
||||
</path>
|
||||
<path
|
||||
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z">
|
||||
</path>
|
||||
</svg>
|
||||
<input type="text" class="grow" placeholder="Email" name="email" spellcheck="false" autocomplete="off"
|
||||
autocorrect="off" autocapitalize="off" />
|
||||
</label>
|
||||
<label class="input input-bordered flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
|
||||
<path fill-rule="evenodd"
|
||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<input type="password" class="grow" placeholder="Password" name="password" spellcheck="false" autocomplete="off"
|
||||
autocorrect="off" autocapitalize="off" />
|
||||
</label>
|
||||
<div class="flex justify-end items-center gap-3 h-14">
|
||||
if isSignIn {
|
||||
<a href="/auth/forgot-password" class="text-gray-500 text-sm px-1 button button-neglect">
|
||||
Forgot
|
||||
Password?
|
||||
</a>
|
||||
<a href="/auth/signup" class="ml-auto text-gray-500 text-sm px-1 button button-neglect">
|
||||
Don't have an account?
|
||||
Sign Up
|
||||
</a>
|
||||
<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">Sign In</button>
|
||||
} else {
|
||||
<a href="/auth/signin" class="text-gray-500 text-sm px-1 button button-neglect">Already have an account? Sign In</a>
|
||||
<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">
|
||||
Sign Up
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@Error("")
|
||||
</form>
|
||||
}}
|
||||
<form
|
||||
class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center"
|
||||
hx-target="#sign-in-or-up-error"
|
||||
hx-post={ postUrl }
|
||||
>
|
||||
<h2 class="text-4xl mb-4">
|
||||
if isSignIn {
|
||||
Sign In
|
||||
} else {
|
||||
Sign Up
|
||||
}
|
||||
</h2>
|
||||
<label class="input flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
|
||||
<path
|
||||
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
|
||||
></path>
|
||||
<path
|
||||
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
|
||||
></path>
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
class="grow"
|
||||
placeholder="Email"
|
||||
name="email"
|
||||
spellcheck="false"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
autofocus
|
||||
/>
|
||||
</label>
|
||||
<label class="input input-bordered flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<input
|
||||
type="password"
|
||||
class="grow"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
spellcheck="false"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
/>
|
||||
</label>
|
||||
<div class="flex justify-end items-center gap-3 h-14">
|
||||
if isSignIn {
|
||||
<a href="/auth/forgot-password" class="text-gray-500 text-sm px-1 button button-neglect">
|
||||
Forgot
|
||||
Password?
|
||||
</a>
|
||||
<a href="/auth/signup" class="ml-auto text-gray-500 text-sm px-1 button button-neglect">
|
||||
Don't have an account?
|
||||
Sign Up
|
||||
</a>
|
||||
<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">Sign In</button>
|
||||
} else {
|
||||
<a href="/auth/signin" class="text-gray-500 text-sm px-1 button button-neglect">Already have an account? Sign In</a>
|
||||
<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">
|
||||
Sign Up
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@Error("")
|
||||
</form>
|
||||
}
|
||||
|
||||
templ Error(message string) {
|
||||
<p class="text-error text-right" id="sign-in-or-up-error">
|
||||
{ message }
|
||||
</p>
|
||||
<p class="text-error text-right" id="sign-in-or-up-error">
|
||||
{ message }
|
||||
</p>
|
||||
}
|
||||
|
||||
+31
-31
@@ -1,36 +1,36 @@
|
||||
package auth
|
||||
|
||||
templ UserComp(user string) {
|
||||
<div id="user-info" class="flex gap-5 items-center">
|
||||
if user != "" {
|
||||
<div class="inline-block group relative">
|
||||
<button class="font-semibold py-2 px-4 inline-flex items-center">
|
||||
<span class="mr-1">{ user }</span>
|
||||
<!-- SVG is arrow down -->
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="absolute hidden group-has-hover:block w-full">
|
||||
<ul class="w-fit float-right mr-4 p-3 border-2 border-gray-200 rounded-lg">
|
||||
<li class="mb-1">
|
||||
<a class="button w-full px-1 button-neglect" hx-post="/api/auth/signout" hx-target="#user-info">Sign Out</a>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="button w-full px-1 button-neglect" href="/auth/change-password">Change Password</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button w-full px-1 button-neglect text-gray-400 mt-4" href="/auth/delete-account" class="">
|
||||
Delete
|
||||
Account
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="user-info" class="flex gap-5 items-center">
|
||||
if user != "" {
|
||||
<div class="inline-block group relative">
|
||||
<button class="font-semibold py-2 px-4 inline-flex items-center">
|
||||
<span class="mr-1">{ user }</span>
|
||||
<!-- SVG is arrow down -->
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="absolute hidden group-has-hover:block w-full">
|
||||
<ul class="w-fit float-right mr-4 p-3 border-2 border-gray-200 rounded-lg bg-white shadow-lg">
|
||||
<li class="mb-1">
|
||||
<a class="button w-full px-1 button-neglect block" hx-post="/api/auth/signout" hx-target="#user-info">Sign Out</a>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="button w-full px-1 button-neglect block" href="/auth/change-password">Change Password</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button w-full px-1 button-neglect text-gray-400 mt-4 block" href="/auth/delete-account" class="">
|
||||
Delete
|
||||
Account
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
} else {
|
||||
<a href="/auth/signup" class="font-pirata text-xl button px-1 button-neglect">Sign Up</a>
|
||||
<a href="/auth/signin" class="font-pirata text-xl button px-1 button-neglect">Sign In</a>
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<a href="/auth/signup" class="font-pirata text-xl button px-1 button-neglect">Sign Up</a>
|
||||
<a href="/auth/signin" class="font-pirata text-xl button px-1 button-neglect">Sign In</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
+21
-17
@@ -1,21 +1,25 @@
|
||||
package auth
|
||||
|
||||
templ VerifyComp() {
|
||||
<main class="h-full">
|
||||
<div class=" flex flex-col items-center justify-center h-full">
|
||||
<h2 class="text-6xl mb-10">
|
||||
Verify your email
|
||||
</h2>
|
||||
<p class="text-lg text-center">
|
||||
We have sent you an email with a link to verify your account.
|
||||
</p>
|
||||
<p class="text-lg text-center">
|
||||
Please check your inbox/spam and click on the link to verify your account.
|
||||
</p>
|
||||
<button class="mt-8 button button-normal px-2 text-gray-500 text-xl" hx-get="/api/auth/verify-resend"
|
||||
hx-sync="this:drop" hx-swap="outerHTML">
|
||||
resend verification email
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<main class="h-full">
|
||||
<div class=" flex flex-col items-center justify-center h-full">
|
||||
<h2 class="text-6xl mb-10">
|
||||
Verify your email
|
||||
</h2>
|
||||
<p class="text-lg text-center">
|
||||
We have sent you an email with a link to verify your account.
|
||||
</p>
|
||||
<p class="text-lg text-center">
|
||||
Please check your inbox/spam and click on the link to verify your account.
|
||||
</p>
|
||||
<button
|
||||
class="mt-8 button button-normal px-2 text-gray-500 text-xl"
|
||||
hx-get="/api/auth/verify-resend"
|
||||
hx-sync="this:drop"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
resend verification email
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user