Merge branch 'mfa-messaging-fixes' into 'develop'

MFA improvements

See merge request soapbox-pub/soapbox-fe!985
This commit is contained in:
Alex Gleason 2022-01-12 19:02:52 +00:00
commit 7e5fb63deb
9 changed files with 25 additions and 24 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -580,12 +580,12 @@
"media_gallery.toggle_visible": "Toggle visibility", "media_gallery.toggle_visible": "Toggle visibility",
"media_panel.empty_message": "No media found.", "media_panel.empty_message": "No media found.",
"media_panel.title": "Media", "media_panel.title": "Media",
"mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth.",
"mfa.mfa_setup_enter_password": "Enter your current password to confirm your identity:", "mfa.mfa_setup_enter_password": "Enter your current password to confirm your identity",
"mfa.mfa_setup_scan_description": "Using your two-factor app, scan this QR code or enter text key:", "mfa.mfa_setup_scan_description": "Using your two-factor app, scan this QR code or enter the text key.",
"mfa.mfa_setup_scan_key": "Key:", "mfa.mfa_setup_scan_key": "Key:",
"mfa.mfa_setup_scan_title": "Scan", "mfa.mfa_setup_scan_title": "Scan",
"mfa.mfa_setup_verify_description": "To enable two-factor authentication, enter the code from your two-factor app:", "mfa.mfa_setup_verify_description": "To enable two-factor authentication, enter the code from your two-factor app",
"mfa.mfa_setup_verify_title": "Verify", "mfa.mfa_setup_verify_title": "Verify",
"mfa.otp_enabled_description": "You have enabled two-factor authentication via OTP.", "mfa.otp_enabled_description": "You have enabled two-factor authentication via OTP.",
"mfa.otp_enabled_title": "OTP Enabled", "mfa.otp_enabled_title": "OTP Enabled",

Binary file not shown.

View file

@ -1,6 +1,10 @@
.security-settings-panel { .security-settings-panel {
margin: 20px; margin: 20px;
.simple_form {
padding: 0 !important;
}
h1.security-settings-panel__setup-otp { h1.security-settings-panel__setup-otp {
font-size: 20px; font-size: 20px;
line-height: 1.25; line-height: 1.25;
@ -26,7 +30,7 @@
} }
.backup_codes { .backup_codes {
margin: 20px; margin: 10px 0;
font-weight: bold; font-weight: bold;
padding: 15px 20px; padding: 15px 20px;
font-size: 14px; font-size: 14px;
@ -35,6 +39,9 @@
text-align: center; text-align: center;
position: relative; position: relative;
min-height: 125px; min-height: 125px;
display: flex;
justify-content: center;
align-items: center;
.backup_code { .backup_code {
margin: 5px auto; margin: 5px auto;
@ -42,22 +49,30 @@
} }
.security-settings-panel__setup-otp__buttons { .security-settings-panel__setup-otp__buttons {
margin: 20px; margin: 15px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.button { .button {
min-width: 182px; flex: 1;
} }
} }
div.confirm-key { &__qr-code {
margin: 20px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
&__confirm-key {
display: block; display: block;
font-size: 16px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
color: var(--primary-text-color--faint); color: var(--primary-text-color--faint);
font-weight: 400; font-weight: 400;
margin: 0 0 20px 20px; margin-top: 10px;
} }
} }

View file

@ -643,20 +643,6 @@ code {
font-size: 24px; font-size: 24px;
} }
.qr-code {
flex: 0 0 auto;
background: var(--foreground-color);
padding: 4px;
margin: 0 10px 20px 0;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
display: inline-block;
svg {
display: block;
margin: 0;
}
}
.simple_form { .simple_form {
.warning { .warning {
box-sizing: border-box; box-sizing: border-box;