init login templ
This commit is contained in:
Sas Andy
21
handlers/login.handlers.go
Normal file
21
handlers/login.handlers.go
Normal file
@@ -0,0 +1,21 @@
|
||||
package handlers
|
||||
|
||||
import (
|
||||
"github.com/a-h/templ"
|
||||
"github.com/emarifer/go-templ-project-structure/views/login"
|
||||
|
||||
"github.com/labstack/echo/v4"
|
||||
)
|
||||
|
||||
func HandlerShowLoginCompany(c echo.Context) error {
|
||||
|
||||
// si := user.ShowIndex("| Home", user.Show(udata))
|
||||
si := login.ShowLogin("Login ", login.DivLogin(), login.CssLogin(), login.JsLogin())
|
||||
|
||||
return ViewLoginCompany(c, si)
|
||||
}
|
||||
func ViewLoginCompany(c echo.Context, cmp templ.Component) error {
|
||||
c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
|
||||
|
||||
return cmp.Render(c.Request().Context(), c.Response().Writer)
|
||||
}
|
||||
387
views/login/login.templ
Normal file
387
views/login/login.templ
Normal file
@@ -0,0 +1,387 @@
|
||||
package login
|
||||
|
||||
import (
|
||||
"github.com/emarifer/go-templ-project-structure/views/layout"
|
||||
)
|
||||
|
||||
templ DivLogin() {
|
||||
<div class="d-flex flex-column flex-root">
|
||||
<div
|
||||
class="login login-1 login-signin-on d-flex flex-column flex-lg-row flex-column-fluid bg-white"
|
||||
id="kt_login"
|
||||
>
|
||||
<!--begin::Aside-->
|
||||
<div
|
||||
class="login-aside d-flex flex-column flex-row-auto"
|
||||
style="background-color: #3b4f9f"
|
||||
>
|
||||
<!--begin::Aside Top-->
|
||||
<div class="d-flex flex-column-auto flex-column pt-lg-40 pt-15 px-10">
|
||||
<!--begin::Aside header-->
|
||||
<div class="aside-title mb-5">
|
||||
Empowering Your Workforce's Health
|
||||
</div>
|
||||
<!--end::Aside header-->
|
||||
<!--begin::Aside title-->
|
||||
<div class="aside-subtitle">
|
||||
Discover peace of mind and prioritize your health with our
|
||||
comprehensive medical check-up packages
|
||||
</div>
|
||||
<!--end::Aside title-->
|
||||
</div>
|
||||
<!--end::Aside Top-->
|
||||
<!--begin::Aside Bottom-->
|
||||
<div
|
||||
class="d-flex bgi-no-repeat flex-row-fluid justify-content-center align-items-end"
|
||||
>
|
||||
<img
|
||||
src="asset-corporate-portal/media/login-company-vector.png"
|
||||
class="img-fluid"
|
||||
style="height: 55vh; width: 55vh"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Aside Bottom-->
|
||||
</div>
|
||||
<!--begin::Aside-->
|
||||
<!--begin::Content-->
|
||||
<div
|
||||
class="login-content flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto"
|
||||
>
|
||||
<!--begin::Content body-->
|
||||
<div class="d-flex flex-column-fluid flex-center">
|
||||
<!--begin::Signin-->
|
||||
<div class="login-form login-signin">
|
||||
<!--begin::Form-->
|
||||
<form
|
||||
class="form"
|
||||
novalidate="novalidate"
|
||||
id="kt_login_signin_form"
|
||||
>
|
||||
<!--begin::Title-->
|
||||
<div class="d-flex justify-content-center mb-5">
|
||||
<img
|
||||
src="asset-corporate-portal/media/logo.png"
|
||||
alt=""
|
||||
style="height: 103px"
|
||||
/>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<h3
|
||||
class="d-flex justify-content-center title-company"
|
||||
style="color: black"
|
||||
>
|
||||
Welcome to Corporate Portal
|
||||
</h3>
|
||||
</div>
|
||||
<div class="pb-10 pt-0">
|
||||
<h3 class="subtitle-company" style="color: #a7a8bb">
|
||||
Sign in to access your account
|
||||
</h3>
|
||||
</div>
|
||||
<!--begin::Title-->
|
||||
<!--begin::Form group-->
|
||||
<div class="form-group">
|
||||
<label class="font-size-h6 font-weight-bolder text-dark">Email</label>
|
||||
<input
|
||||
class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
|
||||
type="text"
|
||||
name="username"
|
||||
autocomplete="off"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Form group-->
|
||||
<!--begin::Form group-->
|
||||
<div class="form-group">
|
||||
<div class="d-flex justify-content-between mt-n5">
|
||||
<label
|
||||
class="font-size-h6 font-weight-bolder text-dark pt-5"
|
||||
>Password</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<!-- form-control form-control-solid -->
|
||||
<input
|
||||
class="h-auto form-control form-control-solid py-7 px-6 rounded-lg rounded-right-0"
|
||||
type="password"
|
||||
name="password"
|
||||
id="user-password"
|
||||
autocomplete="off"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<span
|
||||
class="input-group-text rounded-lg rounded-left-0"
|
||||
style="border: 0"
|
||||
>
|
||||
<!-- far fa-eye-slash -->
|
||||
<a class="btn" role="button" id="btn-show">
|
||||
<i class="far fa-eye-slash" id="password-icon"></i>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="font-size-h6 font-weight-bolder text-hover-primary mb-5"
|
||||
id="kt_login_forgot"
|
||||
style="color: #0c518c"
|
||||
>
|
||||
Forgot Password ?
|
||||
</a>
|
||||
</div>
|
||||
<!--end::Form group-->
|
||||
<!--begin::Action-->
|
||||
<div class="pb-lg-0 pb-5 pt-5">
|
||||
<button
|
||||
type="button"
|
||||
id="kt_login_signin_submit"
|
||||
style="background-color: #0c518c"
|
||||
class="btn btn-block font-weight-bolder text-white font-size-h6 px-8 py-4 my-3 mr-3 mt-5"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
<!--end::Action-->
|
||||
</form>
|
||||
<!--end::Form-->
|
||||
</div>
|
||||
<!--end::Signin-->
|
||||
<!--begin::Signup -->
|
||||
<div class="login-form login-signup">
|
||||
<!--begin::Form -->
|
||||
<form
|
||||
class="form"
|
||||
novalidate="novalidate"
|
||||
id="kt_login_signup_form"
|
||||
>
|
||||
<!--begin::Title -->
|
||||
<div class="pb-13 pt-lg-0 pt-5">
|
||||
<h3
|
||||
class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
|
||||
>
|
||||
Sign Up
|
||||
</h3>
|
||||
<p class="text-muted font-weight-bold font-size-h4">
|
||||
Enter your details to create your account
|
||||
</p>
|
||||
</div>
|
||||
<!--end::Title -->
|
||||
<!--begin::Form group-->
|
||||
<div class="form-group">
|
||||
<input
|
||||
class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
|
||||
type="text"
|
||||
placeholder="Fullname"
|
||||
name="fullname"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Form group-->
|
||||
<!--begin::Form group-->
|
||||
<div class="form-group">
|
||||
<input
|
||||
class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
name="email"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Form group-->
|
||||
<!--begin::Form group-->
|
||||
<div class="form-group">
|
||||
<input
|
||||
class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Form group-->
|
||||
<!--begin::Form group-->
|
||||
<div class="form-group">
|
||||
<input
|
||||
class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
|
||||
type="password"
|
||||
placeholder="Confirm password"
|
||||
name="cpassword"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Form group-->
|
||||
<!--begin::Form group-->
|
||||
<div class="form-group">
|
||||
<label class="checkbox mb-0">
|
||||
<input type="checkbox" name="agree"/>I Agree the
|
||||
<a href="#">terms and conditions</a>.
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<!--end::Form group-->
|
||||
<!--begin::Form group-->
|
||||
<div class="form-group d-flex flex-wrap pb-lg-0 pb-3">
|
||||
<button
|
||||
type="button"
|
||||
id="kt_login_signup_submit"
|
||||
class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
id="kt_login_signup_cancel"
|
||||
class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<!--end::Form group-->
|
||||
</form>
|
||||
<!--end::Form -->
|
||||
</div>
|
||||
<!--end::Signup -->
|
||||
<!--begin::Forgot-->
|
||||
<div class="login-form login-forgot">
|
||||
<!--begin::Form-->
|
||||
<form
|
||||
class="form"
|
||||
novalidate="novalidate"
|
||||
id="kt_login_forgot_form"
|
||||
>
|
||||
<!--begin::Title-->
|
||||
<div class="d-flex justify-content-center mb-5">
|
||||
<img
|
||||
src="asset-corporate-portal/media/logo.png"
|
||||
alt=""
|
||||
style="height: 103px"
|
||||
/>
|
||||
</div>
|
||||
<div class="pb-13 pt-lg-0 pt-5">
|
||||
<h3
|
||||
class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
|
||||
>
|
||||
Forgotten Password ?
|
||||
</h3>
|
||||
<p class="text-muted font-weight-bold font-size-h4">
|
||||
Enter your email to reset your password
|
||||
</p>
|
||||
</div>
|
||||
<!--end::Title-->
|
||||
<!--begin::Form group-->
|
||||
<div class="form-group">
|
||||
<input
|
||||
class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
name="email"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<!--end::Form group-->
|
||||
<!--begin::Form group-->
|
||||
<div class="form-group d-flex flex-wrap pb-lg-0">
|
||||
<button
|
||||
type="button"
|
||||
id="kt_login_forgot_submit"
|
||||
class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-submit"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
id="kt_login_forgot_cancel"
|
||||
class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-cancel"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<!--end::Form group-->
|
||||
</form>
|
||||
<!--end::Form-->
|
||||
</div>
|
||||
<!--end::Forgot-->
|
||||
</div>
|
||||
<!--end::Content body-->
|
||||
<!--end::Content footer-->
|
||||
</div>
|
||||
<!--end::Content-->
|
||||
</div>
|
||||
<!--end::Login-->
|
||||
</div>
|
||||
}
|
||||
|
||||
templ CssLogin() {
|
||||
<style>
|
||||
|
||||
.title-company {
|
||||
color: #181c32;
|
||||
font-family: Poppins;
|
||||
font-size: 31px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.subtitle-company {
|
||||
color: #a7a8bb;
|
||||
font-family: Poppins;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.aside-title {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: Poppins;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: -0.84px;
|
||||
}
|
||||
|
||||
.aside-subtitle {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: Poppins;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 30px;
|
||||
/* 187.5% */
|
||||
letter-spacing: -0.48px;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background-color: #3b4f9f !important
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
color: #3b4f9f !important;
|
||||
background-color: #e1f0ff !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
|
||||
// templ CssLoginCompany() {
|
||||
// <link
|
||||
// rel="stylesheet"
|
||||
// type="text/css"
|
||||
// href="asset-corporate-portal/css/login.css"
|
||||
// />
|
||||
// }
|
||||
templ JsLogin() {
|
||||
<script src="asset-corporate-portal/js/login-general.js"></script>
|
||||
}
|
||||
|
||||
templ ShowLogin(title string, cmp templ.Component, css templ.Component, js templ.Component) {
|
||||
@layout.CanvasLayout(title, css, js) {
|
||||
@cmp
|
||||
}
|
||||
}
|
||||
133
views/login/login_templ.go
Normal file
133
views/login/login_templ.go
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user