New sticker creator button

_locales/en/messages.json

@@ -2947,6 +2947,18 @@
     "message": "Conversation marked unread",
     "description": "A toast that shows up when user marks a conversation as unread"
   },
+  "icu:AuthArtCreator--dialog--message": {
+    "messageformat": "Would you like to open Signal Sticker Pack Creator?",
+    "description": "A body of the dialog that is presented when user tries to open Signal Sticker Pack Creator from a link"
+  },
+  "icu:AuthArtCreator--dialog--confirm": {
+    "messageformat": "Confirm",
+    "description": "A buttle title for confirming Signal Sticker Pack Creator dialog"
+  },
+  "icu:AuthArtCreator--dialog--dismiss": {
+    "messageformat": "Dismiss",
+    "description": "A buttle title for dismissing Signal Sticker Pack Creator dialog"
+  },
   "StickerCreator--title": {
     "message": "Sticker pack creator",
     "description": "The title of the Sticker Pack Creator window"
@@ -3147,6 +3159,10 @@
     "message": "Please set up Signal on your phone and desktop to use the Sticker Pack Creator",
     "description": "The error message which appears when the user has not linked their account and attempts to use the Sticker Creator"
   },
+  "icu:ArtCreator--Authentication--error": {
+    "messageformat": "Please set up Signal on your phone and desktop to use the Sticker Art Creator",
+    "description": "The error message which appears when the user has not linked their account and attempts to use the Art Creator"
+  },
   "Reactions--remove": {
     "message": "Remove reaction",
     "describe": "Shown when you want to remove a reaction you've made"

app/main.ts

@@ -417,6 +417,7 @@ async function prepareUrl(
     storageUrl: config.get<string>('storageUrl'),
     updatesUrl: config.get<string>('updatesUrl'),
     resourcesUrl: config.get<string>('resourcesUrl'),
+    artCreatorUrl: config.get<string>('artCreatorUrl'),
     cdnUrl0: config.get<ConfigType>('cdn').get<string>('0'),
     cdnUrl2: config.get<ConfigType>('cdn').get<string>('2'),
     certificateAuthority: config.get<string>('certificateAuthority'),
@@ -1004,6 +1005,11 @@ ipc.handle('database-ready', async () => {
   getLogger().info('sending `database-ready`');
 });
 
+ipc.handle('open-art-creator', (_event, { username, password }) => {
+  const baseUrl = config.get<string>('artCreatorUrl');
+  drop(shell.openExternal(`${baseUrl}/#auth=${username}:${password}`));
+});
+
 ipc.on('show-window', () => {
   showWindow();
 });
@@ -1409,6 +1415,25 @@ async function showStickerCreator() {
   await safeLoadURL(stickerCreatorWindow, await appUrl);
 }
 
+async function openArtCreator() {
+  if (!(await getIsLinked())) {
+    const message = getResolvedMessagesLocale().i18n(
+      'icu:ArtCreator--Authentication--error'
+    );
+
+    await dialog.showMessageBox({
+      type: 'warning',
+      message,
+    });
+
+    return;
+  }
+
+  if (mainWindow) {
+    mainWindow.webContents.send('open-art-creator');
+  }
+}
+
 let debugLogWindow: BrowserWindow | undefined;
 async function showDebugLogWindow() {
   if (debugLogWindow) {
@@ -1963,6 +1988,7 @@ function setupMenu(options?: Partial<CreateTemplateOptionsType>) {
 
     // actions
     forceUpdate,
+    openArtCreator,
     openContactUs,
     openForums,
     openJoinTheBeta,
@@ -2348,6 +2374,14 @@ function handleSgnlHref(incomingHref: string) {
         ? Buffer.from(packKeyHex, 'hex').toString('base64')
         : '';
       mainWindow.webContents.send('show-sticker-pack', { packId, packKey });
+    } else if (command === 'art-auth') {
+      const token = args?.get('token');
+      const pubKeyBase64 = args?.get('pub_key');
+
+      mainWindow.webContents.send('authorize-art-creator', {
+        token,
+        pubKeyBase64,
+      });
     } else if (command === 'signal.group' && hash) {
       getLogger().info('Showing group from sgnl protocol link');
       mainWindow.webContents.send('show-group-via-link', { hash });
@@ -2549,6 +2583,8 @@ ipc.handle('getMenuOptions', async () => {
 ipc.handle('executeMenuAction', async (_event, action: MenuActionType) => {
   if (action === 'forceUpdate') {
     drop(forceUpdate());
+  } else if (action === 'openArtCreator') {
+    drop(openArtCreator());
   } else if (action === 'openContactUs') {
     openContactUs();
   } else if (action === 'openForums') {

app/menu.ts

@@ -38,6 +38,7 @@ export const createTemplate = (
     showKeyboardShortcuts,
     showSettings,
     showStickerCreator,
+    openArtCreator,
   } = options;
 
   const template: MenuListType = [
@@ -46,7 +47,7 @@ export const createTemplate = (
       submenu: [
         {
           label: i18n('mainMenuCreateStickers'),
-          click: showStickerCreator,
+          click: isProduction ? showStickerCreator : openArtCreator,
         },
         {
           label: i18n('mainMenuSettings'),

config/default.json

@@ -10,6 +10,7 @@
   "contentProxyUrl": "http://contentproxy.signal.org:443",
   "updatesUrl": "https://updates2.signal.org/desktop",
   "resourcesUrl": "https://updates2.signal.org",
+  "artCreatorUrl": "https://create.staging.signal.art",
   "updatesPublicKey": "05fd7dd3de7149dc0a127909fee7de0f7620ddd0de061b37a2c303e37de802a401",
   "sfuUrl": "https://sfu.voip.signal.org/",
   "updatesEnabled": false,

protos/ArtCreator.proto

@@ -0,0 +1,14 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package signalservice;
+
+message ArtProvisioningEnvelope {
+  optional bytes publicKey = 1;
+  optional bytes ciphertext = 2;
+}
+
+message ArtProvisioningMessage {
+  optional string username = 1;
+  optional string password = 2;
+}

sticker-creator/window/phase3-sticker-functions.ts

@@ -38,6 +38,7 @@ const WebAPI = initializeWebAPI({
   storageUrl: config.storageUrl,
   updatesUrl: config.updatesUrl,
   resourcesUrl: config.resourcesUrl,
+  artCreatorUrl: config.artCreatorUrl,
   directoryConfig: config.directoryConfig,
   cdnUrlObject: {
     0: config.cdnUrl0,

stylesheets/_modules.scss

@@ -3522,7 +3522,7 @@ button.module-image__border-overlay:focus {
   }
 }
 
-.module-spinner__circle--on-captcha {
+.module-spinner__circle--on-primary-button {
   background-color: $color-white-alpha-40;
 }
 
@@ -3540,7 +3540,7 @@ button.module-image__border-overlay:focus {
 .module-spinner__arc--on-avatar {
   background-color: $color-white;
 }
-.module-spinner__arc--on-captcha {
+.module-spinner__arc--on-primary-button {
   background-color: $color-white;
 }
 

ts/components/CaptchaDialog.tsx

@@ -82,7 +82,7 @@ export function CaptchaDialog(props: Readonly<PropsType>): JSX.Element {
       variant={ButtonVariant.Primary}
     >
       {isPending ? (
-        <Spinner size="22px" svgSize="small" direction="on-captcha" />
+        <Spinner size="22px" svgSize="small" direction="on-primary-button" />
       ) : (
         'Continue'
       )}

ts/components/ConfirmationDialog.tsx

@@ -10,18 +10,21 @@ import { ModalHost } from './ModalHost';
 import { ModalPage } from './Modal';
 import type { Theme } from '../util/theme';
 import { useAnimated } from '../hooks/useAnimated';
+import { Spinner } from './Spinner';
 
 export type ActionSpec = {
   text: string;
   action: () => unknown;
   style?: 'affirmative' | 'negative';
+  autoClose?: boolean;
 };
 
 export type OwnProps = Readonly<{
   actions?: Array<ActionSpec>;
   dialogName: string;
   cancelButtonVariant?: ButtonVariant;
   cancelText?: string;
+  isSpinning?: boolean;
   children?: React.ReactNode;
   hasXButton?: boolean;
   i18n: LocalizerType;
@@ -65,6 +68,7 @@ export const ConfirmationDialog = React.memo(function ConfirmationDialogInner({
   children,
   hasXButton,
   i18n,
+  isSpinning,
   moduleClassName,
   noMouseClose,
   noDefaultCancelButton,
@@ -99,7 +103,7 @@ export const ConfirmationDialog = React.memo(function ConfirmationDialogInner({
 
   const footer = (
     <>
-      {!noDefaultCancelButton ? (
+      {!isSpinning && !noDefaultCancelButton ? (
         <Button
           onClick={handleCancel}
           ref={focusRef}
@@ -114,14 +118,25 @@ export const ConfirmationDialog = React.memo(function ConfirmationDialogInner({
       {actions.map((action, i) => (
         <Button
           key={action.text}
+          disabled={isSpinning}
           onClick={() => {
             action.action();
-            close();
+            if (action.autoClose !== false) {
+              close();
+            }
           }}
           data-action={i}
           variant={getButtonVariant(action.style)}
         >
-          {action.text}
+          {isSpinning ? (
+            <Spinner
+              size="22px"
+              svgSize="small"
+              direction="on-primary-button"
+            />
+          ) : (
+            action.text
+          )}
         </Button>
       ))}
     </>

ts/components/GlobalModalContainer.tsx

@@ -7,6 +7,7 @@ import type {
   ForwardMessagePropsType,
   UserNotFoundModalStateType,
   SafetyNumberChangedBlockingDataType,
+  AuthorizeArtCreatorDataType,
 } from '../state/ducks/globalModals';
 import type { LocalizerType, ThemeType } from '../types/Util';
 import { missingCaseError } from '../util/missingCaseError';
@@ -66,6 +67,11 @@ export type PropsType = {
   // WhatsNewModal
   isWhatsNewVisible: boolean;
   hideWhatsNewModal: () => unknown;
+  // AuthArtCreatorModal
+  authArtCreatorData?: AuthorizeArtCreatorDataType;
+  isAuthorizingArtCreator?: boolean;
+  cancelAuthorizeArtCreator: () => unknown;
+  confirmAuthorizeArtCreator: () => unknown;
 };
 
 export function GlobalModalContainer({
@@ -110,6 +116,11 @@ export function GlobalModalContainer({
   // WhatsNewModal
   hideWhatsNewModal,
   isWhatsNewVisible,
+  // AuthArtCreatorModal
+  authArtCreatorData,
+  isAuthorizingArtCreator,
+  cancelAuthorizeArtCreator,
+  confirmAuthorizeArtCreator,
 }: PropsType): JSX.Element | null {
   // We want the following dialogs to show in this order:
   // 1. Errors
@@ -200,5 +211,28 @@ export function GlobalModalContainer({
     );
   }
 
+  if (authArtCreatorData) {
+    return (
+      <ConfirmationDialog
+        dialogName="GlobalModalContainer.authArtCreator"
+        cancelText={i18n('icu:AuthArtCreator--dialog--dismiss')}
+        cancelButtonVariant={ButtonVariant.Secondary}
+        i18n={i18n}
+        isSpinning={isAuthorizingArtCreator}
+        onClose={cancelAuthorizeArtCreator}
+        actions={[
+          {
+            text: i18n('icu:AuthArtCreator--dialog--confirm'),
+            style: 'affirmative',
+            action: confirmAuthorizeArtCreator,
+            autoClose: false,
+          },
+        ]}
+      >
+        {i18n('icu:AuthArtCreator--dialog--message')}
+      </ConfirmationDialog>
+    );
+  }
+
   return null;
 }

ts/components/Spinner.tsx

@@ -13,7 +13,7 @@ export const SpinnerDirections = [
   'outgoing',
   'incoming',
   'on-background',
-  'on-captcha',
+  'on-primary-button',
   'on-progress-dialog',
   'on-avatar',
 ] as const;

ts/components/TitleBarContainer.tsx

@@ -226,6 +226,7 @@ export function TitleBarContainer(props: PropsType): JSX.Element {
 
         // actions
         forceUpdate: () => executeMenuAction('forceUpdate'),
+        openArtCreator: () => executeMenuAction('openArtCreator'),
         openContactUs: () => executeMenuAction('openContactUs'),
         openForums: () => executeMenuAction('openForums'),
         openJoinTheBeta: () => executeMenuAction('openJoinTheBeta'),