rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AccountMenu form data management + layout fixes

Browse Source
This commit is contained in:
Mo Bitar
2020-01-31 13:05:50 -06:00
parent f766419936
commit 7ee89eb9ba
9 changed files with 143 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
app/assets/javascripts/directives/views/accountMenu.js
View File

@@ -64,33 +64,33 @@ class AccountMenuCtrl extends PureCtrl {
mutable: {
backupEncrypted: this.encryptedBackupsAvailable()
}
}
};
this.syncStatus = this.syncManager.syncStatus;
this.syncManager.getServerURL().then((url) => {
this.setState({
server: url,
formData: { ...this.state.formData, url: url }
})
})
});
});
this.authManager.checkForSecurityUpdate().then((available) => {
this.setState({
securityUpdateAvailable: available
})
})
});
});
this.reloadAutoLockInterval();
}
$onInit() {
this.initProps({
closeFunction: this.closeFunction
})
});
}
close() {
this.$timeout(() => {
this.props.closeFunction()();
})
});
}
encryptedBackupsAvailable() {
@@ -115,11 +115,22 @@ class AccountMenuCtrl extends PureCtrl {
}
}
async setFormDataState(formData) {
return this.setState({
formData: {
...this.state.formData,
...formData
}
});
}
async login(extraParams) {
/** Prevent a timed sync from occuring while signing in. */
this.syncManager.lockSyncing();
this.state.formData.status = STRING_GENERATING_LOGIN_KEYS;
this.state.formData.authenticating = true;
await this.setFormDataState({
status: STRING_GENERATING_LOGIN_KEYS,
authenticating: true
});
const response = await this.authManager.login(
this.state.formData.url,
this.state.formData.email,
@@ -136,24 +147,32 @@ class AccountMenuCtrl extends PureCtrl {
return;
}
this.syncManager.unlockSyncing();
this.state.formData.status = null;
await this.setFormDataState({
status: null,
});
const error = response
? response.error
: { message: "An unknown error occured." }
: { message: "An unknown error occured." };
if (error.tag === 'mfa-required' || error.tag === 'mfa-invalid') {
this.state.formData.showLogin = false;
this.state.formData.mfa = error;
await this.setFormDataState({
showLogin: false,
mfa: error
});
} else {
this.state.formData.showLogin = true;
this.state.formData.mfa = null;
await this.setFormDataState({
showLogin: true,
mfa: null
});
if (error.message) {
this.alertManager.alert({
text: error.message
});
}
}
this.state.formData.authenticating = false;
await this.setFormDataState({
authenticating: false,
});
}
async register() {
@@ -163,22 +182,28 @@ class AccountMenuCtrl extends PureCtrl {
text: STRING_NON_MATCHING_PASSWORDS
});
return;
}
this.state.formData.confirmPassword = false;
this.state.formData.status = STRING_GENERATING_REGISTER_KEYS;
this.state.formData.authenticating = true;
}
await this.setFormDataState({
confirmPassword: false,
status: STRING_GENERATING_REGISTER_KEYS,
authenticating: true
});
const response = await this.authManager.register(
this.state.formData.url,
this.state.formData.email,
this.state.formData.user_password,
this.state.formData.ephemeral
)
);
if (!response || response.error) {
this.state.formData.status = null;
await this.setFormDataState({
status: null
});
const error = response
? response.error
: { message: "An unknown error occured." };
this.state.formData.authenticating = false;
await this.setFormDataState({
authenticating: false
});
this.alertManager.alert({
text: error.message
});
@@ -194,9 +219,11 @@ class AccountMenuCtrl extends PureCtrl {
text: STRING_ACCOUNT_MENU_UNCHECK_MERGE,
destructive: true,
onCancel: () => {
this.state.formData.mergeLocal = true;
this.setFormDataState({
mergeLocal: true
});
}
})
});
}
}
@@ -208,7 +235,9 @@ class AccountMenuCtrl extends PureCtrl {
this.modelManager.removeAllItemsFromMemory();
await this.storageManager.clearAllModels();
}
this.state.formData.authenticating = false;
await this.setFormDataState({
authenticating: false
});
this.syncManager.refreshErroredItems();
this.close();
}
@@ -222,7 +251,7 @@ class AccountMenuCtrl extends PureCtrl {
this.close();
const run = () => {
this.privilegesManager.presentPrivilegesManagementModal();
}
};
const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
PrivilegesManager.ActionManagePrivileges
);
@@ -257,7 +286,7 @@ class AccountMenuCtrl extends PureCtrl {
await this.authManager.signout(true);
window.location.reload();
}
})
});
}
async submitImportPassword() {
@@ -279,10 +308,9 @@ class AccountMenuCtrl extends PureCtrl {
text: STRING_INVALID_IMPORT_FILE
});
}
}
};
reader.readAsText(file);
})
});
}
/**
@@ -302,7 +330,7 @@ class AccountMenuCtrl extends PureCtrl {
requestPassword: true,
data: data
}
})
});
const element = document.getElementById(
ELEMENT_ID_IMPORT_PASSWORD_INPUT
);
@@ -312,7 +340,7 @@ class AccountMenuCtrl extends PureCtrl {
} else {
await this.performImport(data, null);
}
}
};
const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
PrivilegesManager.ActionManageBackups
);
@@ -332,20 +360,20 @@ class AccountMenuCtrl extends PureCtrl {
...this.state.importData,
loading: true
}
})
});
const errorCount = await this.importJSONData(data, password);
this.setState({
importData: null
})
});
if (errorCount > 0) {
const message = StringImportError({ errorCount: errorCount })
const message = StringImportError({ errorCount: errorCount });
this.alertManager.alert({
text: message
});
} else {
this.alertManager.alert({
text: STRING_IMPORT_SUCCESS
})
});
}
}
@@ -437,14 +465,14 @@ class AccountMenuCtrl extends PureCtrl {
const interval = await this.passcodeManager.getAutoLockInterval();
this.setState({
selectedAutoLockInterval: interval
})
});
}
async selectAutoLockInterval(interval) {
const run = async () => {
await this.passcodeManager.setAutoLockInterval(interval);
this.reloadAutoLockInterval();
}
};
const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
PrivilegesManager.ActionManagePasscode
);
@@ -465,7 +493,9 @@ class AccountMenuCtrl extends PureCtrl {
}
addPasscodeClicked() {
this.state.formData.showPasscodeForm = true;
this.setFormDataState({
showPasscodeForm: true
});
}
submitPasscodeForm() {
@@ -480,26 +510,23 @@ class AccountMenuCtrl extends PureCtrl {
? this.passcodeManager.changePasscode.bind(this.passcodeManager)
: this.passcodeManager.setPasscode.bind(this.passcodeManager);
func(passcode, async () => {
this.setState({
formData: {
...this.state.formData,
passcode: null,
confirmPasscode: null,
showPasscodeForm: false
}
})
await this.setFormDataState({
passcode: null,
confirmPasscode: null,
showPasscodeForm: false
});
if (await this.authManager.offline()) {
this.$rootScope.$broadcast('major-data-change');
this.clearDatabaseAndRewriteAllItems();
}
})
});
}
async changePasscodePressed() {
const run = () => {
this.state.formData.changingPasscode = true;
this.addPasscodeClicked();
}
};
const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
PrivilegesManager.ActionManagePasscode
);
@@ -529,8 +556,8 @@ class AccountMenuCtrl extends PureCtrl {
this.syncManager.markAllItemsDirtyAndSaveOffline();
}
}
})
}
});
};
const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
PrivilegesManager.ActionManagePasscode
);

14
app/assets/stylesheets/_notes.scss
View File

@@ -1,4 +1,5 @@
#notes-column, .notes {
#notes-column,
.notes {
border-left: 1px solid var(--sn-stylekit-border-color);
border-right: 1px solid var(--sn-stylekit-border-color);
@@ -90,7 +91,8 @@
// Autohide scrollbar on Windows.
@at-root {
.windows-web &, .windows-desktop & {
.windows-web &,
.windows-desktop & {
overflow-y: hidden;
&:hover {
overflow-y: auto;
@@ -98,7 +100,6 @@
}
}
}
}
.note {
@@ -130,13 +131,14 @@
overflow: hidden;
text-overflow: ellipsis;
.default-preview, .plain-preview {
.default-preview,
.plain-preview {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* number of lines to show */
$line-height: 18px;
line-height: $line-height; /* fallback */
max-height: calc(#{$line-height} * 1); /* fallback */
line-height: $line-height; /* fallback */
max-height: calc(#{$line-height} * 1); /* fallback */
}
.html-preview {

14
app/assets/stylesheets/_stylekit-sub.scss
View File

@@ -1,5 +1,4 @@
.sn-component {
.sk-notification {
&.unpadded {
padding: 0;
@@ -17,9 +16,7 @@
}
}
.sk-app-bar {
&.dynamic-height {
min-height: 2rem !important;
height: inherit !important;
@@ -31,7 +28,16 @@
border-top: 0;
}
}
}
.sk-horizontal-group.tight > *:not(:first-child) {
margin-left: 0.3rem;
}
.sk-panel-section {
&:last-child {
padding-bottom: 1rem;
}
}
.sk-panel {
@@ -59,7 +65,7 @@
#session-history-menu {
.sk-menu-panel .sk-menu-panel-row .sk-sublabel.opaque {
opacity: 1.0
opacity: 1;
}
}

27
app/assets/stylesheets/_tags.scss
View File

@@ -5,7 +5,8 @@
-khtml-user-select: none;
-webkit-user-select: none;
&, #tags-content {
&,
#tags-content {
background-color: var(--sn-stylekit-secondary-background-color);
display: flex;
flex-direction: column;
@@ -29,11 +30,15 @@
height: inherit;
// Autohide scrollbar on Windows.
// Unfortunately must affect every platform since no way to hide just for Windows.
overflow-y: hidden;
&:hover {
overflow-y: auto;
overflow-y: overlay; // overlay is not supported on ff, so keep previous statement up
@at-root {
.windows-web &,
.windows-desktop & {
overflow-y: hidden;
&:hover {
overflow-y: auto;
overflow-y: overlay; // overlay is not supported on ff, so keep previous statement up
}
}
}
}
@@ -48,7 +53,7 @@
min-height: 30px;
padding: 5px 12px;
cursor: pointer;
transition: height .1s ease-in-out;
transition: height 0.1s ease-in-out;
position: relative;
> .tag-info {
@@ -80,7 +85,7 @@
// Make sure to undo if it's selected (for editing)
-webkit-user-select: none;
&.editing {
&.editing {
-webkit-user-select: text !important;
}
@@ -111,7 +116,7 @@
margin-bottom: 2px;
&:hover {
opacity: 1.0;
opacity: 1;
}
}
@@ -123,9 +128,11 @@
}
}
&:hover:not(.selected), &.selected {
&:hover:not(.selected),
&.selected {
background-color: var(--sn-stylekit-secondary-contrast-background-color);
color: var(--sn-stylekit-secondary-contrast-foreground-color);
> .title {
color: var(--sn-stylekit-secondary-contrast-foreground-color);
}

40
app/assets/templates/directives/account-menu.pug
View File

@@ -79,18 +79,21 @@
required='',
type='text'
)
label.sk-label.padded-row(ng-if='self.state.formData.showLogin')
input.sk-input(
ng-model='self.state.formData.strictSignin',
type='checkbox'
)
| Use strict sign in
span
a.info(
href='https://standardnotes.org/help/security',
rel='noopener',
target='_blank'
) (Learn more)
label.sk-label.padded-row.sk-panel-row.justify-left(
ng-if='self.state.formData.showLogin'
)
.sk-horizontal-group.tight
input.sk-input(
ng-model='self.state.formData.strictSignin',
type='checkbox'
)
p.sk-p Use strict sign in
span
a.info(
href='https://standardnotes.org/help/security',
rel='noopener',
target='_blank'
) (Learn more)
.sk-panel-section.form-submit(ng-if='!self.state.formData.authenticating')
.sk-button-group.stretch
.sk-button.info.featured(
@@ -110,14 +113,14 @@
.sk-label {{self.state.formData.status}}
.sk-panel-section.no-bottom-pad(ng-if='!self.state.formData.authenticating')
label.sk-panel-row.justify-left
.sk-horizontal-group
.sk-horizontal-group.tight
input(
ng-false-value='true',
ng-model='self.state.formData.ephemeral',
ng-true-value='false',
type='checkbox'
)
| Stay signed in
p.sk-p Stay signed in
label.sk-panel-row.justify-left(ng-if='self.notesAndTagsCount() > 0')
.sk-panel-row
input(
@@ -280,22 +283,23 @@
.sk-panel-row
form.sk-panel-form.sk-panel-row(ng-if='self.encryptedBackupsAvailable()')
.sk-input-group
label
label.sk-horizontal-group.tight
input(
ng-change='self.state.mutable.backupEncrypted = true',
ng-model='self.state.mutable.backupEncrypted',
ng-value='true',
type='radio'
)
| Encrypted
label
p.sk-p Encrypted
label.sk-horizontal-group.tight
input(
ng-change='self.state.mutable.backupEncrypted = false',
ng-model='self.state.mutable.backupEncrypted',
ng-value='false',
type='radio'
)
| Decrypted
p.sk-p Decrypted
.sk-panel-row
.sk-button-group.sk-panel-row.justify-left
.sk-button.info(ng-click='self.downloadDataArchive()')
.sk-label Download Backup