diff --git a/Gruntfile.js b/Gruntfile.js index ab2364690d..8bfd868ed1 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -43,6 +43,7 @@ const { LIGHTWEIGHT_CLIENT = 'true', MAX_EVENTS_AFTER = '', NODE_ENV = 'development', + UNSAFE_HARDCODED_TEST_PASSWORD = 'false', EXPOSE_SBP = '', ENABLE_UNSAFE_NULL_CRYPTO = 'false', UNSAFE_TRUST_ALL_MANIFEST_SIGNING_KEYS = 'false' @@ -227,6 +228,7 @@ module.exports = (grunt) => { 'process.env.LIGHTWEIGHT_CLIENT': `'${LIGHTWEIGHT_CLIENT}'`, 'process.env.MAX_EVENTS_AFTER': `'${MAX_EVENTS_AFTER}'`, 'process.env.NODE_ENV': `'${NODE_ENV}'`, + 'process.env.UNSAFE_HARDCODED_TEST_PASSWORD': `'${UNSAFE_HARDCODED_TEST_PASSWORD}'`, 'process.env.EXPOSE_SBP': `'${EXPOSE_SBP}'`, 'process.env.ENABLE_UNSAFE_NULL_CRYPTO': `'${ENABLE_UNSAFE_NULL_CRYPTO}'`, 'process.env.UNSAFE_TRUST_ALL_MANIFEST_SIGNING_KEYS': `'${UNSAFE_TRUST_ALL_MANIFEST_SIGNING_KEYS}'` diff --git a/frontend/assets/style/_mixins.scss b/frontend/assets/style/_mixins.scss index 54c15a9c4b..6bc8d27232 100644 --- a/frontend/assets/style/_mixins.scss +++ b/frontend/assets/style/_mixins.scss @@ -16,6 +16,21 @@ $payment-table-desktop-bp: 1290px; width: $dimensions; } +@mixin tooltip-style-common { + position: absolute; + top: 0; + left: 0; + min-width: 3rem; + max-width: 12rem; + border-radius: 3px; + padding: 0.5rem; + z-index: 50; // $zindex-tooltip: 50; + pointer-events: none; + background-color: var(--text_0); + opacity: 0.95; + color: var(--background_0); +} + @mixin overflow-touch { -webkit-overflow-scrolling: touch; } diff --git a/frontend/views/components/Tooltip.vue b/frontend/views/components/Tooltip.vue index 03896f215e..902ba82971 100644 --- a/frontend/views/components/Tooltip.vue +++ b/frontend/views/components/Tooltip.vue @@ -375,18 +375,7 @@ export default ({ .c-tooltip, .c-anchored-tooltip { - position: absolute; - top: 0; - left: 0; - min-width: 3rem; - max-width: 12rem; - border-radius: $radius; - padding: 0.5rem; - z-index: $zindex-tooltip; - pointer-events: none; - background-color: $text_0; - opacity: 0.95; - color: $background_0; + @include tooltip-style-common; &.has-text-center { text-align: center; diff --git a/frontend/views/containers/access/PasswordForm.vue b/frontend/views/containers/access/PasswordForm.vue index 52e90f69ba..aca27ae32c 100644 --- a/frontend/views/containers/access/PasswordForm.vue +++ b/frontend/views/containers/access/PasswordForm.vue @@ -1,8 +1,34 @@ diff --git a/frontend/views/containers/access/PasswordModal.vue b/frontend/views/containers/access/PasswordModal.vue index 37c8be4993..9c77318d00 100644 --- a/frontend/views/containers/access/PasswordModal.vue +++ b/frontend/views/containers/access/PasswordModal.vue @@ -14,7 +14,6 @@ modal-template(class='is-centered is-left-aligned' back-on-mobile=true ref='moda :value='form' :$v='$v' @enter='changePassword' - :hasIconRight='true' :showPlaceholder='false' :showPassword='false' size='is-large' @@ -26,7 +25,6 @@ modal-template(class='is-centered is-left-aligned' back-on-mobile=true ref='moda :value='form' :$v='$v' @enter='changePassword' - :hasIconRight='true' :showPlaceholder='false' :showPassword='false' size='is-large' @@ -38,7 +36,6 @@ modal-template(class='is-centered is-left-aligned' back-on-mobile=true ref='moda :value='form' :$v='$v' @enter='changePassword' - :hasIconRight='true' :showPlaceholder='false' :showPassword='false' size='is-large' diff --git a/frontend/views/containers/access/SignupForm.vue b/frontend/views/containers/access/SignupForm.vue index a1b910531a..f99e06fda5 100644 --- a/frontend/views/containers/access/SignupForm.vue +++ b/frontend/views/containers/access/SignupForm.vue @@ -14,22 +14,37 @@ form(data-test='signup' @submit.prevent='') v-error:username='{ attrs: { "data-test": "badUsername" } }' ) - .c-password-fields-container - password-form(:label='L("Password")' name='password' :$v='$v') + .c-auto-password-field-container + password-form( + mode='auto' + name='password' + :label='L("This is your password. Save it now.")' + :$v='$v' + @password-copied='onPasswordCopied' + ) - password-form(:label='L("Confirm Password")' name='passwordConfirm' :$v='$v') + .c-confirm-check-container + label.checkbox + input.input( + type='checkbox' + name='savedPassword' + v-model='form.savedPassword' + data-test='savedPassword' + @click.stop='' + ) + i18n I have saved the password - label.checkbox - input.input( - type='checkbox' - name='terms' - v-model='form.terms' - data-test='signTerms' - @click.stop='' - ) - i18n( - :args='{ a_: ``, _a: ""}' - ) I agree to the {a_}terms and conditions{_a} + label.checkbox + input.input( + type='checkbox' + name='terms' + v-model='form.terms' + data-test='signTerms' + @click.stop='' + ) + i18n( + :args='{ a_: ``, _a: ""}' + ) I agree to the {a_}terms and conditions{_a} banner-scoped(ref='formMsg' allow-a) @@ -37,14 +52,14 @@ form(data-test='signup' @submit.prevent='') button-submit( @click='signup' data-test='signSubmit' - :disabled='$v.form.$invalid' + :disabled='$v.form.$invalid || !ephemeral.passwordCopied' ) {{ L('Create an account') }}