StyleKit wip/
This commit is contained in:
Mo Bitar
@@ -1,19 +1,19 @@
|
||||
.panel.panel-default.panel-right.account-data-menu
|
||||
.panel-body.large-padding
|
||||
%div{"ng-if" => "!user"}
|
||||
|
||||
-# Account Section
|
||||
.mb-10
|
||||
|
||||
.sn-component
|
||||
.panel.panel-right#account-panel
|
||||
.header
|
||||
%h1.title Account
|
||||
%a.close-button Close
|
||||
.content
|
||||
.panel-section.hero{"ng-if" => "!user"}
|
||||
.step-one{"ng-if" => "!formData.showLogin && !formData.showRegister && !formData.mfa"}
|
||||
%h3 Sign in or register to enable sync and end-to-end encryption.
|
||||
.small-v-space
|
||||
|
||||
.button-group.mt-5
|
||||
%button.ui-button.half-button{"ng-click" => "formData.showLogin = true"}
|
||||
%span Sign In
|
||||
%button.ui-button.half-button{"ng-click" => "formData.showRegister = true"}
|
||||
%span Register
|
||||
%h1.title Sign in or register to enable sync and end-to-end encryption.
|
||||
.button-group.stretch
|
||||
.button.info.featured{"ng-click" => "formData.showLogin = true"}
|
||||
.label Sign In
|
||||
.button.info.featured{"ng-click" => "formData.showRegister = true"}
|
||||
.label Register
|
||||
%p
|
||||
Standard Notes is free on every platform, and comes standard with sync and encryption.
|
||||
|
||||
.step-two{"ng-if" => "formData.showLogin || formData.showRegister"}
|
||||
.float-group.h20
|
||||
@@ -52,122 +52,124 @@
|
||||
|
||||
%em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"} {{formData.status}}
|
||||
|
||||
-# End account section
|
||||
|
||||
%div{"ng-if" => "user"}
|
||||
%h2 {{user.email}}
|
||||
%p {{server}}
|
||||
%div.bold.mt-10.tinted{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
|
||||
.spinner.inline.mr-5.tinted
|
||||
{{"Syncing" + (syncStatus.total > 0 ? ":" : "")}}
|
||||
%span{"ng-if" => "syncStatus.total > 0"} {{syncStatus.current}}/{{syncStatus.total}}
|
||||
%p.bold.mt-10.red.block{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}}
|
||||
.panel-section{"ng-if" => "user"}
|
||||
%h2 {{user.email}}
|
||||
%p {{server}}
|
||||
%div.bold.mt-10.tinted{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
|
||||
.spinner.inline.mr-5.tinted
|
||||
{{"Syncing" + (syncStatus.total > 0 ? ":" : "")}}
|
||||
%span{"ng-if" => "syncStatus.total > 0"} {{syncStatus.current}}/{{syncStatus.total}}
|
||||
%p.bold.mt-10.red.block{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}}
|
||||
|
||||
|
||||
|
||||
%a.block.mt-5{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password
|
||||
%section.gray-bg.mt-10.medium-padding{"ng-if" => "newPasswordData.changePassword"}
|
||||
%p.bold Change Password (Beta)
|
||||
%p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key.
|
||||
%p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process.
|
||||
%p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account.
|
||||
%p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding.
|
||||
%div.mt-10{"ng-if" => "!newPasswordData.status"}
|
||||
%a.red.mr-5{"ng-if" => "!newPasswordData.showForm", "ng-click" => "showPasswordChangeForm()"} Continue
|
||||
%a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel
|
||||
%div.mt-10{"ng-if" => "newPasswordData.showForm"}
|
||||
%form
|
||||
%input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"}
|
||||
%input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"}
|
||||
%button.ui-button.block{"ng-click" => "submitPasswordChange()"} Submit
|
||||
%p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}}
|
||||
%a.block.mt-5{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password
|
||||
%section.gray-bg.mt-10.medium-padding{"ng-if" => "newPasswordData.changePassword"}
|
||||
%p.bold Change Password (Beta)
|
||||
%p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key.
|
||||
%p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process.
|
||||
%p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account.
|
||||
%p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding.
|
||||
%div.mt-10{"ng-if" => "!newPasswordData.status"}
|
||||
%a.red.mr-5{"ng-if" => "!newPasswordData.showForm", "ng-click" => "showPasswordChangeForm()"} Continue
|
||||
%a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel
|
||||
%div.mt-10{"ng-if" => "newPasswordData.showForm"}
|
||||
%form
|
||||
%input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"}
|
||||
%input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"}
|
||||
%button.ui-button.block{"ng-click" => "submitPasswordChange()"} Submit
|
||||
%p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}}
|
||||
|
||||
|
||||
|
||||
|
||||
%a.block.mt-5{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
|
||||
%div{"ng-if" => "showAdvanced"}
|
||||
%a.block.mt-15{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard
|
||||
%a.block.mt-5{"ng-click" => "reencryptPressed()"} Re-encrypt All Items
|
||||
%a.block.mt-5{"ng-click" => "showCredentials = !showCredentials"} Show Credentials
|
||||
%section.gray-bg.mt-10.medium-padding{"ng-if" => "showCredentials"}
|
||||
%label.block
|
||||
Encryption key:
|
||||
.wrap.normal.mt-1.selectable {{encryptionKey()}}
|
||||
%label.block.mt-5.mb-0
|
||||
Server password:
|
||||
.wrap.normal.mt-1.selectable {{serverPassword() ? serverPassword() : 'Not available. Sign out then sign back in to compute.'}}
|
||||
%label.block.mt-5.mb-0
|
||||
Authentication key:
|
||||
.wrap.normal.mt-1.selectable {{authKey() ? authKey() : 'Not available. Sign out then sign back in to compute.'}}
|
||||
%a.block.mt-5{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
|
||||
%div{"ng-if" => "showAdvanced"}
|
||||
%a.block.mt-15{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard
|
||||
%a.block.mt-5{"ng-click" => "reencryptPressed()"} Re-encrypt All Items
|
||||
%a.block.mt-5{"ng-click" => "showCredentials = !showCredentials"} Show Credentials
|
||||
%section.gray-bg.mt-10.medium-padding{"ng-if" => "showCredentials"}
|
||||
%label.block
|
||||
Encryption key:
|
||||
.wrap.normal.mt-1.selectable {{encryptionKey()}}
|
||||
%label.block.mt-5.mb-0
|
||||
Server password:
|
||||
.wrap.normal.mt-1.selectable {{serverPassword() ? serverPassword() : 'Not available. Sign out then sign back in to compute.'}}
|
||||
%label.block.mt-5.mb-0
|
||||
Authentication key:
|
||||
.wrap.normal.mt-1.selectable {{authKey() ? authKey() : 'Not available. Sign out then sign back in to compute.'}}
|
||||
|
||||
|
||||
%div{"ng-if" => "securityUpdateAvailable()"}
|
||||
%a.block.mt-5{"ng-click" => "clickedSecurityUpdate()"} Security Update Available
|
||||
%section.gray-bg.mt-10.medium-padding{"ng-if" => "securityUpdateData.showForm"}
|
||||
%p
|
||||
%a{"href" => "https://standardnotes.org/help/security-update", "target" => "_blank"} Learn more.
|
||||
%div.mt-10{"ng-if" => "!securityUpdateData.processing"}
|
||||
%p.bold Enter your password to update:
|
||||
%form.mt-5
|
||||
%input.form-control{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"}
|
||||
%button.ui-button.block{"ng-click" => "submitSecurityUpdateForm()"} Update
|
||||
%div.mt-5{"ng-if" => "securityUpdateData.processing"}
|
||||
%p.tinted Processing...
|
||||
%div{"ng-if" => "securityUpdateAvailable()"}
|
||||
%a.block.mt-5{"ng-click" => "clickedSecurityUpdate()"} Security Update Available
|
||||
%section.gray-bg.mt-10.medium-padding{"ng-if" => "securityUpdateData.showForm"}
|
||||
%p
|
||||
%a{"href" => "https://standardnotes.org/help/security-update", "target" => "_blank"} Learn more.
|
||||
%div.mt-10{"ng-if" => "!securityUpdateData.processing"}
|
||||
%p.bold Enter your password to update:
|
||||
%form.mt-5
|
||||
%input.form-control{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"}
|
||||
%button.ui-button.block{"ng-click" => "submitSecurityUpdateForm()"} Update
|
||||
%div.mt-5{"ng-if" => "securityUpdateData.processing"}
|
||||
%p.tinted Processing...
|
||||
|
||||
|
||||
.mt-25
|
||||
%h4 Encryption Status
|
||||
%p
|
||||
{{encryptionStatusString()}}
|
||||
%div.mt-5{"ng-if" => "encryptionEnabled()"}
|
||||
%i {{encryptionStatusForNotes()}}
|
||||
|
||||
.mt-25
|
||||
%h4 Passcode Lock
|
||||
%div{"ng-if" => "!hasPasscode() && passcodeOptionAvailable()"}
|
||||
%p Add an app passcode to lock the app and encrypt on-device key storage.
|
||||
%a.block.mt-5{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"} Add Passcode
|
||||
|
||||
%form.mt-5{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"}
|
||||
%p.bold Choose a passcode:
|
||||
%input.form-control.mt-10{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "autofocus" => "true"}
|
||||
%input.form-control.mt-10{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"}
|
||||
%button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Set Passcode
|
||||
%div{"ng-if" => "hasPasscode()"}
|
||||
.panel-section
|
||||
%h3.title Encryption
|
||||
%p
|
||||
Passcode lock is enabled.
|
||||
%span{"ng-if" => "isDesktopApplication()"} Your passcode will be required on new sessions after app quit.
|
||||
%a.block.mt-5{"ng-click" => "removePasscodePressed()"} Remove Passcode
|
||||
%div{"ng-if" => "!passcodeOptionAvailable()"}
|
||||
%p Passcode lock is only available to permanent sessions. (You chose not to stay signed in.)
|
||||
{{encryptionStatusString()}}
|
||||
%div.mt-5{"ng-if" => "encryptionEnabled()"}
|
||||
%i {{encryptionStatusForNotes()}}
|
||||
|
||||
.panel-section
|
||||
%h3.title Passcode Lock
|
||||
%div{"ng-if" => "!hasPasscode() && passcodeOptionAvailable()"}
|
||||
.button.info{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"}
|
||||
.label Add Passcode
|
||||
|
||||
%form.mt-5{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"}
|
||||
%p.bold Choose a passcode:
|
||||
%input.form-control.mt-10{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "autofocus" => "true"}
|
||||
%input.form-control.mt-10{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"}
|
||||
%button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Set Passcode
|
||||
%p Add an app passcode to lock the app and encrypt on-device key storage.
|
||||
%div{"ng-if" => "hasPasscode()"}
|
||||
%p
|
||||
Passcode lock is enabled.
|
||||
%span{"ng-if" => "isDesktopApplication()"} Your passcode will be required on new sessions after app quit.
|
||||
%a.block.mt-5{"ng-click" => "removePasscodePressed()"} Remove Passcode
|
||||
%div{"ng-if" => "!passcodeOptionAvailable()"}
|
||||
%p Passcode lock is only available to permanent sessions. (You chose not to stay signed in.)
|
||||
|
||||
|
||||
|
||||
.mt-25{"ng-if" => "!importData.loading"}
|
||||
%h4 Data Archives
|
||||
.mt-5{"ng-if" => "encryptedBackupsAvailable()"}
|
||||
%label.normal.inline
|
||||
%input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
|
||||
Encrypted
|
||||
%label.normal.inline
|
||||
%input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
|
||||
Decrypted
|
||||
.panel-section{"ng-if" => "!importData.loading"}
|
||||
%h3.title Data Backups
|
||||
%div{"ng-if" => "encryptedBackupsAvailable()"}
|
||||
%label.normal.inline
|
||||
%input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
|
||||
Encrypted
|
||||
%label.normal.inline
|
||||
%input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
|
||||
Decrypted
|
||||
|
||||
%a.block.mt-5{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"} Download Data Archive
|
||||
.button-group
|
||||
.button.info{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"}
|
||||
.label Download Backup
|
||||
|
||||
%label.block.mt-5
|
||||
%input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
|
||||
.fake-link.tinted Import Data from Archive
|
||||
%label.button.info
|
||||
%input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
|
||||
.label Import From Backup
|
||||
|
||||
%div{"ng-if" => "importData.requestPassword"}
|
||||
%form{"ng-submit" => "submitImportPassword()"}
|
||||
%p Enter the account password associated with the import file.
|
||||
%input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"}
|
||||
%button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Decrypt & Import
|
||||
%div{"ng-if" => "importData.requestPassword"}
|
||||
%form{"ng-submit" => "submitImportPassword()"}
|
||||
%p Enter the account password associated with the import file.
|
||||
%input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"}
|
||||
%button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Decrypt & Import
|
||||
|
||||
%p.mt-5{"ng-if" => "user"} Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose "Decrypted".
|
||||
%p.mt-5{"ng-if" => "user"} Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose "Decrypted".
|
||||
|
||||
.spinner.mt-10{"ng-if" => "importData.loading"}
|
||||
|
||||
%a.block.mt-25.red{"ng-click" => "destroyLocalData()"} {{ user ? "Sign out and clear local data" : "Clear all local data" }}
|
||||
.spinner.mt-10{"ng-if" => "importData.loading"}
|
||||
.footer
|
||||
%a#signout-button{"ng-click" => "destroyLocalData()"} {{ user ? "Sign out and clear local data" : "Clear all local data" }}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.background{"ng-click" => "dismiss()"}
|
||||
.background{"ng-click" => "deny()"}
|
||||
|
||||
.content
|
||||
%h3 The following extension has requested these permissions:
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
#footer-bar
|
||||
.pull-left
|
||||
.footer-bar-link{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
|
||||
%a{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
|
||||
%a.label{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
|
||||
%account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}
|
||||
|
||||
.footer-bar-link{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
|
||||
%a{"ng-click" => "ctrl.toggleExtensions()"} Extensions
|
||||
%a.label{"ng-click" => "ctrl.toggleExtensions()"} Extensions
|
||||
%global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
|
||||
|
||||
.footer-bar-link
|
||||
%a{"href" => "https://standardnotes.org/help", "target" => "_blank"}
|
||||
%a.label{"href" => "https://standardnotes.org/help", "target" => "_blank"}
|
||||
Help
|
||||
|
||||
%room-bar#room-bar
|
||||
@@ -21,13 +21,13 @@
|
||||
|
||||
.footer-bar-link{"style" => "margin-right: 5px;"}
|
||||
%span{"ng-if" => "ctrl.lastSyncDate", "style" => "float: left; font-weight: normal; margin-right: 8px;"}
|
||||
%span{"ng-if" => "!ctrl.isRefreshing"}
|
||||
%span.label{"ng-if" => "!ctrl.isRefreshing"}
|
||||
Last refreshed {{ctrl.lastSyncDate | appDateTime}}
|
||||
%span{"ng-if" => "ctrl.isRefreshing"}
|
||||
.spinner{"style" => "margin-top: 2px;"}
|
||||
|
||||
%strong{"ng-if" => "ctrl.offline"} Offline
|
||||
%a{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh
|
||||
%strong.label{"ng-if" => "ctrl.offline"} Offline
|
||||
%a.label{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh
|
||||
|
||||
%span{"ng-if" => "ctrl.hasPasscode()"}
|
||||
%span.label{"ng-if" => "ctrl.hasPasscode()"}
|
||||
%i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}
|
||||
|
||||
Reference in New Issue
Block a user