diff --git a/customize.dist/pages/recovery.js b/customize.dist/pages/recovery.js
index b34758bed..33c19f61f 100644
--- a/customize.dist/pages/recovery.js
+++ b/customize.dist/pages/recovery.js
@@ -16,9 +16,8 @@ Msg.mfa_disable = "Disable 2FA"; // XXX also in settings
Msg.continue = "Continue"; // XXX also in settings
Msg.recovery_forgot = 'Forgot recovery code';
-Msg.recovery_forgot_text = 'Please copy the following information and email it toyour instance administrators';
+Msg.recovery_forgot_text = 'Please copy the following information and email it to your instance administrators';
-Msg.recovery_mfa_wrong = "Invalid username or password";
Msg.recovery_mfa_error = "Unknown error. Please reload and try again.";
Msg.recovery_mfa_disabled = "Multi-factor authentication is already disabled for this account.";
@@ -43,7 +42,7 @@ Msg.recovery_mfa_disabled = "Multi-factor authentication is already disabled for
h('div#userForm.form-group.hidden.col-md-6', [
h('div.cp-recovery-step.step1', [
h('p', Msg.recovery_mfa_description),
- h('div.alert.alert-danger.wrong-cred.cp-hidden', Msg.recovery_mfa_wrong),
+ h('div.alert.alert-danger.wrong-cred.cp-hidden', Msg.login_noSuchUser),
h('input.form-control#username', {
type: 'text',
autocomplete: 'off',
diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
index 260716aa0..8ad8c3b43 100644
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@@ -33,6 +33,7 @@
font-size: large;
box-shadow: @alertify_box-shadow;
+ border-radius: @variables_radius;
&, &.default {
// FIXME
background: @cp_alertify-log-bg;
diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index 23d3ce502..331be3962 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -60,6 +60,7 @@
@cryptpad_color_red_fader: fade(@cryptpad_color_red, 15%);
@cryptpad_color_warn_red: @cryptpad_color_red_fade;
@cryptpad_color_dark_red: #9e0000;
+@cryptpad_color_mid_red: #FF8880;
@cryptpad_color_light_red: #FFD4D4;
@cryptpad_color_light_red_fade: fade(@cryptpad_color_light_red, 20%);
@cryptpad_color_orange: #f49842;
@@ -181,6 +182,10 @@
@cp_sidebar-left-active-fg: @cryptpad_color_grey_900;
@cp_sidebar-hint: fade(@cryptpad_text_col, 80%);
+// Settings
+@cp_settings_enabled: @cryptpad_color_light_green;
+@cp_settings_disabled: @cryptpad_color_mid_red;
+
// Drive
@cp_drive-bg: @cp_sidebar-right-bg;
@cp_drive-fg: @cp_sidebar-right-fg;
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 3f944c7dd..eb7bcfc07 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -60,6 +60,7 @@
@cryptpad_color_red_fader: fade(@cryptpad_color_red, 15%);
@cryptpad_color_warn_red: @cryptpad_color_red_fade;
@cryptpad_color_dark_red: #9e0000;
+@cryptpad_color_mid_red: #FF8880;
@cryptpad_color_light_red: #FFD4D4;
@cryptpad_color_light_red_fade: fade(@cryptpad_color_light_red, 75%);
@cryptpad_color_orange: #f49842;
@@ -180,6 +181,10 @@
@cp_sidebar-left-active-fg: @cryptpad_color_grey_200;
@cp_sidebar-hint: @cryptpad_color_grey_600;
+// Settings
+@cp_settings_enabled: extract(@cp_palette-dark, 4);
+@cp_settings_disabled: @cryptpad_color_dark_red;
+
// Drive
@cp_drive-bg: @cp_sidebar-right-bg;
@cp_drive-fg: @cp_sidebar-right-fg;
diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less
index 5f917b6c6..1e96b801b 100644
--- a/customize.dist/src/less2/include/forms.less
+++ b/customize.dist/src/less2/include/forms.less
@@ -24,6 +24,7 @@
font-size: @colortheme_app-font-size;
}
&[readonly] {
+ //margin-top:1rem;
background-color: @cp_forms-readonly;
border-color: @cp_forms-readonly-border;
color: @cp_forms-fg;
@@ -53,6 +54,16 @@
}
}
}
+ &.enabled{
+ span, i{
+ color: @cp_settings_enabled;
+ }
+ }
+ &.disabled{
+ span, i{
+ color: @cp_settings_disabled;
+ }
+ }
textarea, div.cp-textarea {
padding: 8px;
@@ -101,12 +112,11 @@
}
}
}
- button.cp-button-confirm-placeholder:not(.new) {
- margin-bottom: 3px !important;
- }
+ //button.cp-button-confirm-placeholder:not(.new) {
+ // margin-bottom: 3px !important;
+ //}
button.btn {
-
background-color: @cp_buttons-cancel;
box-sizing: border-box;
outline: 0;
@@ -117,6 +127,7 @@
text-align: center;
text-transform: uppercase;
font-size: 14px;
+ font-weight:bold;
text-decoration: none;
cursor: pointer;
border-radius: @variables_radius;
@@ -167,6 +178,7 @@
}
}
+
&.danger-alt, &.btn-danger-alt, &.btn-danger-outline {
border-color: @cp_buttons-red;
color: @cp_buttons-red-text;
@@ -177,7 +189,7 @@
}
}
- &.primary, &.btn-primary, &.btn-success {
+ &.primary, &.btn-primary, &.btn-success, &.disable-button{
background-color: @cp_buttons-primary;
color: @cp_buttons-primary-text;
border-color: @cp_buttons-primary-border;
diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less
index 0117244c6..03fe14d2b 100644
--- a/customize.dist/src/less2/include/sidebar-layout.less
+++ b/customize.dist/src/less2/include/sidebar-layout.less
@@ -18,6 +18,11 @@
display: flex;
flex: 1;
min-height: 0;
+ @media(min-width:800px){
+ #cp-sidebarlayout-leftside {
+ overflow-y:scroll;
+ }
+ }
#cp-sidebarlayout-leftside {
color: @cp_sidebar-left-fg;
width: 250px;
@@ -98,6 +103,9 @@
}
margin-bottom: 20px;
}
+ .secret-code{
+ margin-top:1rem;
+ }
[type="text"], [type="password"], button {
vertical-align: middle;
min-width: 40px;
@@ -127,11 +135,11 @@
&>div {
margin: 10px 0;
}
- button.btn {
- margin: 0 5px 0 0;
- }
+ //button.btn {
+ // margin: 0 5px 0 0;
+ //}
span.cp-password-container {
- margin-bottom: 1px;
+ margin-bottom: 1rem;
}
}
@media screen and (max-width: @browser_media-medium-screen) {
diff --git a/customize.dist/src/less2/pages/page-recovery.less b/customize.dist/src/less2/pages/page-recovery.less
index 872707fe7..19f3b92a8 100644
--- a/customize.dist/src/less2/pages/page-recovery.less
+++ b/customize.dist/src/less2/pages/page-recovery.less
@@ -81,6 +81,15 @@
}
.cp-recover-email {
height: 164px;
+ overflow: scroll;
+ }
+ //for chrome,safari
+ .cp-recover-email::-webkit-scrollbar{
+ width:0;
+ }
+
+ .btn-secondary{
+ margin-top:1rem;
}
#userForm {
padding: 15px;
diff --git a/customize.dist/src/outer.css b/customize.dist/src/outer.css
index 564dc8472..780b0bb1d 100644
--- a/customize.dist/src/outer.css
+++ b/customize.dist/src/outer.css
@@ -18,3 +18,4 @@ iframe-placeholder, #sbox-iframe, #sbox-secure-iframe {
padding:0;
overflow:hidden;
}
+
diff --git a/www/recovery/main.js b/www/recovery/main.js
index 4f236a03b..372175616 100644
--- a/www/recovery/main.js
+++ b/www/recovery/main.js
@@ -145,12 +145,10 @@ define([
}, 100);
});
- UI.confirmButton($recoverConfirm[0], {
- multiple: true
- }, function () {
+ $recoverConfirm[0].onclick = function () {
if (!blockKeys) { return; }
revokeTOTP();
- });
+ };
});
});
diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index da3a5ccf1..4109d0d4f 100644
--- a/www/settings/app-settings.less
+++ b/www/settings/app-settings.less
@@ -87,14 +87,27 @@
}
.cp-password-container {
+ .cp-password-input{
+ margin-top:0.5rem;
+ }
[type="password"], [type="text"] {
- width: @sidebar_button-width;
+ //width: @sidebar_button-width;
flex: unset;
}
button {
+ margin-top:0;
margin-left: 10px;
}
}
+ @media (max-width: 840px) {
+
+ .cp-password-container {
+ button {
+ //margin-top: 10px;
+ margin-left: 0;
+ }
+ }
+ }
.cp-settings-drive-backup {
button {
span.fa {
@@ -111,6 +124,15 @@
}
margin: 10px 20px 20px 0;
}
+ @media(max-width:750px){
+ .cp-settings-qr {
+ img {
+ max-width:80%;
+ }
+
+ margin: 0 0 1rem;
+ }
+ }
}
.cp-settings-mfa-hint {
color: @cp_sidebar-hint;
@@ -124,6 +146,9 @@
.cp-settings-mfa {
.cp-password-container {
flex-wrap: wrap;
+ gap:0.5rem;
+
+ justify-content:flex-start;
input {
flex-shrink: 1;
max-width: 400px;
@@ -142,9 +167,28 @@
max-width: 250px;
}
button {
- margin-top: 10px
+ margin-top: 10px;
}
}
+ .cp-settings-qr-code,.cp-button-confirm{
+ display:flex;
+ flex-direction:column;
+ button{
+ margin-top:1.5rem;
+ margin-bottom:1.5rem;
+ }
+ }
+ }
+ @media(max-width:750px){
+ .cp-settings-qr-container {
+ margin-top:1rem;
+ }
+ }
+ .btn-primary .fa.fa-check{
+ color:white;
+ width:1rem;
+ height:1rem;
+ margin: 0 2px 0 0;
}
}
}
diff --git a/www/settings/inner.js b/www/settings/inner.js
index 83349ff78..e14da26ce 100644
--- a/www/settings/inner.js
+++ b/www/settings/inner.js
@@ -49,9 +49,14 @@ define([
var privateData;
var sframeChan;
+ // XXX EXISTING KEYS TO CHANGE
+ Messages.settings_cat_security = "Security & Privacy";
+ Messages.login_noSuchUser = "Invalid username or password";
+
+ // NEW KEYS
Messages.settings_mfaTitle = "Two-Factor Authentication (2FA)"; // XXX
- Messages.settings_mfaHint = "Protect your account..."; // XXX
- Messages.settings_cat_access = "Security"; // XXX
+ Messages.settings_mfaHint = "Protect your account with an additional verification code provided by an authenticator app of your choice "; // XXX
+ // Messages.settings_cat_access = "Security"; // XXX
Messages.done = "Done";
Messages.continue = "Continue";
Messages.mfa_setup_label = "To enable 2FA, please begin by entering your account password"; // XXX
@@ -62,8 +67,8 @@ define([
Messages.mfa_status_on = "2FA is active on this account";
Messages.mfa_status_off = "2FA is not active on this account";
Messages.mfa_recovery_title = "Save this recovery code now";
- Messages.mfa_recovery_hint = "If you loose access to your authenticator...........";
- Messages.mfa_recovery_warning = "This code will not be shown again...........";
+ Messages.mfa_recovery_hint = "If you loose access to your authenticator app you may be locked out of your CryptPad account. This recovery code can be used to disable 2FA and let you back in. ";
+ Messages.mfa_recovery_warning = "This code will not be shown again, please save it in a safe space now and do not share it with anyone.";
Messages.mfa_enable = "Enable 2FA";
Messages.mfa_disable = "Disable 2FA";
@@ -71,8 +76,10 @@ define([
Messages.settings_otp_invalid = "Invalid OTP code"; // XXX
Messages.settings_otp_tuto = "Please scan this QR code with your authenticator app and paste the verification code to confirm.";
+ Messages.settings_removeOwnedTitle = "Destroy all owned documents"; // XXX
Messages.settings_removeOwnedButton = "Destroy documents";
Messages.settings_removeOwnedText = "Please wait while your document are being destroyed...";
+ Messages.settings_removeOwnedHint = "All documents where you are the sole owner will be permanently destroyed"
var categories = {
'account': [ // Msg.settings_cat_account
@@ -81,19 +88,16 @@ define([
'cp-settings-displayname',
'cp-settings-language-selector',
'cp-settings-mediatag-size',
- ],
- 'access': [ // Msg.settings_cat_access // XXX
- 'cp-settings-mfa',
- 'cp-settings-remove-owned',
- 'cp-settings-change-password',
'cp-settings-delete'
],
'security': [ // Msg.settings_cat_security
'cp-settings-logout-everywhere',
- 'cp-settings-autostore',
+ 'cp-settings-mfa',
+ 'cp-settings-change-password',
'cp-settings-safe-links',
'cp-settings-userfeedback',
'cp-settings-cache',
+ 'cp-settings-remove-owned'
],
'style': [ // Msg.settings_cat_style
'cp-settings-colortheme',
@@ -102,6 +106,7 @@ define([
'drive': [
'cp-settings-redirect',
'cp-settings-resettips',
+ 'cp-settings-autostore',
'cp-settings-drive-duplicate',
'cp-settings-thumbnails',
'cp-settings-drive-backup',
@@ -515,7 +520,10 @@ define([
makeBlock('remove-owned', function(cb) { // Msg.settings_removeOwnedHint, .settings_removeOwnedTitle
if (!common.isLoggedIn()) { return cb(false); }
- var button = h('button.btn.btn-danger', Messages.settings_removeOwnedButton);
+ var button = h('button.btn.btn-danger', [
+ h('i.cptools.cptools-destroy'),
+ Messages.settings_removeOwnedButton
+ ]);
var form = h('div', [
button
]);
@@ -691,7 +699,6 @@ define([
placeholder: Messages.settings_changePasswordCurrent,
autocomplete: 'current-password',
}, true),
- h('br'),
UI.passwordInput({
id: 'cp-settings-change-password-new',
placeholder: Messages.settings_changePasswordNew
@@ -940,13 +947,15 @@ define([
var drawMfa = function (content, enabled) {
var $content = $(content).empty();
- $content.append(h('div.cp-settings-mfa-hint.cp-settings-mfa-status', [
+ $content.append(h('div.cp-settings-mfa-hint.cp-settings-mfa-status' + (enabled ? '.enabled' : '.disabled'), [
h('i.fa' + (enabled ? '.fa-check' : '.fa-times')),
h('span', enabled ? Messages.mfa_status_on : Messages.mfa_status_off)
]));
+
if (enabled) {
(function () {
- var button = h('button.btn.btn-danger', Messages.mfa_revoke_button);
+ var button = h('button.btn', Messages.mfa_revoke_button);
+ button.classList.add('disable-button');
var $mfaRevokeBtn = $(button);
var pwInput;
var pwContainer = h('div.cp-password-container', [
@@ -997,7 +1006,7 @@ define([
}).nThen(function () {
$(pwContainer).remove();
var OTPEntry;
- var disable = h('button.btn.btn-danger', Messages.mfa_disable);
+ var disable = h('button.btn.disable-button', Messages.mfa_disable);
$content.append(h('div.cp-password-container', [
h('label.cp-settings-mfa-hint', { for: 'cp-mfa-password' }, Messages.mfa_revoke_code),
OTPEntry = h('input', {
@@ -1139,6 +1148,7 @@ define([
var qr = h('div.cp-settings-qr');
var uriInput = UI.dialog.selectable(uri);
+
updateQR(uri, qr);
var OTPEntry = h('input', {
@@ -1153,14 +1163,13 @@ define([
]);
var $confirmBtn = $(confirmOTP);
var lock = false;
- UI.confirmButton(confirmOTP, {
- multiple: true
- }, function () {
+
+ confirmOTP.addEventListener('click', function () {
var code = $OTPEntry.val();
if (code.length !== 6 || /\D/.test(code)) {
return void UI.warn(Messages.settings_otp_invalid);
}
- $confirmBtn.attr('disabled', 'disabled');
+ confirmOTP.disabled = true;
lock = true;
var data = {
@@ -1177,17 +1186,17 @@ define([
lock = false;
$OTPEntry.val("");
if (err || !obj || !obj.success) {
- $confirmBtn.removeAttr('disabled');
+ confirmOTP.disabled = false;
console.error(err);
return void UI.warn(Messages.error);
}
drawMfa(content, true);
- }, {raw: true});
-
+ }, { raw: true });
});
$content.append([
description,
+ uriInput,
h('div.cp-settings-qr-container', [
qr,
h('div.cp-settings-qr-code', [
@@ -1195,11 +1204,11 @@ define([
h('br'),
confirmOTP
])
- ]),
- uriInput
+ ])
]);
};
+
var secret = randomSecret();
updateURI(secret);
});