Merge pull request #134 from Simple2B/svyat/fix/issues

Svyat/fix/issues

app/templates/book/settings.html

@@ -50,13 +50,13 @@
       <input value="{{book.id}}" type="text" name="book_id" id="book_id" class="hidden" placeholder="Book id" required>
       <div>
         <label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Label</label>
-        <input value="{{book.label}}" type="text" name="label" id="label" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="My Book" required>
+        <input value="{{book.label}}" type="text" name="label" id="label" class="book-label-input bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="My Book" required>
       </div>
       <div>
         <label for="about" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
           Book about
         </label>
-        <textarea type="text" name="about" id="about" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">{{book.about if not book.about==None}}</textarea>
+        <textarea type="text" name="about" id="about" class="book-about-input bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">{{book.about if not book.about==None}}</textarea>
       </div>
       <div class="multiple-input-block mb-6">
         <label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
@@ -66,7 +66,7 @@
         <input
           type="text"
           id="tags-input"
-          class="multiple-input mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          class="book-tags-input multiple-input mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
           placeholder="e.g. Law   (press 'Enter' or Comma to add tag. Click on tag to edit it)"
           data-save-results-to="tags-to-submit"
         >
@@ -157,7 +157,7 @@
             </tbody>
           </table>
         </div>
-        <button type="button" data-modal-target="add-contributor-modal" data-modal-toggle="add-contributor-modal" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+        <button type="button" data-modal-target="add-contributor-modal" data-modal-toggle="add-contributor-modal" class="add-contributor-btn text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
           New Contributor
         </button>

src/main.ts

@@ -33,6 +33,7 @@ import {deleteInterpretation} from './deleteInterpretation';
 import {indeterminateInputs} from './indeterminateInputs';
 import {initRefreshAccessLevelTree} from './refreshAccessLevelTree';
 import {deleteContributor} from './deleteContributor';
+import {initUnsavedChangedAlerts} from './unsavedChangedAlert';
 
 initQuillReadOnly();
 initBooks();
@@ -69,3 +70,4 @@ deleteInterpretation();
 indeterminateInputs();
 initRefreshAccessLevelTree();
 deleteContributor();
+initUnsavedChangedAlerts();

src/unsavedChangedAlert.ts

@@ -0,0 +1,32 @@
+const initAlertOnClick = (element: HTMLElement) => {
+  element.addEventListener('click', () => {
+    window.addEventListener('beforeunload', function (e) {
+      var confirmationMessage =
+        'It looks like you have been editing something. ' +
+        'If you leave before saving, your changes will be lost.';
+
+      (e || window.event).returnValue = confirmationMessage; //Gecko + IE
+      return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
+    });
+  });
+};
+
+export const initUnsavedChangedAlerts = () => {
+  const elementsSelectors = [
+    '.book-label-input',
+    '.book-about-input',
+    '.book-tags-input',
+    '.multiple-input-word',
+    '.contributor-role-select',
+    '.edit-permissions-btn',
+    '.add-contributor-btn',
+  ];
+
+  elementsSelectors.forEach(selector => {
+    const elements: NodeListOf<HTMLElement> =
+      document.querySelectorAll(selector);
+    elements.forEach(element => {
+      initAlertOnClick(element);
+    });
+  });
+};

src/wallet.ts

@@ -13,15 +13,21 @@ export function initWallet() {
   // protocol, hostname and port number of the URL
   const origin = window.location.origin;
   // connect to ethereum network and sign transactions with Metamask
-  if (!window.hasOwnProperty('ethereum')) {
+  const showExtensionAlert = localStorage.getItem('showExtensionAlert');
+  if (!window.hasOwnProperty('ethereum') && showExtensionAlert != 'false') {
     let result = confirm(
       "You don't have needed extension! Do you want to install it?",
     );
+    localStorage.setItem('showExtensionAlert', 'false');
     if (result) {
       window.open('https://metamask.io/', '_blank');
     }
     return;
   }
+  if (showExtensionAlert == 'false' && !window.hasOwnProperty('ethereum')) {
+    console.error('Required extension not found');
+    return;
+  }
   const eOwner: IEthereumOwner = window as any;
   const provider = new ethers.providers.Web3Provider(eOwner.ethereum);
   const signer = provider.getSigner();