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 @@
-label.field
+component.field(:is='mode === "manual" ? "label" : "div"')
.label(v-if='label') {{ label }}
+
+ .inputgroup.c-mode-auto(
+ v-if='mode === "auto"'
+ :class='{ "password-copied": ephemeral.showCopyFeedback }'
+ v-error:[name]=''
+ )
+ input.input.with-single-addon.c-auto-password(
+ :class='{ "blurred-text has-ellipsis": ephemeral.pwMode === "text" }'
+ :type='ephemeral.pwMode'
+ :data-test='name'
+ :value='ephemeral.randomPassword'
+ :disabled='true'
+ )
+
+ .addons
+ button.is-success.c-copy-btn(
+ type='button'
+ data-test='copyPassword'
+ @click.stop='copyPassword'
+ )
+ span.c-copied(v-if='ephemeral.showCopyFeedback')
+ i.icon-check-circle
+ i18n Copied
+ i18n.c-copy(v-else) Copy
+
.inputgroup(
- v-error:[name]='{ attrs: { "data-test": "badPassword" }}'
+ v-else
+ v-error:[name]=''
)
input.input.with-single-addon(
:type='isLock ? "password" : "text"'
@@ -17,7 +43,6 @@ label.field
.addons
button.is-icon(
type='button'
- v-if='hasIconRight'
:aria-label='L("Toggle password visibility")'
:aria-pressed='!isLock'
@click.prevent='isLock = !isLock'
@@ -26,13 +51,33 @@ label.field
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') }}