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>'
}

2
src/services.v
View File

@@ -6,7 +6,7 @@ fn (mut app App) service_add_user(username string, email string, password string
if username == '' || email == '' || password == '' { if username == '' || email == '' || password == '' {
return error('Invalid input') return error('Invalid input')
} }
mut db := databases.create_db_connection()! mut db := databases.create_db_connection()!
defer { defer {

33
src/templates/signup.html
View File

@@ -3,23 +3,40 @@
<head> <head>
<title>Sign Up</title> <title>Sign Up</title>
<!-- Add this line to include the Tailwind CSS library --> <!-- 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> </head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen"> <body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="w-full max-w-md"> <div class="w-full max-w-md">
<h1 class="text-3xl mb-6 font-bold text-center text-blue-500">Create an Account</h1> <h1 class="text-3xl mb-6 font-bold text-center text-blue-500">Create an Account</h1>
<form action="/signup" method="post"> <form action="/signup" method="post">
<div class="mb-4"> <div class="mb-4"
<label for="username" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Username:</label> hx-target="this"
<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-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"
hx-post="/htmx/username"
/>
</div> </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> <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>
<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> <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> </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> <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> </form>

15
src/view.v
View File

@@ -4,4 +4,19 @@ import vweb
pub fn (mut app App) signup() vweb.Result{ pub fn (mut app App) signup() vweb.Result{
return $vweb.html() 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))
} }