201 lines
11 KiB
Plaintext
201 lines
11 KiB
Plaintext
package signup
|
|
|
|
import (
|
|
"github.com/fossyy/filekeeper/types"
|
|
"github.com/fossyy/filekeeper/view/client/layout"
|
|
)
|
|
|
|
templ form(err types.Message, title string) {
|
|
@layout.Base(title){
|
|
<div class="bg-gray-100 flex items-center justify-center min-h-screen">
|
|
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
|
|
<h1 class="text-2xl font-bold mb-6 text-center text-gray-800">Sign Up</h1>
|
|
switch err.Code {
|
|
case 0:
|
|
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
|
|
<strong class="font-bold">Error!</strong>
|
|
<span class="block sm:inline"> {err.Message} </span>
|
|
</div>
|
|
}
|
|
<form action="" method="POST" class="space-y-4">
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
|
|
<input type="email" id="email" name="email" required
|
|
class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
|
|
</div>
|
|
<div>
|
|
<label for="username" class="block text-sm font-medium text-gray-700">Username</label>
|
|
<input type="text" id="username" name="username" required
|
|
class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
|
|
</div>
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
|
|
<input type="password" id="password" name="password" required
|
|
class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
|
|
</div>
|
|
<div>
|
|
<label for="confirmPassword" class="block text-sm font-medium text-gray-700">Confirm Password</label>
|
|
<input type="password" id="confirmPassword" name="confirmPassword" required
|
|
class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
|
|
</div>
|
|
<div>
|
|
<div id="checkContainer" class="flex justify-start mt-1 block w-full px-3 py-2 hidden">
|
|
<ul>
|
|
<li class="flex items-center py-1">
|
|
<div id="matchSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
|
|
<svg id="matchSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path id="matchGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
<path id="matchBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</div>
|
|
<span id="matchStatusText" class="font-medium text-sm ml-3 text-red-700"> Passwords do not match</span>
|
|
</li>
|
|
<li class="flex items-center py-1">
|
|
<div id="uppercaseSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
|
|
<svg id="uppercaseSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path id="uppercaseGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
<path id="uppercaseBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</div>
|
|
<span id="uppercaseStatusText" class="font-medium text-sm ml-3 text-red-700"> Password must contain at least one uppercase letter</span>
|
|
</li>
|
|
<li class="flex items-center py-1">
|
|
<div id="lengthSvgContainer" class="rounded-full p-1 fill-current bg-red-200 text-green-700">
|
|
<svg id="lengthSvgIcon" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path id="lengthGoodPath" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
<path id="lengthBadPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</div>
|
|
<span id="lengthStatusText" class="font-medium text-sm ml-3 text-red-700"> Password length must be at least 8 characters</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button id="submit"
|
|
type="submit"
|
|
disabled
|
|
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:pointer-events-none disabled:opacity-50">
|
|
Sign Up
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="mt-6">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-300"></div>
|
|
</div>
|
|
<div class="relative flex justify-center text-sm">
|
|
<span class="px-2 bg-white text-gray-500">Or continue with</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
<a href="/auth/google"
|
|
class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
|
|
<path fill="#4285F4"
|
|
d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z" />
|
|
<path fill="#34A853"
|
|
d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z" />
|
|
<path fill="#FBBC05"
|
|
d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z" />
|
|
<path fill="#EA4335"
|
|
d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z" />
|
|
</g>
|
|
</svg>
|
|
Sign up with Google
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 text-center">
|
|
<p class="text-sm text-gray-600">
|
|
Already have an account?
|
|
<a class="underline" href="/auth/signin" rel="ugc" hx-get="/auth/signin" hx-swap="outerHTML" hx-push-url="true"
|
|
hx-target="#content" class="font-medium text-indigo-600 hover:text-indigo-500">
|
|
Log in
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<script src="/public/validatePassword.js" />
|
|
</div>
|
|
}
|
|
}
|
|
|
|
templ Main(title string, err types.Message) {
|
|
@form(err, title)
|
|
}
|
|
|
|
templ EmailSend(title string) {
|
|
@layout.Base(title){
|
|
<style>
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: 'Arimo', sans-serif;
|
|
--font-sans: 'Arimo';
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
font-family: 'Libre Franklin', sans-serif;
|
|
--font-sans: 'Libre Franklin';
|
|
}
|
|
</style>
|
|
<div class="flex flex-col items-center justify-center min-h-[80vh] gap-6">
|
|
<div class="flex items-center justify-center">
|
|
<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="h-16 w-16 text-gray-500 dark:text-gray-400">
|
|
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
|
|
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="space-y-2 text-center">
|
|
<h1 class="text-3xl font-bold">Email Verification Sent</h1>
|
|
<p class="text-gray-500 dark:text-gray-400">
|
|
We've sent a verification email to your inbox. Please check your email and follow the instructions to verify your
|
|
account.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
templ VerifySuccess(title string) {
|
|
@layout.Base(title){
|
|
<style>
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: 'Arimo', sans-serif;
|
|
--font-sans: 'Arimo';
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
font-family: 'Libre Franklin', sans-serif;
|
|
--font-sans: 'Libre Franklin';
|
|
}
|
|
</style>
|
|
<div class="flex flex-col items-center justify-center min-h-[80vh] gap-6">
|
|
<div class="bg-green-500 text-white rounded-full p-4">
|
|
<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="h-8 w-8">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</div>
|
|
<div class="space-y-2 text-center">
|
|
<h1 class="text-3xl font-bold">Account Verified</h1>
|
|
<p class="text-gray-500 dark:text-gray-400">
|
|
Your account has been successfully verified. You can now access all the features of our platform.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
} |