New "Instant Onboarding" UX flow to create accounts

CHANGELOG.md

@@ -9,6 +9,7 @@
 - add quick key `Cmd+W`/`Ctrl+W` to close webxdc-, html_email- and help-window #3770 #3778
 - Accept images from clipboard in QR reader #3762
 - Introduce new `Spinner` component #3786
+- Instant Onboarding #3773
 
 ### Changed
 - Update translations (2024-04-04) #3746

_locales/_untranslated_en.json

@@ -29,5 +29,41 @@
   },
   "camera_access_failed": {
     "message": "Could not access video camera. You might want to check your video permissions or if the camera is used already by another program"
+  },
+  "onboarding_create_instant_account": {
+    "message": "Let's Get Started!"
+  },
+  "onboarding_alternative_logins": {
+    "message": "I Already Have a Login"
+  },
+  "manual_account_setup_option": {
+    "message": "Manual Login"
+  },
+  "instant_onboarding_title": {
+    "message": "Your Profile"
+  },
+  "instant_onboarding_agree_default": {
+    "message": "Read the Privacy Policy"
+  },
+  "instant_onboarding_agree_instance": {
+    "message": "About profiles on %1$s"
+  },
+  "instant_onboarding_create": {
+    "message": "Agree & Create Profile"
+  },
+  "instant_onboarding_show_more_instances": {
+    "message": "Explore Other Options"
+  },
+  "instant_onboarding_group_info": {
+    "message": "Create a profile to join the group \"%1$s\"."
+  },
+  "instant_onboarding_contact_info": {
+    "message": "Create a profile to chat with %1$s."
+  },
+  "instant_onboarding_confirm_contact": {
+    "message": "Do you want to create a new DeltaChat profile and start chatting with %1?"
+  },
+  "instant_onboarding_confirm_group": {
+    "message": "Do you want to create a new DeltaChat profile and join the \"%1\" chat group?"
   }
 }

scss/login/_login.scss

@@ -70,55 +70,6 @@
   }
 }
 
-.login-screen {
-  flex-grow: 1;
-  li.login-item {
-    display: flex;
-    justify-content: space-between;
-
-    &:hover {
-      button.bp4-intent-danger {
-        display: inline-flex;
-      }
-    }
-
-    button.bp4-intent-danger {
-      display: none;
-    }
-
-    button.bp4-large {
-      width: 90%;
-    }
-  }
-
-  .window {
-    background-size: cover;
-    background-image: url('../images/backgrounds/petito-moreno.webp');
-    height: 100vh;
-    margin-top: 0px;
-  }
-
-  div.delta-blue-button {
-    -webkit-appearance: button-bevel;
-    background-color: transparent;
-    color: var(--loginButtonText);
-    font-size: 16px;
-    display: block;
-    width: 100%;
-    margin-top: 30px;
-    &:hover {
-      cursor: pointer;
-    }
-    p {
-      display: -webkit-inline-box;
-      position: relative;
-      font-size: 18px;
-      margin-bottom: 0px;
-      bottom: 3px;
-    }
-  }
-}
-
 div.delta-form-group {
   div.label {
     height: 13px;
@@ -228,34 +179,3 @@ div.delta-form-group {
     }
   }
 }
-
-.welcome-deltachat {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  text-align: center;
-  align-items: center;
-
-  .delta-icon {
-    width: 90%;
-    margin: 0 auto;
-    height: auto;
-    @media (max-height: 700px) {
-      display: none;
-    }
-  }
-
-  .f1 {
-    margin-top: 40px;
-    margin-bottom: 30px;
-    font-size: x-large;
-    color: var(--colorNone);
-  }
-
-  .f2 {
-    margin-top: 10px;
-    padding: 0px 20px;
-    color: var(--colorNone);
-    font-size: larger;
-  }
-}

src/renderer/ScreenController.tsx

@@ -21,6 +21,7 @@ import AccountDeletionScreen from './components/screens/AccountDeletionScreen/Ac
 import RuntimeAdapter from './components/RuntimeAdapter'
 import { ChatProvider } from './contexts/ChatContext'
 import { ContextMenuProvider } from './contexts/ContextMenuContext'
+import { InstantOnboardingProvider } from './contexts/InstantOnboardingContext'
 
 const log = getLogger('renderer/ScreenController')
 
@@ -290,33 +291,35 @@ export default class ScreenController extends Component {
             screen: this.state.screen,
           }}
         >
-          {/*
-            The key attribute here forces a clean re-rendering when the
-            account changes. We needs this to reset the chat context state.
-          */}
-          <ChatProvider
-            key={this.selectedAccountId}
-            accountId={this.selectedAccountId}
-          >
-            <ContextMenuProvider>
-              <DialogContextProvider>
-                <RuntimeAdapter accountId={this.selectedAccountId} />
-                <KeybindingsContextProvider>
-                  <div className='main-container'>
-                    <AccountListSidebar
-                      selectedAccountId={this.selectedAccountId}
-                      onAddAccount={this.addAndSelectAccount.bind(this)}
-                      onSelectAccount={this.selectAccount.bind(this)}
-                      openAccountDeletionScreen={this.openAccountDeletionScreen.bind(
-                        this
-                      )}
-                    />
-                    {this.renderScreen()}
-                  </div>
-                </KeybindingsContextProvider>
-              </DialogContextProvider>
-            </ContextMenuProvider>
-          </ChatProvider>
+          <InstantOnboardingProvider>
+            {/*
+              The key attribute here forces a clean re-rendering when the
+              account changes. We needs this to reset the chat context state.
+            */}
+            <ChatProvider
+              key={this.selectedAccountId}
+              accountId={this.selectedAccountId}
+            >
+              <ContextMenuProvider>
+                <DialogContextProvider>
+                  <RuntimeAdapter accountId={this.selectedAccountId} />
+                  <KeybindingsContextProvider>
+                    <div className='main-container'>
+                      <AccountListSidebar
+                        selectedAccountId={this.selectedAccountId}
+                        onAddAccount={this.addAndSelectAccount.bind(this)}
+                        onSelectAccount={this.selectAccount.bind(this)}
+                        openAccountDeletionScreen={this.openAccountDeletionScreen.bind(
+                          this
+                        )}
+                      />
+                      {this.renderScreen()}
+                    </div>
+                  </KeybindingsContextProvider>
+                </DialogContextProvider>
+              </ContextMenuProvider>
+            </ChatProvider>
+          </InstantOnboardingProvider>
         </ScreenContext.Provider>
       </div>
     )

src/renderer/backend/account.ts

@@ -0,0 +1,15 @@
+import { BackendRemote } from '../backend-com'
+
+import type { T } from '@deltachat/jsonrpc-client'
+
+export async function getConfiguredAccounts(): Promise<T.Account[]> {
+  const accounts = await BackendRemote.rpc.getAllAccounts()
+  return accounts.filter(account => {
+    return account.kind === 'Configured'
+  })
+}
+
+export async function isAccountConfigured(accountId: number): Promise<boolean> {
+  const account = await BackendRemote.rpc.getAccountInfo(accountId)
+  return account.kind === 'Configured'
+}

src/renderer/backend/qr.ts

@@ -0,0 +1,40 @@
+import { BackendRemote } from '../backend-com'
+
+import type { T } from '@deltachat/jsonrpc-client'
+
+export type AccountQr = Extract<T.Qr, { kind: 'account' }>
+
+export type VerifyContactQr = Extract<T.Qr, { kind: 'askVerifyContact' }>
+
+export type VerifyGroupQr = Extract<T.Qr, { kind: 'askVerifyGroup' }>
+
+export type LoginQr = Extract<T.Qr, { kind: 'login' }>
+
+export type QrWithUrl<Q = T.Qr> = {
+  qr: Q
+  url: string
+}
+
+/**
+ * Processes an unchecked string which was scanned from a QR code and returns
+ * a parsed result when it was valid, throws an error if string is invalid.
+ *
+ * See list of supported DeltaChat URI-schemes here:
+ * - https://github.com/deltachat/interface/blob/master/uri-schemes.md
+ * - https://c.delta.chat/classdc__context__t.html#a34a865a52127ed2cc8c2f016f085086c
+ */
+export async function processQr(
+  accountId: number,
+  url: string
+): Promise<QrWithUrl> {
+  const qr = await BackendRemote.rpc.checkQr(accountId, url)
+
+  if (!qr) {
+    throw new Error('Could not parse string')
+  }
+
+  return {
+    qr,
+    url,
+  }
+}

src/renderer/components/Avatar.tsx

@@ -20,7 +20,7 @@ export function QRAvatar() {
 export function avatarInitial(name: string, addr?: string) {
   const nameOrAddr = name || addr
   const codepoint = nameOrAddr && nameOrAddr.codePointAt(0)
-  return codepoint ? String.fromCodePoint(codepoint).toUpperCase() : '#'
+  return codepoint ? String.fromCodePoint(codepoint).toUpperCase() : ''
 }
 
 type htmlDivProps = React.HTMLAttributes<HTMLDivElement>

src/renderer/components/Button/style.module.scss

@@ -1,47 +1,39 @@
 .button {
   align-items: center;
   background-color: transparent;
-  border-radius: 5px;
+  border-radius: 10px;
   border: 0;
-  color: var(--colorPrimary);
+  color: var(--buttonText);
   cursor: pointer;
   display: flex;
   font-size: 16px;
   font-weight: bold;
   justify-content: center;
-  padding: 10px 15px;
+  padding: 12px 15px;
   text-align: center;
   text-transform: uppercase;
 
   &:hover {
-    background-color: var(--chatListItemBgHover);
-  }
-
-  &:disabled {
-    background-color: rgba(206, 217, 224, 0.5);
-    border-color: rgba(206, 217, 224, 0.5);
-    color: var(--globalText);
-    cursor: not-allowed;
-
-    &:hover {
-      background-color: rgba(206, 217, 224, 0.5);
-    }
+    background-color: var(--buttonHover);
   }
 
   &.primary {
-    background-color: var(--bp4-input-focused);
-    color: white;
+    background-color: var(--buttonPrimaryBackground);
+    color: var(--buttonPrimaryText);
   }
 
   &.secondary {
-    background-color: var(--bp4ButtonBg);
-    border-color: var(--bp4ButtonText);
-    border-style: solid;
-    border-width: 1.5px;
-    color: var(--bp4ButtonText);
+    background-color: var(--buttonSecondaryBackground);
+    color: var(--buttonSecondaryText);
   }
 
   &.danger {
-    color: var(--colorDanger);
+    color: var(--buttonDangerText);
+  }
+
+  &:disabled {
+    background-color: var(--buttonDisabledBackground);
+    color: var(--buttonDisabledText);
+    cursor: not-allowed;
   }
 }

src/renderer/components/Callout/index.tsx

@@ -1,9 +1,17 @@
 import React from 'react'
+import classNames from 'classnames'
 
 import type { PropsWithChildren } from 'react'
 
 import styles from './styles.module.scss'
 
-export default function Callout({ children }: PropsWithChildren<{}>) {
-  return <div className={styles.callout}>{children}</div>
+type Props = {
+  className?: string
+}
+
+export default function Callout({
+  children,
+  className,
+}: PropsWithChildren<Props>) {
+  return <div className={classNames(styles.callout, className)}>{children}</div>
 }

src/renderer/components/Icon/index.tsx

@@ -20,6 +20,7 @@ export type IconName =
   | 'more'
   | 'open_in_new'
   | 'person'
+  | 'person-filled'
   | 'qr'
   | 'question_mark'
   | 'reaction'

src/renderer/components/ImageBackdrop/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import type { PropsWithChildren } from 'react'
+
+import styles from './styles.module.scss'
+
+type Props = {
+  variant: 'welcome' | 'deletion'
+}
+
+export default function ImageBackdrop({
+  children,
+  variant = 'welcome',
+}: PropsWithChildren<Props>) {
+  return (
+    <div className={classNames(styles.imageBackdrop, styles[variant])}>
+      {children}
+    </div>
+  )
+}