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

48

Browse Source
This commit is contained in:
libexi01
2024-07-04 14:48:28 +05:30
parent 121dba686f
commit f67317a49a
3 changed files with 77 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/htmx.v
View File

@@ -19,4 +19,32 @@ fn htmx_get_username(input HTMX) string {
value="${input.name}" value="${input.name}"
/> />
</div>' </div>'
}
fn htmx_get_email(input HTMX) string {
return '
<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: <span class="text-red-600 dark:text-red-500 text-sm">${input.message}</span></label>
<input type="email" id="email" name="email" placeholder="Enter email" ${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/email"
value="${input.name}"
/>
</div>'
}
fn htmx_get_password(input HTMX) string {
return '
<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: <span class="text-red-600 dark:text-red-500 text-sm">${input.message}</span></label>
<input type="password" id="password" name="password" placeholder="Enter password" ${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/password"
value="${input.name}"
/>
</div>'
} }

25
src/templates/login.html
View File

@@ -4,20 +4,33 @@
<title>Log In</title> <title>Log In</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.min.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">Welcome Back!</h1> <h1 class="text-3xl mb-6 font-bold text-center text-blue-500">Welcome Back!</h1>
<form action="/login" method="post"> <form action="/login" method="post">
<div class="mb-4"> <!-- <div class="mb-4">
<!-- <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"/> -->
<label for="text" class="block text-sm font-medium leading-relaxed tracking-wide mb-2">Username:</label> <div class="mb-4"
<input type="text" id="email" 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-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"
hx-post="/htmx/username"
/>
</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">Log In</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">Log In</button>
</form> </form>

30
src/view.v
View File

@@ -19,4 +19,34 @@ pub fn (mut app App) htmx_username(username string) vweb.Result{
return app.text(htmx_get_username(htmx)) return app.text(htmx_get_username(htmx))
} }
return app.text(htmx_get_username(htmx)) return app.text(htmx_get_username(htmx))
}
@['/htmx/email'; post]
pub fn (mut app App) htmx_email(email string) vweb.Result{
mut htmx := HTMX{
name: email,
message: "",
mark: ""
}
if email == '' {
htmx.message = "email cannot be empty"
htmx.mark = 'style="border: 2px solid #e74c3c;"'
return app.text(htmx_get_email(htmx))
}
return app.text(htmx_get_email(htmx))
}
@['/htmx/password'; post]
pub fn (mut app App) htmx_password(password string) vweb.Result{
mut htmx := HTMX{
name: password,
message: "",
mark: ""
}
if password == '' {
htmx.message = "password cannot be empty"
htmx.mark = 'style="border: 2px solid #e74c3c;"'
return app.text(htmx_get_password(htmx))
}
return app.text(htmx_get_password(htmx))
} }