feat: warning for protected note without protection

- Use `.sn-button` everywhere - Delete permissions modal - Capitalize "Clear session data"
standardnotes · Mar 22, 2021 · cc474da · cc474da
1 parent cd7b5cc
commit cc474da
Show file tree

Hide file tree

Showing 25 changed files with 411 additions and 469 deletions.
diff --git a/app/assets/javascripts/app.ts b/app/assets/javascripts/app.ts
@@ -43,7 +43,6 @@ import {
   MenuRow,
   PanelResizer,
   PasswordWizard,
-  PermissionsModal,
   RevisionPreviewModal,
   HistoryMenu,
   SyncResolutionMenu,
@@ -57,6 +56,7 @@ import { StartApplication } from './startApplication';
 import { Bridge } from './services/bridge';
 import { SessionsModalDirective } from './components/SessionsModal';
 import { NoAccountWarningDirective } from './components/NoAccountWarning';
+import { NoProtectionsdNoteWarningDirective } from './components/NoProtectionsNoteWarning';
 
 
 function reloadHiddenFirefoxTab(): boolean {
@@ -138,12 +138,12 @@ const startApplication: StartApplication = async function startApplication(
     .directive('menuRow', () => new MenuRow())
     .directive('panelResizer', () => new PanelResizer())
     .directive('passwordWizard', () => new PasswordWizard())
-    .directive('permissionsModal', () => new PermissionsModal())
     .directive('revisionPreviewModal', () => new RevisionPreviewModal())
     .directive('historyMenu', () => new HistoryMenu())
     .directive('syncResolutionMenu', () => new SyncResolutionMenu())
     .directive('sessionsModal', SessionsModalDirective)
-    .directive('noAccountWarning', NoAccountWarningDirective);
+    .directive('noAccountWarning', NoAccountWarningDirective)
+    .directive('protectedNotePanel', NoProtectionsdNoteWarningDirective);
 
   // Filters
   angular.module('app').filter('trusted', ['$sce', trusted]);

diff --git a/app/assets/javascripts/components/NoAccountWarning.tsx b/app/assets/javascripts/components/NoAccountWarning.tsx
@@ -2,7 +2,9 @@ import { toDirective, useAutorunValue } from './utils';
 import Close from '../../icons/ic_close.svg';
 import { AppState } from '@/ui_models/app_state';
 
-function NoAccountWarning({ appState }: { appState: AppState }) {
+type Props = { appState: AppState };
+
+function NoAccountWarning({ appState }: Props) {
   const canShow = useAutorunValue(() => appState.noAccountWarning.show);
   if (!canShow) {
     return null;
@@ -14,7 +16,7 @@ function NoAccountWarning({ appState }: { appState: AppState }) {
         Sign in or register to back up your notes.
       </p>
       <button
-        className="sn-btn mt-3 col-start-1 col-end-3 justify-self-start"
+        className="sn-button info mt-3 col-start-1 col-end-3 justify-self-start"
         onClick={(event) => {
           event.stopPropagation();
           appState.accountMenu.setShow(true);
@@ -28,12 +30,13 @@ function NoAccountWarning({ appState }: { appState: AppState }) {
         }}
         title="Ignore"
         label="Ignore"
+        style="height: 20px"
         className="border-0 m-0 p-0 bg-transparent cursor-pointer rounded-md col-start-2 row-start-1 color-neutral hover:color-info"
       >
-        <Close className="fill-current" />
+        <Close className="fill-current block" />
       </button>
     </div>
   );
 }
 
-export const NoAccountWarningDirective = toDirective(NoAccountWarning);
+export const NoAccountWarningDirective = toDirective<Props>(NoAccountWarning);
diff --git a/app/assets/javascripts/components/NoProtectionsNoteWarning.tsx b/app/assets/javascripts/components/NoProtectionsNoteWarning.tsx
@@ -0,0 +1,37 @@
+import { AppState } from '@/ui_models/app_state';
+import { toDirective } from './utils';
+
+type Props = { appState: AppState; onViewNote: () => void };
+
+function NoProtectionsNoteWarning({ appState, onViewNote }: Props) {
+  console.log("🚀 ~ file: NoProtectionsNoteWarning.tsx ~ line 7 ~ NoProtectionsNoteWarning ~ onViewNote", onViewNote)
+  return (
+    <div className="flex flex-col items-center justify-center text-center max-w-md">
+      <h1 className="text-2xl m-0 w-full">This note is protected</h1>
+      <p className="text-lg mt-2 w-full">
+        Add a passcode or create an account to require authentication to view
+        this note.
+      </p>
+      <div className="mt-4 flex gap-3">
+        <button
+          className="sn-button info"
+          onClick={() => {
+            appState.accountMenu.setShow(true);
+          }}
+        >
+          Open account menu
+        </button>
+        <button className="sn-button outlined" onClick={onViewNote}>
+          View note
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export const NoProtectionsdNoteWarningDirective = toDirective<Props>(
+  NoProtectionsNoteWarning,
+  {
+    onViewNote: '&',
+  }
+);
diff --git a/app/assets/javascripts/components/SessionsModal.tsx b/app/assets/javascripts/components/SessionsModal.tsx
@@ -171,7 +171,7 @@ const SessionsModal: FunctionComponent<{
                                   {formatter.format(session.updated_at)}
                                 </p>
                                 <button
-                                  className="sk-button danger sk-label"
+                                  className="sn-button danger sk-label"
                                   disabled={session.revoking}
                                   onClick={() =>
                                     setRevokingSessionUuid(session.uuid)
@@ -210,25 +210,23 @@ const SessionsModal: FunctionComponent<{
                     <AlertDialogDescription className="sk-panel-row">
                       <p>{SessionStrings.RevokeText}</p>
                     </AlertDialogDescription>
-                    <div className="sk-panel-row">
-                      <div className="sk-button-group">
+                    <div className="flex my-1 gap-2">
                         <button
-                          className="sk-button neutral sk-label"
+                          className="sn-button neutral sk-label"
                           ref={cancelRevokeRef}
                           onClick={closeRevokeSessionAlert}
                         >
                           <span>{SessionStrings.RevokeCancelButton}</span>
                         </button>
                         <button
-                          className="sk-button danger sk-label"
+                          className="sn-button danger sk-label"
                           onClick={() => {
                             closeRevokeSessionAlert();
                             revokeSession(confirmRevokingSessionUuid);
                           }}
                         >
                           <span>{SessionStrings.RevokeConfirmButton}</span>
                         </button>
-                      </div>
                     </div>
                   </div>
                 </div>

diff --git a/app/assets/javascripts/components/utils.ts b/app/assets/javascripts/components/utils.ts
@@ -20,11 +20,9 @@ export function useAutorun(
   useEffect(() => autorun(view, opts), [view, opts]);
 }
 
-export function toDirective(
-  component: FunctionComponent<{
-    application: WebApplication;
-    appState: AppState;
-  }>
+export function toDirective<Props>(
+  component: FunctionComponent<Props>,
+  scope: Record<string, '=' | '&'> = {}
 ) {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   return function () {
@@ -37,10 +35,7 @@ export function toDirective(
           return {
             $onChanges() {
               render(
-                h(component, {
-                  application: $scope.application,
-                  appState: $scope.appState,
-                }),
+                h(component, $scope),
                 $element[0]
               );
             },
@@ -50,6 +45,7 @@ export function toDirective(
       scope: {
         application: '=',
         appState: '=',
+        ...scope,
       },
     };
   };

diff --git a/app/assets/javascripts/directives/views/index.ts b/app/assets/javascripts/directives/views/index.ts
@@ -7,7 +7,6 @@ export { InputModal } from './inputModal';
 export { MenuRow } from './menuRow';
 export { PanelResizer } from './panelResizer';
 export { PasswordWizard } from './passwordWizard';
-export { PermissionsModal } from './permissionsModal';
 export { RevisionPreviewModal } from './revisionPreviewModal';
 export { HistoryMenu } from './historyMenu';
 export { SyncResolutionMenu } from './syncResolutionMenu';
diff --git a/app/assets/javascripts/directives/views/permissionsModal.ts b/app/assets/javascripts/directives/views/permissionsModal.ts
diff --git a/app/assets/javascripts/index.ts b/app/assets/javascripts/index.ts
@@ -4,7 +4,6 @@
 import '@reach/dialog/styles.css';
 import 'sn-stylekit/dist/stylekit.css';
 import '../stylesheets/index.css.scss';
-// import '../stylesheets/_reach-sub.scss';
 
 // Vendor
 import 'angular';

diff --git a/app/assets/javascripts/views/account_switcher/account-switcher.pug b/app/assets/javascripts/views/account_switcher/account-switcher.pug
@@ -26,7 +26,6 @@
               .sk-sublabel(ng-if='descriptor.identifier == ctrl.activeApplication.identifier')
                 | Current Application
             .sk-menu-panel-column(ng-if='descriptor.identifier == ctrl.activeApplication.identifier')
-              .sk-button.success(
+              button.sn-button.success(
                 ng-click='ctrl.renameDescriptor($event, descriptor)'
-                )
-                .sk-label Rename
+                ) Rename
diff --git a/app/assets/javascripts/views/application/application-view.pug b/app/assets/javascripts/views/application/application-view.pug
@@ -1,4 +1,4 @@
-.main-ui-view(
+.main-ui-view.sn-component(
   ng-class='self.platformString'
 )
   #app.app(

diff --git a/app/assets/javascripts/views/challenge_modal/challenge_modal.tsx b/app/assets/javascripts/views/challenge_modal/challenge_modal.tsx
@@ -279,18 +279,16 @@ function ChallengeModalView({ ctrl }: { ctrl: ChallengeModalCtrl }) {
               </div>
             </div>
             <div className="sk-panel-footer extra-padding">
-              <div
+              <button
                 className={
-                  'sk-button big block bold ' +
+                  'sn-button w-full py-3 text-base ' +
                   (ctrl.state.processing ? 'neutral' : 'info')
                 }
                 disabled={ctrl.state.processing}
                 onClick={() => ctrl.submit()}
               >
-                <div className="sk-label">
-                  {ctrl.state.processing ? 'Generating Keys…' : 'Submit'}
-                </div>
-              </div>
+                {ctrl.state.processing ? 'Generating Keys…' : 'Submit'}
+              </button>
               {ctrl.challenge.cancelable && (
                 <>
                   <div className="sk-panel-row"></div>