Skip to content

Commit

Permalink
Updated social connections and forgot password and removed user from …
Browse files Browse the repository at this point in the history 
…nav (#3)
  • Loading branch information
@laurensWe
laurensWe authored Jan 16, 2025
2 parents 911e6db + e677369 commit 5bb882d
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 39 deletions.
92 changes: 92 additions & 0 deletions theme/nl-design-system/login/login-reset-password.ftl
View file
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
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
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
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
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

0 comments on commit 5bb882d

Please sign in to comment.