Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated social connections and forgot password and removed user from nav #3

Merged
merged 1 commit into from
Jan 16, 2025
Merged

Updated social connections and forgot password and removed user from nav #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 92 additions & 0 deletions theme/nl-design-system/login/login-reset-password.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<#import "template.ftl" as layout>

<@layout.registrationLayout displayInfo=true displayMessage=!messagesPerField.existsError('username'); section>
<#if section == "header">
${msg("emailForgotTitle")}
<#elseif section == "form">
<div class="rvo-layout-column rvo-layout-gap--xl">
<div class="rvo-form">
<form id="kc-reset-password-form" action="${url.loginAction}" method="post">
<div class="rvo-layout-column rvo-layout-gap--md">
<div class="utrecht-form-fieldset rvo-form-fieldset">
<fieldset class="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset">
<div class="rvo-layout-column rvo-layout-gap--md">
<div class="rvo-form-field">
<div class="rvo-layout-column">
<div class="utrecht-form-field-description">
<#if realm.duplicateEmailsAllowed>
${msg("emailInstructionUsername")}
<#else>
${msg("emailInstruction")}
</#if>
</div>
</div>
</div>
<div class="rvo-form-field">
<div class="rvo-layout-column">
<div class="rvo-form-field__label">
<label for="username" class="rvo-label">
<#if !realm.loginWithEmailAllowed>
${msg("username")}
<#elseif !realm.registrationEmailAsUsername>
${msg("usernameOrEmail")}
<#else>
${msg("email")}
</#if>
</label>
</div>
<input
type="text"
id="username"
name="username"
class="utrecht-textbox utrecht-textbox--html-input utrecht-textbox--lg"
autofocus
value="${(auth.attemptedUsername!'')}"
aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"
/>
<#if messagesPerField.existsError('username')>
<div class="utrecht-form-field-description utrecht-form-field-description--invalid rvo-form-feedback rvo-form-feedback--error">
<span class="utrecht-icon rvo-icon rvo-icon-foutmelding rvo-icon--md" role="img" aria-label="Error"></span>
${kcSanitize(messagesPerField.get('username'))?no_esc}
</div>
</#if>
</div>
</div>
</div>
</fieldset>
</div>

<div class="utrecht-button-group">
<input
class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md"
type="submit"
value="${msg("doSubmit")}"
/>
</div>

<div class="rvo-form-footer">
<div id="kc-form-options-container">
<div id="kc-form-options">
<span>
<a
tabindex="8"
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="${url.loginUrl}"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-links rvo-icon--sm rvo-icon--hemelblauw rvo-link__icon--before"
role="img"
aria-label="${msg("back")}"
></span>
${msg("backToLogin")}
</a>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</#if>
</@layout.registrationLayout>
79 changes: 48 additions & 31 deletions theme/nl-design-system/login/login.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
<#if section = "header">
<#if section == "header">
${msg("loginAccountTitle")}
<#elseif section = "form">
<#elseif section == "form">
<div id="kc-form">
<div class="rvo-layout-column rvo-layout-gap--md">
<#if realm.password>
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<div class="rvo-layout-column rvo-layout-gap--md">
<div class="utrecht-form-fieldset rvo-form-fieldset">
<fieldset class="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset rvo-layout-gap--md">
<fieldset class="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset">

<#if !usernameHidden??>
<div role="group" aria-labelledby="username-label" class="utrecht-form-field utrecht-form-field--text rvo-form-field">
Expand All @@ -21,7 +21,6 @@
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</div>
</#if>

</div>
<input tabindex="2" id="username" name="username" placeholder="" type="text" class="utrecht-textbox utrecht-textbox--html-input utrecht-textbox--lg" autofocus autocomplete="username" dir="auto" value="${(login.username!'')}" aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"/>
</div>
Expand Down Expand Up @@ -60,48 +59,66 @@
</#if>
</fieldset>
</div>
<p class="utrecht-button-group">

<p class="utrecht-button-group ">
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<input tabindex="7" class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
</p>
<div></div>
</div>
</form>
</#if>
</div>
</div>
<script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
<#elseif section = "info" >
<#elseif section == "info">
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
<div id="kc-registration-container">
<div id="kc-registration">
<span>${msg("noAccount")} <a tabindex="8" class="rvo-link"
href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
<div
class="rvo-alert rvo-alert--info rvo-alert--padding-md"
defaultargs="[object Object]"
>
<span
class="utrecht-icon rvo-icon rvo-icon-info rvo-icon--xl rvo-status-icon-info"
role="img"
aria-label="Info"
></span>
<div class="rvo-alert-text">
<div>
<div>
${msg("noAccount")}
<a href="${url.registrationUrl}" class="rvo-link rvo-link--logoblauw" tabindex="8">${msg("doRegister")}</a>

</div>
</div>
</div>
</div>
</div>
</#if>
<#elseif section = "socialProviders" >
<#elseif section == "socialProviders">
<#if realm.password && social?? && social.providers?has_content>
<div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
<hr class="rvo-hr" />
<h2 class="utrecht-heading-2">${msg("identity-provider-login-label")}</h2>
<div class="rvo-layout-column">
<div class="rvo-item-list">
<div class="rvo-item-list__item">
${msg("identity-provider-login-label")}
</div>
<#list social.providers as p>
<div class="rvo-item-list__item">
<div
class="rvo-layout-row rvo-layout-justify-content-space-between rvo-layout-gap--sm rvo-layout--wrap"
>
<a
id="social-${p.alias}"
class="rvo-link"
href="${p.loginUrl}"
>
${p.displayName!}
</a>
</div>
</div>
</#list>
</div>

<ul class="rvo-item-list ${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
<#list social.providers as p>
<li class="rvo-item-list__item">
<a id="social-${p.alias}" class="rvo-link ${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
type="button" href="${p.loginUrl}">
<#if p.iconClasses?has_content>
<span class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" role="img" aria-hidden="true"></span>
<span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
<#else>
<span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
</#if>
</a>
</li>
</#list>
</ul>
</div>
</#if>
</#if>

</@layout.registrationLayout>
3 changes: 3 additions & 0 deletions theme/nl-design-system/login/messages/messages_en.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ backToLogin=Back to login
doForgotPassword=Forgot password
doLogIn=Log in
doRegister=Register
doSubmit=Submit
email=Email
emailForgotTitle=Forgot your email?
emailInstruction=Enter your username or email address and we will send you instructions on how to create a new password.
loginAccountTitle=Sign in to your account
noAccount=No account yet?
password=Password
Expand Down
3 changes: 3 additions & 0 deletions theme/nl-design-system/login/messages/messages_nl.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ backToLogin=Terug naar login
doForgotPassword=Wachtwoord vergeten
doLogIn=Inloggen
doRegister=Registreren
doSubmit=Verzenden
email=E-mailadres
emailForgotTitle=E-mailadres vergeten?
emailInstruction=Vul je gebruikersnaam of e-mailadres in en we sturen je instructies om een nieuw wachtwoord aan te maken.
loginAccountTitle=Inloggen op je account
noAccount=Geen account?
password=Wachtwoord
Expand Down
10 changes: 2 additions & 8 deletions theme/nl-design-system/login/template.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,14 +114,6 @@
<li class="rvo-topnav__item rvo-topnav__item--align-right">
</#if>
<div class="rvo-link rvo-topnav__link rvo-link--logoblauw">
<span
class="utrecht-icon rvo-icon rvo-icon-toegangspas rvo-icon--lg rvo-icon--wit"
role="img"
aria-label="User"
></span>
<#if (realm.displayName?has_content)>
${realm.displayName}
</#if>
</>
</li>
</ul>
Expand All @@ -132,6 +124,7 @@
<div class="rvo-layout-column rvo-layout-gap--xl">
<main class="rvo-max-width-layout rvo-max-width-layout--sm rvo-max-width-layout-inline-padding--md">
<div class="rvo-form">
<div class="rvo-layout-column rvo-layout-gap--md">
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
<#if displayRequiredFields>
<div class="rvo-alert rvo-alert--info rvo-alert--padding-md">
Expand Down Expand Up @@ -222,6 +215,7 @@
<#if displayInfo>
<#nested "info">
</#if>
</div>
</div>
</main>
</div>
Expand Down
Loading