Skip to content

Commit

Permalink
Uml 3062 js bug password button (#2507)
Browse files Browse the repository at this point in the history
* added default display to hidden

* javascript to change display dynamically

* reformat code

* amended code for show button hidden by default
  • Loading branch information
Lbagg1 authored Jan 18, 2024
1 parent bc2c552 commit c7703a8
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 92 deletions.
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{%- block form_open -%}
<form name="{{ form.getName() }}" method="post" novalidate action="{{ form.getAttribute('action') ?: path() }}">
{%- endblock form_open -%}
<form name="{{ form.getName() }}" method="post" novalidate action="{{ form.getAttribute('action') ?: path() }}">
{%- endblock form_open -%}


{%- block form_close -%}
</form>
{%- block form_close -%}
</form>
{%- endblock form_close -%}


Expand All @@ -30,7 +30,7 @@
{% else %}
{% if input_prefix is defined %}
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix" aria-hidden="true">{{ input_prefix }}</div>
<div class="govuk-input__prefix" aria-hidden="true">{{ input_prefix }}</div>
{% endif %}

{{- block('form_input') -}}
Expand Down Expand Up @@ -73,7 +73,9 @@
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">

<input class="govuk-checkboxes__input" id="{{ element.getName() }}" name="{{ element.getName() }}" value="{{ element.getCheckedValue() }}" type="checkbox" {% if element.getValue() == element.getCheckedValue() %}checked="checked"{% endif %}>
<input class="govuk-checkboxes__input" id="{{ element.getName() }}" name="{{ element.getName() }}"
value="{{ element.getCheckedValue() }}" type="checkbox"
{% if element.getValue() == element.getCheckedValue() %}checked="checked"{% endif %}>

<label class="govuk-label govuk-checkboxes__label" for="{{ element.getName() }}">
{{ label | raw }}
Expand All @@ -95,10 +97,13 @@

<div class="govuk-form-group {% if element.getMessages() is not empty %}govuk-form-group--error{% endif %}">
{{ govuk_error(element) }}
<div class="govuk-radios {% if hasConditional %}govuk-radios--conditional{% endif %}" data-module="govuk-radios">
{%- for option in value_options -%}
<div class="govuk-radios {% if hasConditional %}govuk-radios--conditional{% endif %}"
data-module="govuk-radios">
{%- for option in value_options -%}
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="{{ element.getName() }}-{{ loop.index }}" name="{{ element.getName() }}" type="radio" value="{{ option.value }}" {% if option.value == element.getValue() %}checked="checked"{% endif %} {% if option.conditionalContent is defined %}data-aria-controls="conditional-{{ element.getName() }}-{{ loop.index }}"{% endif %}>
<input class="govuk-radios__input" id="{{ element.getName() }}-{{ loop.index }}"
name="{{ element.getName() }}" type="radio" value="{{ option.value }}"
{% if option.value == element.getValue() %}checked="checked"{% endif %} {% if option.conditionalContent is defined %}data-aria-controls="conditional-{{ element.getName() }}-{{ loop.index }}"{% endif %}>
<label class="govuk-label govuk-radios__label" for="{{ element.getName() }}-{{ loop.index }}">
{{ option.label }}
</label>
Expand All @@ -109,8 +114,9 @@
{%- endif -%}
</div>
{%- if option.conditionalContent is defined -%}
<div class="govuk-radios__item govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-{{ element.getName() }}-{{ loop.index }}">
{%- for content in option.conditionalContent -%}
<div class="govuk-radios__item govuk-radios__conditional govuk-radios__conditional--hidden"
id="conditional-{{ element.getName() }}-{{ loop.index }}">
{%- for content in option.conditionalContent -%}
{{ content | raw }}
{%- endfor -%}
</div>
Expand Down Expand Up @@ -186,7 +192,7 @@


{% block form_input_hidden %}
<input id="{{ element.getName() }}" name="{{ element.getName() }}" type="hidden" value="{{ element.getValue() }}" />
<input id="{{ element.getName() }}" name="{{ element.getName() }}" type="hidden" value="{{ element.getValue() }}"/>
{% endblock form_input_hidden %}


Expand Down Expand Up @@ -233,7 +239,8 @@
{%- block input_show_hide_password -%}
<div class="moj-password-reveal">
{{- block('form_input') -}}
<button class="govuk-button govuk-button--secondary moj-password-reveal__button govuk-!-margin-bottom-0" type="button"
<button class="govuk-button govuk-button--secondary moj-password-reveal__button govuk-!-margin-bottom-0"
type="button" style="display: none"
data-showpassword="{% trans %}Show{% notes %}Show password label{% endtrans %}"
data-hidepassword="{% trans %}Hide{% notes %}Hide password label{% endtrans %}">
</button>
Expand All @@ -243,7 +250,7 @@
{%- block form_input -%}
<input class="govuk-input {{- block('input_extra_class') -}} {{- block('input_error_class') -}}"
id="{{ element.getName() }}" name="{{ element.getName() }}" type="{{ type }}" value="{{ value }}"
{% if inputmode is defined and inputmode is not empty %}inputmode="{{ inputmode }}"{% endif %}
{% if inputmode is defined and inputmode is not empty %}inputmode="{{ inputmode }}"{% endif %}
{% if pattern is defined and pattern is not empty %}pattern="{{ pattern }}"{% endif %}
{% if spellcheck is defined and spellcheck is not empty %}spellcheck="{{ spellcheck }}"{% endif %}
{% if autocomplete is defined and autocomplete is not empty %}autocomplete="{{ autocomplete }}"{% endif %}
Expand All @@ -252,8 +259,8 @@

{%- block form_input_area -%}
<textarea class="govuk-textarea" id="{{ element.getName() }}" name="{{ element.getName() }}"
rows="{% if rows is defined %}{{ rows }}{% else %}5{% endif %}"
{% if autocomplete is defined and autocomplete is not empty %}autocomplete="{{ autocomplete }}"{% endif %}
rows="{% if rows is defined %}{{ rows }}{% else %}5{% endif %}"
{% if autocomplete is defined and autocomplete is not empty %}autocomplete="{{ autocomplete }}"{% endif %}
{% if aria_labelledby is defined and aria_labelledby is not empty %}aria-labelledby="{{ aria_labelledby }}"{% endif %}>
{{- element.getValue() -}}
</textarea>
Expand Down
127 changes: 64 additions & 63 deletions service-front/web/build.js
Original file line number Diff line number Diff line change
@@ -1,76 +1,77 @@
import esbuild from 'esbuild';
import { default as fsWithCallbacks } from 'fs';
import {default as fsWithCallbacks} from 'fs';

const fs = fsWithCallbacks.promises;

(async () => {
const width = process.stdout.columns || 40;
const hr = '\r\n'.padStart(width / 1.5, '-');
const width = process.stdout.columns || 40;
const hr = '\r\n'.padStart(width / 1.5, '-');

let config = {
entrypoints: ['./dist/index.js'],
copy_files: {
'./src/robots.txt': 'robots.txt',
'./src/budget.json': 'budget.json',
'./src/images': 'assets/images',
'./node_modules/govuk-frontend/govuk/assets': 'assets',
'./node_modules/@ministryofjustice/frontend/moj/assets': 'assets',
},
out_dir: './dist',
};
let config = {
entrypoints: ['./dist/index.js'],
copy_files: {
'./src/robots.txt': 'robots.txt',
'./src/budget.json': 'budget.json',
'./src/images': 'assets/images',
'./node_modules/govuk-frontend/govuk/assets': 'assets',
'./node_modules/@ministryofjustice/frontend/moj/assets': 'assets',
},
out_dir: './dist',
};

console.log(
`${hr}- Building with:\r\n\r\n${config.entrypoints.join('\r\n')}\r\n${hr}`,
);
console.log(
`${hr}- Building with:\r\n\r\n${config.entrypoints.join('\r\n')}\r\n${hr}`,
);

//files to copy (uses experimental node cp)
console.log(`- Copying files:\r\n`);
for (const [file, file_dest] of Object.entries(config.copy_files)) {
const destination = config.out_dir + '/' + file_dest;
await fs.cp(file, destination, { recursive: true });
console.log(`Copied file from ${file} file to ${destination}`);
}
//files to copy (uses experimental node cp)
console.log(`- Copying files:\r\n`);
for (const [file, file_dest] of Object.entries(config.copy_files)) {
const destination = config.out_dir + '/' + file_dest;
await fs.cp(file, destination, {recursive: true});
console.log(`Copied file from ${file} file to ${destination}`);
}

let result = await esbuild
.build({
entryPoints: config.entrypoints,
bundle: true,
allowOverwrite: true,
outdir: config.out_dir,
minify: true,
plugins: [],
target: ['es2015', 'ie11'],
platform: 'browser',
metafile: true,
supported: {
arrow: false,
},
})
.catch((e) => {
console.log(e);
process.exit(1);
});
let result = await esbuild
.build({
entryPoints: config.entrypoints,
bundle: true,
allowOverwrite: true,
outdir: config.out_dir,
minify: true,
plugins: [],
target: ['es2015', 'ie11'],
platform: 'browser',
metafile: true,
supported: {
arrow: false,
},
})
.catch((e) => {
console.log(e);
process.exit(1);
});

await esbuild
.build({
entryPoints: ['dist/pdf.css'],
allowOverwrite: true,
bundle: true,
loader: {
'.woff': 'base64',
'.woff2': 'base64',
'.ttf': 'base64',
'.eot': 'base64',
'.svg': 'base64',
'.png': 'base64',
},
outfile: 'dist/stylesheets/pdf.css',
})
.catch(() => process.exit(1));
await esbuild
.build({
entryPoints: ['dist/pdf.css'],
allowOverwrite: true,
bundle: true,
loader: {
'.woff': 'base64',
'.woff2': 'base64',
'.ttf': 'base64',
'.eot': 'base64',
'.svg': 'base64',
'.png': 'base64',
},
outfile: 'dist/stylesheets/pdf.css',
})
.catch(() => process.exit(1));

console.log(hr);
console.log(hr);

let text = await esbuild.analyzeMetafile(result.metafile);
console.log(`- Analysis:\r\n${text}${hr}`);
let text = await esbuild.analyzeMetafile(result.metafile);
console.log(`- Analysis:\r\n${text}${hr}`);

console.log(hr);
console.log(hr);
})();
24 changes: 12 additions & 12 deletions service-front/web/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,29 @@ import addPolyFill from './javascript/polyfill.js';
import registerIapImagesComponents from './javascript/iapImages.js';

Accordion.prototype.updateOpenAllButton = function (expanded) {
var newButtonText = expanded
? this.$module.dataset.closetext
: this.$module.dataset.opentext;
newButtonText += `<span class="govuk-visually-hidden"> ${this.$module.dataset.sectiontext}</span>`;
this.$openAllButton.setAttribute('aria-expanded', expanded);
this.$openAllButton.innerHTML = newButtonText;
var newButtonText = expanded
? this.$module.dataset.closetext
: this.$module.dataset.opentext;
newButtonText += `<span class="govuk-visually-hidden"> ${this.$module.dataset.sectiontext}</span>`;
this.$openAllButton.setAttribute('aria-expanded', expanded);
this.$openAllButton.innerHTML = newButtonText;
};

initAll();
jsEnabled(document.body);
addPolyFill();
disableButtonOnClick(document.getElementsByTagName('form'));
new cookieConsent(
document.getElementsByClassName('cookie-banner')[0],
window.location.pathname === '/cookies',
document.getElementsByClassName('cookie-banner')[0],
window.location.pathname === '/cookies',
);
copyAccessCode();
showHidePassword();
registerIapImagesComponents();

if (
document.getElementsByClassName('js-signed-in').length > 0 &&
document.getElementById('dialog') !== null
document.getElementsByClassName('js-signed-in').length > 0 &&
document.getElementById('dialog') !== null
) {
new sessionDialog(document.getElementById('dialog'));
}
new sessionDialog(document.getElementById('dialog'));
}
3 changes: 3 additions & 0 deletions service-front/web/src/javascript/showHidePassword.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ const showHidePassword = () => {
let showPasswordText = showHidePwdButton.dataset.showpassword;
let hidePasswordText = showHidePwdButton.dataset.hidepassword;

//to display the show button
showHidePwdButton.style.display = 'inline-block';

showHidePwdButton.innerText = showPasswordText;

showHidePwdButton.onclick = function () {
Expand Down
8 changes: 7 additions & 1 deletion service-front/web/src/javascript/showHidePassword.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import showHidePassword from './showHidePassword';
describe('given a password and confirm password input is defined', () => {
test('it hides the confirm password box and changes the password type to text', () => {
test('it makes the show password button visible, and toggles the password visibility', () => {
document.body.innerHTML = `
<div class="govuk-form-group">
Expand All @@ -27,9 +27,15 @@ describe('given a password and confirm password input is defined', () => {
const button = document.querySelector(".moj-password-reveal__button");
const passwordInput = document.querySelector(".moj-password-reveal__input");

expect(button.style.display).toBe('');

showHidePassword();

expect(button.style.display).toBe('inline-block');

expect(passwordInput.getAttribute('type')).toBe('password');
expect(button.innerText).toBe('Show');

button.click();
expect(passwordInput.getAttribute('type')).toBe('text');
expect(button.innerText).toBe('Hide');
Expand Down

0 comments on commit c7703a8

Please sign in to comment.