feat: add "Email Backups" to "Backups" section (#778)

* feat: add "Email Backups" to "Backups" section

* chore: remove comment

* chore: better wording

* chore: put working snjs version

* chore: better wording

* style: reuse existing css classes and add the missing one

* feat: add "No email backup" option

* refactor: move the function outside of the useEffect, remove unused utility function

* feat (WIP): move CloudLink to backups section

* chore: versions bump, type fixes

* fix: handle the case when the setting update fails

* style: remove dashed border from the confirmation code, UI improvements

* feat: implement removing integration, improve interaction on different events

* feat: implement non-interactive textarea for showing and copying the code

* fix: fix TS errors

* feat: implement "Perform backup" logic
- remove the code for copying the confirmation code for backup integration
- also remove unnecessary parameters passed to Provider

* feat: don't show "CloudLink" in preferences pane

* chore: show error in console on exception

* refactor: better naming, add `coverage` folder to gitignore

* fix: return correct setting name

* refactor: use async/await for the sake of consistency

* chore: remove duplicate line

* feat: get urls for cloud backup from snjs

* chore: update dependencies

* refactor: set both `token` and `frequency` settings when enabling cloud integration; get only `frequency` when checking the integration status

* refactor: once the setting is successfully saved, don't get its value from backend; instead, use its value that's still in frontend

* feat: move "Receive a notification email if a cloud backup fails." into cloud backups section

* fix: text correction

* fix: get correct cloud integration url from snjs based on prod/dev environment

app/assets/stylesheets/_main.scss

@@ -245,3 +245,21 @@ $footer-height: 2rem;
 .z-index-purchase-flow {
   z-index: $z-index-purchase-flow;
 }
+
+textarea {
+  &.non-interactive {
+    user-select: text !important;
+    resize: none;
+    background-color: transparent;
+    border-color: var(--sn-stylekit-border-color);
+    font-family: monospace;
+    outline: 0;
+
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+  }
+}

app/assets/stylesheets/_sn.scss

@@ -813,3 +813,9 @@
     }
   }
 }
+
+.dimmed {
+  opacity: .5;
+  cursor: default;
+  pointer-events: none;
+}

app/assets/stylesheets/_ui.scss

@@ -206,6 +206,10 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   cursor: default;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .fill-current {
   fill: currentColor;
 }