158 lines
9.8 KiB
Text
158 lines
9.8 KiB
Text
package views
|
|
|
|
templ LoginScreen() {
|
|
@AuthScreen(
|
|
"Se connecter à Xtablo",
|
|
"/login-v2",
|
|
"Découvrez la nouvelle expérience de connexion",
|
|
LoginForm(),
|
|
AuthScreenFooter("Pas encore de compte ?", "/signup", "S'inscrire"),
|
|
)
|
|
}
|
|
|
|
templ SignupScreen() {
|
|
@AuthScreen(
|
|
"S'inscrire à Xtablo",
|
|
"/login",
|
|
"Vous avez déjà un compte ?",
|
|
SignupForm(),
|
|
AuthScreenFooter("Vous avez déjà un compte ?", "/login", "Se connecter"),
|
|
)
|
|
}
|
|
|
|
templ AuthScreen(title string, helperHref string, helperLabel string, form templ.Component, footer templ.Component) {
|
|
<div class="title-group">
|
|
<h1>{ title }</h1>
|
|
</div>
|
|
<div class="new-experience-link-wrap">
|
|
<a class="new-experience-link" href={ templ.SafeURL(helperHref) }>{ helperLabel }</a>
|
|
</div>
|
|
<div class="auth-body">
|
|
@form
|
|
@AuthDivider()
|
|
@GoogleButton()
|
|
@footer
|
|
</div>
|
|
}
|
|
|
|
templ LoginForm() {
|
|
<form class="login-form" hx-post="/login" hx-target="#login-status" hx-swap="innerHTML">
|
|
<div id="login-status" class="status-slot"></div>
|
|
@AuthField("email", "email", "Email *", "email", "Votre email")
|
|
@AuthField("password", "password", "Mot de passe *", "password", "Votre mot de passe")
|
|
<div class="forgot-password-row">
|
|
<a class="forgot-password-link" href="/reset-password">Mot de passe oublié ?</a>
|
|
</div>
|
|
<button class="submit-button" type="submit">Se connecter</button>
|
|
</form>
|
|
}
|
|
|
|
templ SignupForm() {
|
|
<form class="login-form" hx-post="/signup" hx-target="#signup-status" hx-swap="innerHTML">
|
|
<div id="signup-status" class="status-slot"></div>
|
|
@AuthField("signup-email", "email", "Email *", "email", "Votre email")
|
|
@AuthField("signup-password", "password", "Mot de passe *", "password", "Choisissez un mot de passe")
|
|
<button class="submit-button" type="submit">Créer mon compte</button>
|
|
</form>
|
|
}
|
|
|
|
templ AuthField(fieldID string, fieldName string, fieldLabel string, inputType string, placeholder string) {
|
|
<div class="field-stack">
|
|
<label for={ fieldID }>{ fieldLabel }</label>
|
|
<input id={ fieldID } name={ fieldName } type={ inputType } placeholder={ placeholder } required/>
|
|
</div>
|
|
}
|
|
|
|
templ AuthScreenFooter(copy string, href string, label string) {
|
|
<p class="signup-copy">
|
|
{ copy }
|
|
<a class="signup-link" href={ templ.SafeURL(href) }>{ label }</a>
|
|
</p>
|
|
}
|
|
|
|
templ AuthStatus(kind string, message string) {
|
|
if kind == "success" {
|
|
<div class="status-banner status-success" role="status">{ message }</div>
|
|
} else if kind == "error" {
|
|
<div class="status-banner status-error" role="alert">{ message }</div>
|
|
}
|
|
}
|
|
|
|
templ AuthDivider() {
|
|
<div class="divider-row">
|
|
<div class="divider-line"></div>
|
|
<span class="divider-pill">Ou continuer avec</span>
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
}
|
|
|
|
templ GoogleButton() {
|
|
<button class="gsi-material-button" type="button">
|
|
<div class="gsi-material-button-state"></div>
|
|
<div class="gsi-material-button-content-wrapper">
|
|
<div class="gsi-material-button-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true">
|
|
<path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
|
|
<path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
|
|
<path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
|
|
<path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
|
|
<path fill="none" d="M0 0h48v48H0z"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="gsi-material-button-contents">Continuer avec Google</span>
|
|
<span class="visually-hidden">Sign in with Google</span>
|
|
</div>
|
|
</button>
|
|
}
|
|
|
|
templ AnimatedBackground() {
|
|
<div class="background-layer" aria-hidden="true">
|
|
<div class="background-logo bg-01 animate-move-right-slow opacity-04">
|
|
<img alt="Xtablo" class="logo-asset size-16 animate-spin-slow light-only" src="/logo_dark.png"/>
|
|
<img alt="Xtablo" class="logo-asset size-16 animate-spin-slow dark-only" src="/logo_white.png"/>
|
|
</div>
|
|
<div class="background-logo bg-02 animate-move-right-medium opacity-03">
|
|
<img alt="Xtablo" class="logo-asset size-12 animate-bounce-gentle light-only" src="/logo_dark.png"/>
|
|
<img alt="Xtablo" class="logo-asset size-12 animate-bounce-gentle dark-only" src="/logo_white.png"/>
|
|
</div>
|
|
<div class="background-logo bg-03 animate-move-right-fast opacity-05">
|
|
<img alt="Xtablo" class="logo-asset size-20 animate-pulse-gentle light-only" src="/logo_dark.png"/>
|
|
<img alt="Xtablo" class="logo-asset size-20 animate-pulse-gentle dark-only" src="/logo_white.png"/>
|
|
</div>
|
|
<div class="background-logo bg-04 animate-move-right-slow opacity-02">
|
|
<img alt="Xtablo" class="logo-asset size-14 animate-wiggle light-only" src="/logo_dark.png"/>
|
|
<img alt="Xtablo" class="logo-asset size-14 animate-wiggle dark-only" src="/logo_white.png"/>
|
|
</div>
|
|
<div class="background-logo bg-05 animate-move-right-medium opacity-03"><img alt="Xtablo" class="logo-asset size-18 animate-float-gentle" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-06 animate-move-diagonal-1 opacity-03"><img alt="Xtablo" class="logo-asset size-10 animate-spin-reverse" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-07 animate-move-diagonal-2 opacity-04"><img alt="Xtablo" class="logo-asset size-16 animate-scale-gentle" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-08 animate-move-diagonal-3 opacity-02"><img alt="Xtablo" class="logo-asset size-12 animate-rotate-gentle" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-09 animate-move-down-slow opacity-03"><img alt="Xtablo" class="logo-asset size-14 animate-bounce-soft" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-10 animate-move-down-medium opacity-04"><img alt="Xtablo" class="logo-asset size-16 animate-sway" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-11 animate-orbit-1 opacity-02"><img alt="Xtablo" class="logo-asset size-08" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-12 animate-orbit-2 opacity-03"><img alt="Xtablo" class="logo-asset size-10" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-13 animate-orbit-3 opacity-02"><img alt="Xtablo" class="logo-asset size-06" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-14 animate-orbit-4 opacity-03"><img alt="Xtablo" class="logo-asset size-12 animate-spin-fast" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-15 animate-orbit-5 opacity-02"><img alt="Xtablo" class="logo-asset size-07 animate-pulse-fast" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-16 animate-zigzag-1 opacity-04"><img alt="Xtablo" class="logo-asset size-14 animate-wobble" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-17 animate-zigzag-2 opacity-03"><img alt="Xtablo" class="logo-asset size-11 animate-shake" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-18 animate-zigzag-3 opacity-05"><img alt="Xtablo" class="logo-asset size-16 animate-bounce-crazy" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-19 animate-spiral-1 opacity-03"><img alt="Xtablo" class="logo-asset size-09 animate-spin-wobble" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-20 animate-spiral-2 opacity-04"><img alt="Xtablo" class="logo-asset size-13 animate-flip" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-21 animate-float-random-1 opacity-02"><img alt="Xtablo" class="logo-asset size-08 animate-twirl" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-22 animate-float-random-2 opacity-03"><img alt="Xtablo" class="logo-asset size-10 animate-dance" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-23 animate-float-random-3 opacity-04"><img alt="Xtablo" class="logo-asset size-12 animate-jiggle" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-24 animate-float-random-4 opacity-02"><img alt="Xtablo" class="logo-asset size-09 animate-vibrate" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-25 animate-wave-1 opacity-03"><img alt="Xtablo" class="logo-asset size-11 animate-swing" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-26 animate-wave-2 opacity-04"><img alt="Xtablo" class="logo-asset size-13 animate-pendulum" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-27 animate-wave-3 opacity-02"><img alt="Xtablo" class="logo-asset size-10 animate-elastic" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-28 animate-wave-4 opacity-05"><img alt="Xtablo" class="logo-asset size-15 animate-rubber" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-29 animate-corner-shoot-1 opacity-03"><img alt="Xtablo" class="logo-asset size-12 animate-rocket" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-30 animate-corner-shoot-2 opacity-04"><img alt="Xtablo" class="logo-asset size-14 animate-comet" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-31 animate-corner-shoot-3 opacity-02"><img alt="Xtablo" class="logo-asset size-10 animate-meteor" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-32 animate-corner-shoot-4 opacity-05"><img alt="Xtablo" class="logo-asset size-16 animate-blast" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-33 animate-bounce-ball-1 opacity-04"><img alt="Xtablo" class="logo-asset size-08 animate-spin-bounce" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-34 animate-bounce-ball-2 opacity-03"><img alt="Xtablo" class="logo-asset size-11 animate-flip-bounce" src="/logo_dark.png"/></div>
|
|
<div class="background-logo bg-35 animate-bounce-ball-3 opacity-05"><img alt="Xtablo" class="logo-asset size-13 animate-scale-bounce" src="/logo_dark.png"/></div>
|
|
</div>
|
|
}
|