Skip to content

~11.2 - IS-11032 Change submit button to have spinners and disabled behavior … #75

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

Open
urre wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

~11.2 - IS-11032 Change submit button to have spinners and disabled behavior … #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7a5b6e
IS-11032 Change submit button to have spinners and disabled behavior …
urre Feb 20, 2026
5695a76
IS-11032 Preserve submit button value and original disabled state dur…
urre Mar 17, 2026
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
7 changes: 5 additions & 2 deletions src/identity-server/templates/core/authentication-action/attribute-prompt/index.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@

#end

<button id="submit-button" type="submit" class="button button-fullwidth $!button_color mt2">#message(
"authentication-action.attribute-prompt.view.confirm")</button>
<button id="submit-button" type="submit" class="button button-loading button-fullwidth $!button_color mt2"><span>#message(
"authentication-action.attribute-prompt.view.confirm")</span></button>

#if($!_allowSkip == true)
#parse("fragments/jquery")
Expand All @@ -87,6 +87,9 @@
#end

</form>

#parse("fragments/button-loading")

#end

#parse("layouts/default")
15 changes: 9 additions & 6 deletions src/identity-server/templates/core/authentication-action/auto-link-account/index.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

<div class="area center">
<h1>#message("authentication-action.auto-link-account.view.info")</h1>

<ul class="account-linking-link">
#foreach($permission in $_responseModel.linkPermissions)
<li>
Expand All @@ -44,26 +44,29 @@
</li>
#end
</ul>

<p>#message("authentication-action.auto-link-account.view.text")</p>
</div>

<div class="sm-grid-container" sm-columns="2" gap="1">
<div>
<button id="submit-button" name="response" type="submit"
class="button button-fullwidth button-primary $!button_color mt2"
value="true">#message("authentication-action.auto-link-account.view.allow")</button>
class="button button-loading button-fullwidth button-primary $!button_color mt2"
value="true"><span>#message("authentication-action.auto-link-account.view.allow")</span></button>
</div>

<div>
<button id="cancel-button" name="response" type="submit"
class="button button-fullwidth button-primary-outline $!button_color mt2"
value="false">#message("authentication-action.auto-link-account.view.deny")</button>
class="button button-loading button-fullwidth button-primary-outline $!button_color mt2"
value="false"><span>#message("authentication-action.auto-link-account.view.deny")</span></button>
</div>

</div>

</form>

#parse("fragments/button-loading")

#end

#parse("layouts/default")
19 changes: 12 additions & 7 deletions src/identity-server/templates/core/authentication-action/opt-in-mfa/manage.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,16 @@

<div class="flex flex-center justify-between mb1">
<div class="form-field flex-auto #if($icons_only_authenticator_chooser)form-field-social-icon#end">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
<i class="icon #iconClassName($_factor.type)"></i>
#if(!$icons_only_authenticator_chooser)
<span>
#if($_factor.description)
$_factor.description
#else
$_factor.authenticatorId
#end
</span>
#end
</button>
</div>
Expand All @@ -59,14 +61,16 @@
<input type="hidden" name="oper" value="register"/>

<div class="form-field flex-auto #if($icons_only_authenticator_chooser)form-field-social-icon#end mb1">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end button-$_factor.type">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end button-$_factor.type">
<i class="icon #iconClassName($_factor.type)"></i>
#if(!$icons_only_authenticator_chooser)
<span>
#if($_factor.description)
$_factor.description
#else
$_factor.authenticatorId
#end
</span>
#end
</button>
</div>
Expand All @@ -80,28 +84,29 @@
</h4>
<form method="POST" name="new-batch" class="no-bottom-padding no-top-padding">
<input type="hidden" name="oper" value="new-batch"/>
<input type="submit" value="#message("${_templatePrefix}.manage.view.recovery-codes.create")" class="button button-fullwidth button-primary-outline"/>
<button type="submit" class="button button-fullwidth button-primary-outline button-loading"><span>#message("${_templatePrefix}.manage.view.recovery-codes.create")</span></button>
</form>
#end

<div class="area center">
#if($_canCompleteAuthentication)
<form method="POST" name="authenticate" class="no-bottom-padding no-top-padding">
<input type="hidden" name="oper" value="authenticate"/>
<button type="submit" value="Done" class="button button-tiny button-primary-outline">
<i class="icon ion-checkmark inlineicon"></i>#message("${_templatePrefix}.manage.view.complete-authentication")
<button type="submit" value="Done" class="button button-tiny button-primary-outline button-loading">
<i class="icon ion-checkmark inlineicon"></i><span>#message("${_templatePrefix}.manage.view.complete-authentication")</span>
</button>
</form>
#else
<form method="POST" name="exit" class="no-bottom-padding no-top-padding">
<input type="hidden" name="oper" value="exit"/>
<button type="submit" value="Done" class="button button-tiny button-primary-outline">
<i class="icon ion-checkmark inlineicon"></i>#message("${_templatePrefix}.manage.view.exit")
<button type="submit" value="Done" class="button button-tiny button-primary-outline button-loading">
<i class="icon ion-checkmark inlineicon"></i><span>#message("${_templatePrefix}.manage.view.exit")</span>
</button>
</form>
#end
</div>

#parse("fragments/button-loading")
#end

#parse("layouts/default")
5 changes: 3 additions & 2 deletions src/identity-server/templates/core/authentication-action/opt-in-mfa/recovery-code.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,15 @@
<input type="text" name="code" id="code" placeholder="#message("${_templatePrefix}.recovery-code.view.code.placeholder")" class="block full-width mb1 field-light" autofocus spellcheck="false" required autocapitalize="none">
<i class="form-field-icon icon ion-android-create"></i>
</div>
<input type="submit" value="#message("${_templatePrefix}.recovery-code.view.code.action")" class="button button-fullwidth button-primary"/>
<button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("${_templatePrefix}.recovery-code.view.code.action")</span></button>
</form>

<form method="POST" name="setup-confirm" class="no-bottom-padding no-top-padding">
<input type="hidden" name="cancel" value="true"/>
<button type="submit" class="button button-fullwidth button-link">#message("${_templatePrefix}.recovery-code.view.cancel")</button>
<button type="submit" class="button button-fullwidth button-link button-loading"><span>#message("${_templatePrefix}.recovery-code.view.cancel")</span></button>
</form>

#parse("fragments/button-loading")
#end

#parse("layouts/default")
7 changes: 4 additions & 3 deletions src/identity-server/templates/core/authentication-action/opt-in-mfa/recovery-codes-reset.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<div class="area">
<h3>#message("${_templatePrefix}.recovery-codes-reset.view.title")</h3>
<p>#message("${_templatePrefix}.recovery-codes-reset.view.sub-title")</p>

<div class="backup-codes">
<ul class="list-reset m0 px2 py3">
#foreach($_recoveryCode in $_recoveryCodes)
Expand All @@ -46,18 +46,19 @@
#if($_recoveryCodesBatchId)
<input type="hidden" name="recoveryCodesBatchId" value="$_recoveryCodesBatchId"/>
#end
<input type="submit" value="#message("${_templatePrefix}.recovery-codes-reset.view.confirm")" class="button button-fullwidth button-primary"/>
<button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("${_templatePrefix}.recovery-codes-reset.view.confirm")</span></button>
</form>
</div>

<div class="col-12 px1">
<form method="POST" name="setup-confirm" class="no-padding">
<input type="hidden" name="cancel" value="true"/>
<input type="submit" value="#message("${_templatePrefix}.recovery-codes-reset.view.cancel")" class="button button-fullwidth button-primary-outline"/>
<button type="submit" class="button button-fullwidth button-primary-outline button-loading"><span>#message("${_templatePrefix}.recovery-codes-reset.view.cancel")</span></button>
</form>
</div>
</div>

#parse("fragments/button-loading")
#end

#parse("layouts/default")
5 changes: 3 additions & 2 deletions src/identity-server/templates/core/authentication-action/opt-in-mfa/register-confirm.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,19 @@
<div class="col-12 px1">
<form method="POST" name="register-confirm" class="no-padding">
<input type="hidden" name="acr" value="$_factor.acr"/>
<input type="submit" value='#message("${_templatePrefix}.register-confirm.view.confirm")' class="button button-fullwidth button-primary"/>
<button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("${_templatePrefix}.register-confirm.view.confirm")</span></button>
</form>
</div>

<div class="col-12 px1">
<form method="POST" name="setup-confirm" class="no-padding">
<input type="hidden" name="cancel" value="true"/>
<input type="submit" value="#message("${_templatePrefix}.register-confirm.view.cancel")" class="button button-fullwidth button-primary-outline"/>
<button type="submit" class="button button-fullwidth button-primary-outline button-loading"><span>#message("${_templatePrefix}.register-confirm.view.cancel")</span></button>
</form>
</div>
</div>

#parse("fragments/button-loading")
#end

#parse("layouts/default")
5 changes: 4 additions & 1 deletion src/identity-server/templates/core/authentication-action/opt-in-mfa/select-to-manage.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,16 @@
<input type="hidden" name="acr" value="${_factor.acr}"/>
<input type="hidden" name="manage" value="true" />
<div class="form-field #if($icons_only_authenticator_chooser)form-field-social-icon#end mb1">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
<i class="icon #iconClassName($_factor.type)"></i>
#if(!$icons_only_authenticator_chooser)
<span>
#if($_factor.description)
$_factor.description
#else
$_factor.authenticatorId
#end
</span>
#end
</button>
</div>
Expand All @@ -53,6 +55,7 @@
</div>
#end

#parse("fragments/button-loading")
#end

#parse("layouts/default")
9 changes: 7 additions & 2 deletions src/identity-server/templates/core/authentication-action/opt-in-mfa/select.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,16 @@
<form method="POST" name="${_factor.acr}" class="no-bottom-padding no-top-padding">
<input type="hidden" name="acr" value="${_factor.acr}"/>
<div class="form-field #if($icons_only_authenticator_chooser)form-field-social-icon#end mb1">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
<i class="icon #iconClassName($_factor.type)"></i>
#if(!$icons_only_authenticator_chooser)
<span>
#if($_factor.description)
$_factor.description
#else
$_factor.authenticatorId
#end
</span>
#end
</button>
</div>
Expand Down Expand Up @@ -74,14 +76,16 @@
<input type="hidden" name="acr" value="${_factor.acr}"/>
<input type="hidden" name="manage" value="true" />
<div class="form-field #if($icons_only_authenticator_chooser)form-field-social-icon#end mb1">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
<i class="icon #iconClassName($_factor.type)"></i>
#if(!$icons_only_authenticator_chooser)
<span>
#if($_factor.description)
$_factor.description
#else
$_factor.authenticatorId
#end
</span>
#end
</button>
</div>
Expand Down Expand Up @@ -121,6 +125,7 @@
})()
</script>

#parse("fragments/button-loading")
#end

#parse("layouts/default")
9 changes: 4 additions & 5 deletions src/identity-server/templates/core/authentication-action/opt-in-mfa/setup-confirm.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,13 @@
#end
<!-- This can be used to add a checkbox -->
<input type="hidden" name="confirm" value="on"/>
<input type="submit" value="#message("${_templatePrefix}.setup-confirm.view.confirm")" class="button button-fullwidth button-primary"/>
<button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("${_templatePrefix}.setup-confirm.view.confirm")</span></button>
</form>
</div>
<div class="col-12 px1">
<form method="POST" name="setup-cancel" class="no-padding">
<input type="hidden" name="cancel" value="true"/>
<input type="submit" value="#message("${_templatePrefix}.setup-confirm.view.cancel")" class="button button-fullwidth button-primary-outline"/>
<button type="submit" class="button button-fullwidth button-primary-outline button-loading"><span>#message("${_templatePrefix}.setup-confirm.view.cancel")</span></button>
</form>
</div>
</div>
Expand All @@ -68,9 +68,8 @@
window.print();
})
}
})
})
</script>

#end
#parse("fragments/button-loading")#end

#parse("layouts/default")
9 changes: 6 additions & 3 deletions src/identity-server/templates/core/authentication-action/opt-in-mfa/setup.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,16 @@
<form method="POST" name="${_factor.acr}" class="no-bottom-padding no-top-padding">
<input type="hidden" name="acr" value="${_factor.acr}"/>
<div class="form-field #if($icons_only_authenticator_chooser)form-field-social-icon#end mb1">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
<button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
<i class="icon #iconClassName($_factor.type)"></i>
#if(!$icons_only_authenticator_chooser)
<span>
#if($_factor.description)
$_factor.description
#else
$_factor.authenticatorId
#end
</span>
#end
</button>
</div>
Expand All @@ -45,13 +47,14 @@
<form method="POST" name="optOut" class="no-bottom-padding no-top-padding">
<input type="hidden" name="optOut" value="true"/>
<div class="flex flex-column">
<button type="submit" value="Opt-out of second factor" class="button button-link">
#message("${_templatePrefix}.setup.view.opt-out.action")
<button type="submit" value="Opt-out of second factor" class="button button-link button-loading">
<span>#message("${_templatePrefix}.setup.view.opt-out.action")</span>
</button>
<p>#message("${_templatePrefix}.setup.view.opt-out.description")</p>
</div>
</form>
#end
#parse("fragments/button-loading")
#end

#parse("layouts/default")
11 changes: 7 additions & 4 deletions src/identity-server/templates/core/authentication-action/request-acknowledgement/index.vm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,23 @@
<div #if($_cancellable == true) class="sm-grid-container" sm-columns="2" gap="1"#end>
<div>
<button id="submit-button" name="response" type="submit"
class="button button-fullwidth button-primary $!button_color mt2"
value="true">#message($_acceptButtonLabel)</button>
class="button button-loading button-fullwidth button-primary $!button_color mt2"
value="true"><span>#message($_acceptButtonLabel)</span></button>
</div>

#if($_cancellable == true)
<div>
<button id="cancel-button" name="response" type="submit"
class="button button-fullwidth button-primary-outline $!button_color mt2"
value="false">#message($_cancelButtonLabel)</button>
class="button button-loading button-fullwidth button-primary-outline $!button_color mt2"
value="false"><span>#message($_cancelButtonLabel)</span></button>
</div>
#end
</div>

</form>

#parse("fragments/button-loading")

#end

#parse("layouts/default")
Loading