feat(dev): preload dev account from .env (#803)

.env.sample

@@ -24,3 +24,7 @@ NEW_RELIC_THREAD_PROFILER_ENABLED=false
 NEW_RELIC_LICENSE_KEY=
 NEW_RELIC_APP_NAME=Web
 NEW_RELIC_BROWSER_MONITORING_AUTO_INSTRUMENT=false
+
+DEV_ACCOUNT_EMAIL=
+DEV_ACCOUNT_PASSWORD=
+DEV_ACCOUNT_SERVER=

app/assets/javascripts/app.ts

@@ -17,6 +17,10 @@ declare global {
     // eslint-disable-next-line camelcase
     _websocket_url: string;
     startApplication?: StartApplication;
+
+    _devAccountEmail?: string;
+    _devAccountPassword?: string;
+    _devAccountServer?: string;
   }
 }
 
@@ -26,9 +30,11 @@ import { PinNoteButtonDirective } from '@/components/PinNoteButton';
 import { IsWebPlatform, WebAppVersion } from '@/version';
 import {
   ApplicationGroupView,
-  ApplicationView, ChallengeModal,
+  ApplicationView,
-  FooterView, NoteGroupViewDirective,
+  ChallengeModal,
-  NoteViewDirective
+  FooterView,
+  NoteGroupViewDirective,
+  NoteViewDirective,
 } from '@/views';
 import { SNLog } from '@standardnotes/snjs';
 import angular from 'angular';
@@ -55,7 +61,7 @@ import {
   infiniteScroll,
   lowercase,
   selectOnFocus,
-  snEnter
+  snEnter,
 } from './directives/functional';
 import {
   ActionsMenu,
@@ -67,7 +73,7 @@ import {
   PasswordWizard,
   PermissionsModal,
   RevisionPreviewModal,
-  SyncResolutionMenu
+  SyncResolutionMenu,
 } from './directives/views';
 import { trusted } from './filters';
 import { PreferencesDirective } from './preferences';

app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx

@@ -1,5 +1,6 @@
 import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
+import { isDev } from '@/utils';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
@@ -19,6 +20,12 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
       appState.accountMenu;
     const [showAdvanced, setShowAdvanced] = useState(false);
 
+    if (isDev && window._devAccountServer) {
+      setEnableServerOption(true);
+      setServer(window._devAccountServer);
+      application.setCustomHost(window._devAccountServer);
+    }
+
     const handleServerOptionChange = (e: Event) => {
       if (e.target instanceof HTMLInputElement) {
         setEnableServerOption(e.target.checked);

app/assets/javascripts/components/AccountMenu/SignIn.tsx

@@ -1,5 +1,6 @@
 import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
+import { isDev } from '@/utils';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
@@ -32,6 +33,11 @@ export const SignInPane: FunctionComponent<Props> = observer(
     const emailInputRef = useRef<HTMLInputElement>(null);
     const passwordInputRef = useRef<HTMLInputElement>(null);
 
+    if (isDev && window._devAccountEmail) {
+      setEmail(window._devAccountEmail);
+      setPassword(window._devAccountPassword as string);
+    }
+
     useEffect(() => {
       if (emailInputRef?.current) {
         emailInputRef.current?.focus();

index.html

@@ -36,6 +36,9 @@
   data-purchase-url="<%= env.PURCHASE_URL %>"
   data-plans-url="<%= env.PLANS_URL %>"
   data-dashboard-url="<%= env.DASHBOARD_URL %>"
+  data-dev-account-email="<%= env.DEV_ACCOUNT_EMAIL %>"
+  data-dev-account-password="<%= env.DEV_ACCOUNT_PASSWORD %>"
+  data-dev-account-server="<%= env.DEV_ACCOUNT_SERVER %>"
   >
   <script>
     window._default_sync_server = document.body.dataset.defaultSyncServer || "https://api.standardnotes.com";
@@ -45,6 +48,9 @@
     window._purchase_url = document.body.dataset.purchaseUrl;
     window._plans_url = document.body.dataset.plansUrl;
     window._dashboard_url = document.body.dataset.dashboardUrl;
+    window._devAccountEmail = document.body.dataset.devAccountEmail;
+    window._devAccountPassword = document.body.dataset.devAccountPassword;
+    window._devAccountServer = document.body.dataset.devAccountServer;
   </script>
   <application-group-view />
 </body>