libexi01/5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

47

Browse Source
This commit is contained in:
libexi01
2024-07-04 14:38:00 +05:30
parent e2821fbf58
commit 121dba686f
4 changed files with 63 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/htmx.v Normal file
View File

@@ -0,0 +1,22 @@
module main
pub struct HTMX {
mut:
name string
message string
mark string
}
fn htmx_get_username(input HTMX) string {
return '
<div class="mb-4"
hx-target="this"
hx-swap="outerHTML"
>
<label for="username" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Username: <span class="text-red-600 dark:text-red-500 text-sm">${input.message}</span></label>
<input type="text" id="username" name="username" placeholder="Enter username" ${input.mark} class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"
hx-post="/htmx/username"
value="${input.name}"
/>
</div>'
}

31
src/templates/signup.html
View File

@@ -3,23 +3,40 @@
<head>
<title>Sign Up</title>
<!-- Add this line to include the Tailwind CSS library -->
@css 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css'
@css 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.css'
@js 'https://unpkg.com/htmx.org@2.0.0'
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="w-full max-w-md">
<h1 class="text-3xl mb-6 font-bold text-center text-blue-500">Create an Account</h1>
<form action="/signup" method="post">
<div class="mb-4">
<div class="mb-4"
hx-target="this"
hx-swap="outerHTML"
>
<label for="username" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter username" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"/>
<input type="text" id="username" name="username" placeholder="Enter username" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"
hx-post="/htmx/username"
/>
</div>
<div class="mb-4">
<div class="mb-4"
hx-target="this"
hx-swap="outerHTML"
>
<label for="email" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email address" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"/>
<input type="email" id="email" name="email" placeholder="Enter email address" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"
hx-post="/htmx/email"
/>
</div>
<div class="mb-4">
<div class="mb-4"
hx-target="this"
hx-swap="outerHTML"
>
<label for="password" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter password" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"/>
<input type="password" id="password" name="password" placeholder="Enter password" class="appearance-none bg-white rounded w-full py-2 px-4 leading-tight focus:outline-none focus:shadow-outline"
hx-post="/htmx/password"
/>
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
</form>

15
src/view.v
View File

@@ -5,3 +5,18 @@ import vweb
pub fn (mut app App) signup() vweb.Result{
return $vweb.html()
}
@['/htmx/username'; post]
pub fn (mut app App) htmx_username(username string) vweb.Result{
mut htmx := HTMX{
name: username,
message: "",
mark: ""
}
if username == '' {
htmx.message = "username cannot be empty"
htmx.mark = 'style="border: 2px solid #e74c3c;"'
return app.text(htmx_get_username(htmx))
}
return app.text(htmx_get_username(htmx))
}