-
Notifications
You must be signed in to change notification settings - Fork 280
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add IDP review user profile page
- Loading branch information
Mathieu Yahia-Amar
committed
Jul 1, 2024
1 parent
bdf966f
commit 6faf66f
Showing
2 changed files
with
212 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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=true; | ||
| 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> |