mirror of
https://github.com/lukin/keywind.git
synced 2025-01-09 09:26:24 +00:00
feat: add IDP review user profile page
This commit is contained in:
Mathieu Yahia-Amar
parent
bdf966fdae
commit
e753e81bdc
2 changed files with 212 additions and 0 deletions
136
html/login/idp-review-user-profile.html
Normal file
136
html/login/idp-review-user-profile.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Review Profile</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link href="http://localhost:5173/src/index.css" rel="stylesheet" />
|
||||
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
|
||||
</head>
|
||||
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
|
||||
<div class="max-w-md space-y-6 w-full">
|
||||
<div class="bg-white p-8 rounded-lg space-y-6">
|
||||
<div class="space-y-4">
|
||||
<div class="font-bold text-center text-2xl">Keywind</div>
|
||||
<h1 class="text-center text-xl">Review Your Profile</h1>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<form class="m-0 space-y-4" method="post" action="/login-action">
|
||||
<div>
|
||||
<label class="sr-only" for="firstName">First name</label>
|
||||
<input
|
||||
autofocus
|
||||
required
|
||||
aria-invalid="false"
|
||||
class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm"
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
placeholder="First name"
|
||||
type="text"
|
||||
autocomplete="given-name"
|
||||
value=""
|
||||
/>
|
||||
<div class="mt-2 text-red-600 text-sm"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="sr-only" for="lastName">Last name</label>
|
||||
<input
|
||||
required
|
||||
aria-invalid="false"
|
||||
class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm"
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
placeholder="Last name"
|
||||
type="text"
|
||||
autocomplete="family-name"
|
||||
value=""
|
||||
/>
|
||||
<div class="mt-2 text-red-600 text-sm"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="sr-only" for="email">Email</label>
|
||||
<input
|
||||
required
|
||||
aria-invalid="false"
|
||||
class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
value=""
|
||||
/>
|
||||
<div class="mt-2 text-red-600 text-sm"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="sr-only" for="phone">Phone Number</label>
|
||||
<input
|
||||
required
|
||||
aria-invalid="false"
|
||||
class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm"
|
||||
id="phone"
|
||||
name="phone"
|
||||
placeholder="Phone Number"
|
||||
type="tel"
|
||||
autocomplete="tel"
|
||||
value=""
|
||||
/>
|
||||
<div class="mt-2 text-red-600 text-sm"></div>
|
||||
</div>
|
||||
<div class="flex flex-col pt-4 space-y-2">
|
||||
<button
|
||||
class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-around">
|
||||
<a class="text-secondary-600 hover:text-secondary-900 text-sm inline-flex" href="/login-url"
|
||||
>« Back to Login</a
|
||||
>
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
class="text-secondary-600 hover:text-secondary-900 inline-flex"
|
||||
@click="open = true"
|
||||
type="button"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-1 text-sm">English</span>
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
fill="currentColor"
|
||||
viewbox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
@click.away="open = false"
|
||||
class="absolute bg-white bottom-0 -left-4 max-h-80 mb-6 overflow-y-scroll rounded-lg shadow-lg"
|
||||
x-cloak
|
||||
x-show="open"
|
||||
>
|
||||
<div class="px-4 py-2">
|
||||
<a
|
||||
class="text-secondary-600 hover:text-secondary-900 text-sm inline-flex"
|
||||
href="/francais"
|
||||
>Français</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
76
theme/keywind/login/idp-review-user-profile.ftl
Normal file
76
theme/keywind/login/idp-review-user-profile.ftl
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<#import "template.ftl" as layout>
|
||||
<#import "components/atoms/button.ftl" as button>
|
||||
<#import "components/atoms/button-group.ftl" as buttonGroup>
|
||||
<#import "components/atoms/form.ftl" as form>
|
||||
<#import "components/atoms/input.ftl" as input>
|
||||
<#import "components/atoms/link.ftl" as link>
|
||||
|
||||
<@layout.registrationLayout
|
||||
displayMessage=messagesPerField.exists('global')
|
||||
displayRequiredFields=false;
|
||||
section
|
||||
>
|
||||
<#if section="header">
|
||||
${msg("loginIdpReviewProfileTitle")}
|
||||
<#elseif section="form">
|
||||
<@form.kw action=url.loginAction method="post">
|
||||
|
||||
<@input.kw
|
||||
autocomplete="email"
|
||||
invalid=messagesPerField.existsError("email")
|
||||
label=msg("email")
|
||||
message=kcSanitize(messagesPerField.get("email"))
|
||||
name="email"
|
||||
type="email"
|
||||
value=(user.getEmail())!''
|
||||
/>
|
||||
<@input.kw
|
||||
autocomplete="given-name"
|
||||
autofocus=true
|
||||
invalid=messagesPerField.existsError("firstName")
|
||||
label=msg("firstName")
|
||||
message=kcSanitize(messagesPerField.get("firstName"))
|
||||
name="firstName"
|
||||
type="text"
|
||||
value=(user.getFirstName())!''
|
||||
/>
|
||||
<@input.kw
|
||||
autocomplete="family-name"
|
||||
invalid=messagesPerField.existsError("lastName")
|
||||
label=msg("lastName")
|
||||
message=kcSanitize(messagesPerField.get("lastName"))
|
||||
name="lastName"
|
||||
type="text"
|
||||
value=(user.getLastName())!''
|
||||
/>
|
||||
<#if !realm.registrationEmailAsUsername>
|
||||
<@input.kw
|
||||
autocomplete="username"
|
||||
invalid=messagesPerField.existsError("username")
|
||||
label=msg("username")
|
||||
message=kcSanitize(messagesPerField.get("username"))
|
||||
name="username"
|
||||
type="text"
|
||||
value=(user.getUsername())!''
|
||||
/>
|
||||
</#if>
|
||||
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
|
||||
<div class="${properties.kcFormOptionsWrapperClass!}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
|
||||
<@button.kw color="primary" type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}">
|
||||
${msg("doSubmit")}
|
||||
</@button.kw>
|
||||
</div>
|
||||
</div>
|
||||
</@form.kw>
|
||||
<#elseif section="nav">
|
||||
<@link.kw color="secondary" href=url.loginUrl size="small">
|
||||
${kcSanitize(msg("backToLogin"))?no_esc}
|
||||
</@link.kw>
|
||||
</#if>
|
||||
</@layout.registrationLayout>
|
||||
Loading…
Reference in a new issue