Skip to content

Commit

Permalink
remove other inline event handlers
Browse files Browse the repository at this point in the history
  • Loading branch information
@hobbitronics
hobbitronics committed Nov 27, 2024
1 parent cb9cab6 commit 31a93d0
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 118 deletions.
12 changes: 11 additions & 1 deletion modules/material/themes/material/default/other_mfas.twig
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll(".mdl-menu__item").forEach(function(li) {
li.addEventListener('click', function(e) {
location.href = li.dataset.callback;
});
});
});
</script>

{% if other_options|length > 0 %}
<div layout-children="column" child-spacing="center">
{# used type=button to avoid form submission on click since this is just used to display the ul #}
Expand All @@ -9,7 +19,7 @@
<ul class="mdl-menu mdl-js-menu mdl-menu--top-left" data-mdl-for="others">
{% for option in other_options %}
{# TODO: Non-interactive elements should not be assigned mouse or keyboard event listeners. #}
<li class="mdl-menu__item" onclick="location.href = '{{ option.callback|raw }}'">
<li class="mdl-menu__item" data-callback="{{ option.callback|raw }}">
<span class="mdl-list__item-primary-content">
<img
class="mdl-list__item-icon"
Expand Down
109 changes: 56 additions & 53 deletions modules/material/themes/material/mfa/new-backup-codes.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,63 @@

<script src="bowser.1.9.4.min.js"></script>
<script>
function disableUnsupportedFeatures() {
if (bowser.msie) {
disablePrint();
disableDownload();
} else if (bowser.msedge) {
disableDownload();
document.addEventListener('DOMContentLoaded', function() {
function disableUnsupportedFeatures() {
if (bowser.msie) {
disablePrint();
disableDownload();
} else if (bowser.msedge) {
disableDownload();
}
}
function disablePrint() {
document.querySelector('button#print').disabled = true;
document.querySelector('button#print').classList.add('not-allowed');
document.querySelector('button#print').title = '{{ '{mfa:unsupported}'|trans|e('js')|raw }}';
}
}
function disablePrint() {
document.querySelector('button#print').disabled = true;
document.querySelector('button#print').classList.add('not-allowed');
document.querySelector('button#print').title = '{{ '{mfa:unsupported}'|trans|e('js')|raw }}';
}
function disableDownload() {
document.querySelector('a[download]').href = '';
document.querySelector('a[download]').classList.add('mdl-button--disabled', 'not-allowed');
document.querySelector('a[download]').title = '{{ '{mfa:unsupported}'|trans|e('js')|raw }}';
}
function disableDownload() {
document.querySelector('a[download]').href = '';
document.querySelector('a[download]').classList.add('mdl-button--disabled', 'not-allowed');
document.querySelector('a[download]').title = '{{ '{mfa:unsupported}'|trans|e('js')|raw }}';
}
function copyCodesToClipboard(button) {
document.querySelector('textarea').select();
// FIXME: replace deprecated document.execCommand
document.execCommand('copy');
button.innerHTML = button.innerHTML.replace(
'{{ '{mfa:button_copy}'|trans }}',
'{{ '{mfa:button_copied}'|trans }}'
);
}
function printElement(selector) {
let elementToPrint = document.querySelector(selector);
elementToPrint.classList.add('printable-codes');
window.print();
}
document.querySelector('body').addEventListener('load', disableUnsupportedFeatures);
document.getElementById('print').addEventListener('click', function() {
printElement('#code-card');
});
document.getElementById('copyBtn').addEventListener('click', function() {
copyCodesToClipboard(this);
});
document.querySelector('input[type="checkbox"]').addEventListener('change', function(e) {
contBtn = document.querySelector('button[name="continue"]');
contBtn.disabled = !e.checked;
});
});
</script>
</head>
<body class="gradient-bg" onload="disableUnsupportedFeatures()">
<body class="gradient-bg">
<div class="mdl-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
Expand Down Expand Up @@ -71,19 +105,9 @@
</div>

<div class="mdl-card__actions" layout-children="row" child-spacing="space-around">
<script>
function printElement(selector) {
var elementToPrint = document.querySelector(selector);
elementToPrint.classList.add('printable-codes');
window.print();
}
</script>
<button
class="mdl-button mdl-button--primary"
type="button"
onclick="printElement('#code-card')"
id="print"
>
{{ '{mfa:button_print}'|trans }}
Expand All @@ -97,20 +121,7 @@
{{ '{mfa:button_download}'|trans }}
</a>

<script>
function copyCodesToClipboard(button) {
document.querySelector('textarea').select();
{# FIXME: replace deprecated document.execCommand #}
document.execCommand('copy');
button.innerHTML = button.innerHTML.replace(
'{{ '{mfa:button_copy}'|trans }}',
'{{ '{mfa:button_copied}'|trans }}'
);
}
</script>
<button class="mdl-button mdl-button--primary" type="button" onclick="copyCodesToClipboard(this)">
<button id="copyBtn" class="mdl-button mdl-button--primary" type="button">
{{ '{mfa:button_copy}'|trans }}
<textarea class="out-of-sight">{{ codes_for_clipboard }}</textarea>
</button>
Expand Down Expand Up @@ -148,22 +159,14 @@

<div layout-children="row" class="fill-parent">
<label class="mdl-checkbox mdl-js-checkbox" flex>
<input type="checkbox" onclick="toggleContinue(this)" class="mdl-checkbox__input">
<input type="checkbox" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">{{ '{mfa:new_codes_saved}'|trans }}</span>
</label>

<button name="continue" class="mdl-button mdl-button--raised mdl-button--primary" disabled>
{{ '{mfa:button_continue}'|trans }}
</button>
</div>

<script>
function toggleContinue(event) {
contBtn = document.querySelector('button[name="continue"]');
contBtn.disabled = !event.checked;
}
</script>
</form>
</main>
</div>
Expand Down
96 changes: 50 additions & 46 deletions modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,64 +8,69 @@
<script src="{{ browser_js_path }}"></script>

<script>
function verifyWebAuthn() {
const loginChallenge = {{ mfa_option_data|raw }};
SimpleWebAuthnBrowser.startAuthentication(loginChallenge.publicKey).then(submitForm).catch(handleError);
}
function handleError(error) {
console.error(error)
const errorMessage = createMessage(error)
const errorNode = document.querySelector('p.error');
errorNode.classList.remove('hide');
errorNode.querySelector('span').textContent = errorMessage;
offerRetry();
}
function createMessage(error) {
switch (error.name) {
case 'AbortError':
return '{{ '{mfa:webauthn_error_abort}'|trans|e('js')|raw }}';
case 'NotAllowedError':
return '{{ '{mfa:webauthn_error_not_allowed}'|trans|e('js')|raw }}';
default:
return '{{ '{mfa:webauthn_error_unknown}'|trans|e('js')|raw }}';
document.addEventListener('DOMContentLoaded', function() {
function verifyWebAuthn() {
const loginChallenge = {{ mfa_option_data|raw }};
SimpleWebAuthnBrowser.startAuthentication(loginChallenge.publicKey).then(submitForm).catch(handleError);
}
}
function offerRetry() {
const retryButton = document.querySelector('.mdl-button.mdl-color-text--red');
function handleError(error) {
console.error(error)
const errorMessage = createMessage(error)
retryButton.classList.remove('hide');
}
const errorNode = document.querySelector('p.error');
errorNode.classList.remove('hide');
errorNode.querySelector('span').textContent = errorMessage;
function submitForm(webAuthnResponse) {
const form = document.querySelector('form');
const submissionInput = createHiddenInput('submitMfa');
const webAuthnResponseInput = createHiddenInput('mfaSubmission');
offerRetry();
}
webAuthnResponseInput.value = JSON.stringify(webAuthnResponse);
function createMessage(error) {
switch (error.name) {
case 'AbortError':
return '{{ '{mfa:webauthn_error_abort}'|trans|e('js')|raw }}';
case 'NotAllowedError':
return '{{ '{mfa:webauthn_error_not_allowed}'|trans|e('js')|raw }}';
default:
return '{{ '{mfa:webauthn_error_unknown}'|trans|e('js')|raw }}';
}
}
form.appendChild(submissionInput);
form.appendChild(webAuthnResponseInput);
function offerRetry() {
const retryButton = document.querySelector('.mdl-button.mdl-color-text--red');
form.submit();
}
retryButton.classList.remove('hide');
}
function createHiddenInput(name) {
const input = document.createElement('input');
function submitForm(webAuthnResponse) {
const form = document.querySelector('form');
const submissionInput = createHiddenInput('submitMfa');
const webAuthnResponseInput = createHiddenInput('mfaSubmission');
input.type = 'hidden';
input.name = name;
webAuthnResponseInput.value = JSON.stringify(webAuthnResponse);
return input;
}
form.appendChild(submissionInput);
form.appendChild(webAuthnResponseInput);
form.submit();
}
function createHiddenInput(name) {
const input = document.createElement('input');
input.type = 'hidden';
input.name = name;
return input;
}
document.querySelector('.mdl-button.mdl-color-text--red').addEventListener('click', verifyWebAuthn);
document.querySelector('body').addEventListener{'load', verifyWebAuthn};
});
</script>
</head>

<body class="gradient-bg" onload="verifyWebAuthn()">
<body class="gradient-bg">
<div class="mdl-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
Expand Down Expand Up @@ -117,7 +122,6 @@
<!-- used type=button to avoid form submission on click -->
<button
type="button"
onclick="verifyWebAuthn()"
class="mdl-button mdl-color-text--red {{ error_message is empty ? 'hide' : 'show' }}"
>
{{ '{mfa:button_try_again}'|trans }}
Expand Down
44 changes: 26 additions & 18 deletions modules/material/themes/material/profilereview/review.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,33 @@
{{ include('header.twig') }}

<script>
function prettifyDates() {
const relevantNodes = Array.from(document.querySelectorAll('span.mdl-list__item-text-body'))
relevantNodes.filter(hasDate).map(replaceWithLocaleDate)
}
const hasDate = node => node.innerText.includes('Z')
const replaceWithLocaleDate = node => {
// assuming a string like this but could be in Spanish, French or Korean for example: "last used: 2019-04-04T13:30:04Z"
const matches = node.innerText.match(/(.*: )(.*)/)
const label = matches[1]
const date = new Date(matches[2])
node.innerText = `${label} ${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
}
document.addEventListener('DOMContentLoaded', function() {
function prettifyDates() {
const relevantNodes = Array.from(document.querySelectorAll('span.mdl-list__item-text-body'))
relevantNodes.filter(hasDate).map(replaceWithLocaleDate)
}
const hasDate = node => node.innerText.includes('Z')
const replaceWithLocaleDate = node => {
// assuming a string like this but could be in Spanish, French or Korean for example: "last used: 2019-04-04T13:30:04Z"
const matches = node.innerText.match(/(.*: )(.*)/)
const label = matches[1]
const date = new Date(matches[2])
node.innerText = `${label} ${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
}
document.querySelector('body').addEventListener('load', prettifyDates)
document.querySelectorA("mdl-button mdl-button--colored").addEventListener('click', function(e) {
e.preventDefault()
document.querySelector('button').click()
});
});
</script>
</head>
<body class="gradient-bg" onload="prettifyDates()">
<body class="gradient-bg">
<div class="mdl-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
Expand Down Expand Up @@ -116,7 +124,7 @@
</section>

<section layout-children="row" child-spacing="end" class="fill-parent margin">
<a href="{{ profile_url }}" target="_blank" rel="noopener" onclick="document.querySelector('button').click()"
<a href="{{ profile_url }}" target="_blank" rel="noopener"
class="mdl-button mdl-button--colored" layout-children="row">
{{ '{review:button_update}'|trans }} <i class="material-icons">launch</i>
</a>
Expand Down

0 comments on commit 31a93d0

Please sign in to comment.