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: { mutable: {
backupEncrypted: this.encryptedBackupsAvailable() backupEncrypted: this.encryptedBackupsAvailable()
} }
} };
this.syncStatus = this.syncManager.syncStatus; this.syncStatus = this.syncManager.syncStatus;
this.syncManager.getServerURL().then((url) => { this.syncManager.getServerURL().then((url) => {
this.setState({ this.setState({
server: url, server: url,
formData: { ...this.state.formData, url: url } formData: { ...this.state.formData, url: url }
}) });
}) });
this.authManager.checkForSecurityUpdate().then((available) => { this.authManager.checkForSecurityUpdate().then((available) => {
this.setState({ this.setState({
securityUpdateAvailable: available securityUpdateAvailable: available
}) });
}) });
this.reloadAutoLockInterval(); this.reloadAutoLockInterval();
} }
$onInit() { $onInit() {
this.initProps({ this.initProps({
closeFunction: this.closeFunction closeFunction: this.closeFunction
}) });
} }
close() { close() {
this.$timeout(() => { this.$timeout(() => {
this.props.closeFunction()(); this.props.closeFunction()();
}) });
} }
encryptedBackupsAvailable() { encryptedBackupsAvailable() {
@@ -115,11 +115,22 @@ class AccountMenuCtrl extends PureCtrl {
} }
} }
async setFormDataState(formData) {
return this.setState({
formData: {
...this.state.formData,
...formData
}
});
}
async login(extraParams) { async login(extraParams) {
/** Prevent a timed sync from occuring while signing in. */ /** Prevent a timed sync from occuring while signing in. */
this.syncManager.lockSyncing(); this.syncManager.lockSyncing();
this.state.formData.status = STRING_GENERATING_LOGIN_KEYS; await this.setFormDataState({
this.state.formData.authenticating = true; status: STRING_GENERATING_LOGIN_KEYS,
authenticating: true
});
const response = await this.authManager.login( const response = await this.authManager.login(
this.state.formData.url, this.state.formData.url,
this.state.formData.email, this.state.formData.email,
@@ -136,24 +147,32 @@ class AccountMenuCtrl extends PureCtrl {
return; return;
} }
this.syncManager.unlockSyncing(); this.syncManager.unlockSyncing();
this.state.formData.status = null; await this.setFormDataState({
status: null,
});
const error = response const error = response
? response.error ? response.error
: { message: "An unknown error occured." } : { message: "An unknown error occured." };
if (error.tag === 'mfa-required' || error.tag === 'mfa-invalid') { if (error.tag === 'mfa-required' || error.tag === 'mfa-invalid') {
this.state.formData.showLogin = false; await this.setFormDataState({
this.state.formData.mfa = error; showLogin: false,
mfa: error
});
} else { } else {
this.state.formData.showLogin = true; await this.setFormDataState({
this.state.formData.mfa = null; showLogin: true,
mfa: null
});
if (error.message) { if (error.message) {
this.alertManager.alert({ this.alertManager.alert({
text: error.message text: error.message
}); });
} }
} }
this.state.formData.authenticating = false; await this.setFormDataState({
authenticating: false,
});
} }
async register() { async register() {
@@ -163,22 +182,28 @@ class AccountMenuCtrl extends PureCtrl {
text: STRING_NON_MATCHING_PASSWORDS text: STRING_NON_MATCHING_PASSWORDS
}); });
return; return;
} }
this.state.formData.confirmPassword = false; await this.setFormDataState({
this.state.formData.status = STRING_GENERATING_REGISTER_KEYS; confirmPassword: false,
this.state.formData.authenticating = true; status: STRING_GENERATING_REGISTER_KEYS,
authenticating: true
});
const response = await this.authManager.register( const response = await this.authManager.register(
this.state.formData.url, this.state.formData.url,
this.state.formData.email, this.state.formData.email,
this.state.formData.user_password, this.state.formData.user_password,
this.state.formData.ephemeral this.state.formData.ephemeral
) );
if (!response || response.error) { if (!response || response.error) {
this.state.formData.status = null; await this.setFormDataState({
status: null
});
const error = response const error = response
? response.error ? response.error
: { message: "An unknown error occured." }; : { message: "An unknown error occured." };
this.state.formData.authenticating = false; await this.setFormDataState({
authenticating: false
});
this.alertManager.alert({ this.alertManager.alert({
text: error.message text: error.message
}); });
@@ -194,9 +219,11 @@ class AccountMenuCtrl extends PureCtrl {
text: STRING_ACCOUNT_MENU_UNCHECK_MERGE, text: STRING_ACCOUNT_MENU_UNCHECK_MERGE,
destructive: true, destructive: true,
onCancel: () => { onCancel: () => {
this.state.formData.mergeLocal = true; this.setFormDataState({
mergeLocal: true
});
} }
}) });
} }
} }
@@ -208,7 +235,9 @@ class AccountMenuCtrl extends PureCtrl {
this.modelManager.removeAllItemsFromMemory(); this.modelManager.removeAllItemsFromMemory();
await this.storageManager.clearAllModels(); await this.storageManager.clearAllModels();
} }
this.state.formData.authenticating = false; await this.setFormDataState({
authenticating: false
});
this.syncManager.refreshErroredItems(); this.syncManager.refreshErroredItems();
this.close(); this.close();
} }
@@ -222,7 +251,7 @@ class AccountMenuCtrl extends PureCtrl {
this.close(); this.close();
const run = () => { const run = () => {
this.privilegesManager.presentPrivilegesManagementModal(); this.privilegesManager.presentPrivilegesManagementModal();
} };
const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege( const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
PrivilegesManager.ActionManagePrivileges PrivilegesManager.ActionManagePrivileges
); );
@@ -257,7 +286,7 @@ class AccountMenuCtrl extends PureCtrl {
await this.authManager.signout(true); await this.authManager.signout(true);
window.location.reload(); window.location.reload();
} }
}) });
} }
async submitImportPassword() { async submitImportPassword() {
@@ -279,10 +308,9 @@ class AccountMenuCtrl extends PureCtrl {
text: STRING_INVALID_IMPORT_FILE text: STRING_INVALID_IMPORT_FILE
}); });
} }
} };
reader.readAsText(file); reader.readAsText(file);
}) });
} }
/** /**
@@ -302,7 +330,7 @@ class AccountMenuCtrl extends PureCtrl {
requestPassword: true, requestPassword: true,
data: data data: data
} }
}) });
const element = document.getElementById( const element = document.getElementById(
ELEMENT_ID_IMPORT_PASSWORD_INPUT ELEMENT_ID_IMPORT_PASSWORD_INPUT
); );
@@ -312,7 +340,7 @@ class AccountMenuCtrl extends PureCtrl {
} else { } else {
await this.performImport(data, null); await this.performImport(data, null);
} }
} };
const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege( const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
PrivilegesManager.ActionManageBackups PrivilegesManager.ActionManageBackups
); );
@@ -332,20 +360,20 @@ class AccountMenuCtrl extends PureCtrl {
...this.state.importData, ...this.state.importData,
loading: true loading: true
} }
}) });
const errorCount = await this.importJSONData(data, password); const errorCount = await this.importJSONData(data, password);
this.setState({ this.setState({
importData: null importData: null
}) });
if (errorCount > 0) { if (errorCount > 0) {
const message = StringImportError({ errorCount: errorCount }) const message = StringImportError({ errorCount: errorCount });
this.alertManager.alert({ this.alertManager.alert({
text: message text: message
}); });
} else { } else {
this.alertManager.alert({ this.alertManager.alert({
text: STRING_IMPORT_SUCCESS text: STRING_IMPORT_SUCCESS
}) });
} }
} }
@@ -437,14 +465,14 @@ class AccountMenuCtrl extends PureCtrl {
const interval = await this.passcodeManager.getAutoLockInterval(); const interval = await this.passcodeManager.getAutoLockInterval();
this.setState({ this.setState({
selectedAutoLockInterval: interval selectedAutoLockInterval: interval
}) });
} }
async selectAutoLockInterval(interval) { async selectAutoLockInterval(interval) {
const run = async () => { const run = async () => {
await this.passcodeManager.setAutoLockInterval(interval); await this.passcodeManager.setAutoLockInterval(interval);
this.reloadAutoLockInterval(); this.reloadAutoLockInterval();
} };
const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege( const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
PrivilegesManager.ActionManagePasscode PrivilegesManager.ActionManagePasscode
); );
@@ -465,7 +493,9 @@ class AccountMenuCtrl extends PureCtrl {
} }
addPasscodeClicked() { addPasscodeClicked() {
this.state.formData.showPasscodeForm = true; this.setFormDataState({
showPasscodeForm: true
});
} }
submitPasscodeForm() { submitPasscodeForm() {
@@ -480,26 +510,23 @@ class AccountMenuCtrl extends PureCtrl {
? this.passcodeManager.changePasscode.bind(this.passcodeManager) ? this.passcodeManager.changePasscode.bind(this.passcodeManager)
: this.passcodeManager.setPasscode.bind(this.passcodeManager); : this.passcodeManager.setPasscode.bind(this.passcodeManager);
func(passcode, async () => { func(passcode, async () => {
this.setState({ await this.setFormDataState({
formData: { passcode: null,
...this.state.formData, confirmPasscode: null,
passcode: null, showPasscodeForm: false
confirmPasscode: null, });
showPasscodeForm: false
}
})
if (await this.authManager.offline()) { if (await this.authManager.offline()) {
this.$rootScope.$broadcast('major-data-change'); this.$rootScope.$broadcast('major-data-change');
this.clearDatabaseAndRewriteAllItems(); this.clearDatabaseAndRewriteAllItems();
} }
}) });
} }
async changePasscodePressed() { async changePasscodePressed() {
const run = () => { const run = () => {
this.state.formData.changingPasscode = true; this.state.formData.changingPasscode = true;
this.addPasscodeClicked(); this.addPasscodeClicked();
} };
const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege( const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
PrivilegesManager.ActionManagePasscode PrivilegesManager.ActionManagePasscode
); );
@@ -529,8 +556,8 @@ class AccountMenuCtrl extends PureCtrl {
this.syncManager.markAllItemsDirtyAndSaveOffline(); this.syncManager.markAllItemsDirtyAndSaveOffline();
} }
} }
}) });
} };
const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege( const needsPrivilege = await this.privilegesManager.actionRequiresPrivilege(
PrivilegesManager.ActionManagePasscode 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-left: 1px solid var(--sn-stylekit-border-color);
border-right: 1px solid var(--sn-stylekit-border-color); border-right: 1px solid var(--sn-stylekit-border-color);
@@ -90,7 +91,8 @@
// Autohide scrollbar on Windows. // Autohide scrollbar on Windows.
@at-root { @at-root {
.windows-web &, .windows-desktop & { .windows-web &,
.windows-desktop & {
overflow-y: hidden; overflow-y: hidden;
&:hover { &:hover {
overflow-y: auto; overflow-y: auto;
@@ -98,7 +100,6 @@
} }
} }
} }
} }
.note { .note {
@@ -130,13 +131,14 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.default-preview, .plain-preview { .default-preview,
.plain-preview {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* number of lines to show */ -webkit-line-clamp: 1; /* number of lines to show */
$line-height: 18px; $line-height: 18px;
line-height: $line-height; /* fallback */ line-height: $line-height; /* fallback */
max-height: calc(#{$line-height} * 1); /* fallback */ max-height: calc(#{$line-height} * 1); /* fallback */
} }
.html-preview { .html-preview {

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

@@ -1,5 +1,4 @@
.sn-component { .sn-component {
.sk-notification { .sk-notification {
&.unpadded { &.unpadded {
padding: 0; padding: 0;
@@ -17,9 +16,7 @@
} }
} }
.sk-app-bar { .sk-app-bar {
&.dynamic-height { &.dynamic-height {
min-height: 2rem !important; min-height: 2rem !important;
height: inherit !important; height: inherit !important;
@@ -31,7 +28,16 @@
border-top: 0; border-top: 0;
} }
} }
}
.sk-horizontal-group.tight > *:not(:first-child) {
margin-left: 0.3rem;
}
.sk-panel-section {
&:last-child {
padding-bottom: 1rem;
}
} }
.sk-panel { .sk-panel {
@@ -59,7 +65,7 @@
#session-history-menu { #session-history-menu {
.sk-menu-panel .sk-menu-panel-row .sk-sublabel.opaque { .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; -khtml-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
&, #tags-content { &,
#tags-content {
background-color: var(--sn-stylekit-secondary-background-color); background-color: var(--sn-stylekit-secondary-background-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -29,11 +30,15 @@
height: inherit; height: inherit;
// Autohide scrollbar on Windows. // Autohide scrollbar on Windows.
// Unfortunately must affect every platform since no way to hide just for Windows. @at-root {
overflow-y: hidden; .windows-web &,
&:hover { .windows-desktop & {
overflow-y: auto; overflow-y: hidden;
overflow-y: overlay; // overlay is not supported on ff, so keep previous statement up &: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; min-height: 30px;
padding: 5px 12px; padding: 5px 12px;
cursor: pointer; cursor: pointer;
transition: height .1s ease-in-out; transition: height 0.1s ease-in-out;
position: relative; position: relative;
> .tag-info { > .tag-info {
@@ -80,7 +85,7 @@
// Make sure to undo if it's selected (for editing) // Make sure to undo if it's selected (for editing)
-webkit-user-select: none; -webkit-user-select: none;
&.editing { &.editing {
-webkit-user-select: text !important; -webkit-user-select: text !important;
} }
@@ -111,7 +116,7 @@
margin-bottom: 2px; margin-bottom: 2px;
&:hover { &: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); background-color: var(--sn-stylekit-secondary-contrast-background-color);
color: var(--sn-stylekit-secondary-contrast-foreground-color); color: var(--sn-stylekit-secondary-contrast-foreground-color);
> .title { > .title {
color: var(--sn-stylekit-secondary-contrast-foreground-color); color: var(--sn-stylekit-secondary-contrast-foreground-color);
} }

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

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

8
dist/javascripts/app.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/javascripts/app.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/stylesheets/app.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/stylesheets/app.css.map vendored
View File

File diff suppressed because one or more lines are too long