diff --git a/src/lib/components/imagePreview.svelte b/src/lib/components/imagePreview.svelte new file mode 100644 index 0000000000..5993df0890 --- /dev/null +++ b/src/lib/components/imagePreview.svelte @@ -0,0 +1,24 @@ + + + +
+ +
+
+
+
+
+ diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index 854ddb8df2..685b34d638 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -72,3 +72,4 @@ export { default as FakeModal } from './fakeModal.svelte'; export { default as RadioBoxes } from './radioBoxes.svelte'; export { default as ModalWrapper } from './modalWrapper.svelte'; export { default as ModalSideCol } from './modalSideCol.svelte'; +export { default as ImagePreview } from './imagePreview.svelte'; diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts index a81a484884..f828e6f857 100644 --- a/src/routes/console/project-[project]/messaging/providers/store.ts +++ b/src/routes/console/project-[project]/messaging/providers/store.ts @@ -38,6 +38,7 @@ type ProvidersMap = { placeholder?: string; description?: string; popover?: string[]; + popoverImage?: { src: { light: string; dark: string }; alt: string }; allowedFileExtensions?: string[]; optional?: boolean; options?: { label: string; value: string | number | boolean }[]; @@ -73,7 +74,14 @@ export const providers: ProvidersMap = { 'How to get the FCM service account JSON?', 'Head to Project settings -> Service accounts -> Generate new private key.', 'Generating the new key will result in the download of a JSON file.' - ] + ], + popoverImage: { + src: { + light: '/images/messaging/fcm-service-account-json-light.png', + dark: '/images/messaging/fcm-service-account-json-dark.png' + }, + alt: 'Screenshot of how to generate the Firebase Service Account JSON file' + } } ] }, @@ -89,8 +97,15 @@ export const providers: ProvidersMap = { placeholder: 'Enter team ID', popover: [ 'How to get the team ID?', - 'Head to Apple Developer Member Center -> Membership details -> Team ID.' - ] + 'Head to Apple Developer Member Center -> Membership details -> Team ID.' + ], + popoverImage: { + src: { + light: '/images/messaging/apns-team-id.png', + dark: '/images/messaging/apns-team-id.png' + }, + alt: 'Screenshot of where to find the Team ID in the Apple Developer Member Center' + } }, { label: 'Bundle ID', @@ -99,27 +114,15 @@ export const providers: ProvidersMap = { placeholder: 'Enter bundle ID', popover: [ 'How to get the bundle ID?', - 'Head to Apple Developer Member Center -> Certificates, Identifiers & Profiles -> Identifiers.', - ` -
- Screenshot of Bundle ID in Apple -
-
-
-
-
- ` - ] + 'Head to Apple Developer Member Center -> Certificates, Identifiers & Profiles -> Identifiers.' + ], + popoverImage: { + src: { + light: '/images/messaging/apns-bundle-id.png', + dark: '/images/messaging/apns-bundle-id.png' + }, + alt: 'Screenshot of where to find the Bundle ID in the Apple Developer Member Center' + } }, { label: 'Authentication key ID', @@ -128,9 +131,16 @@ export const providers: ProvidersMap = { placeholder: 'Enter key ID', popover: [ 'How to get the auth key ID?', - 'Head to Apple Developer Member Center -> Certificates, Identifiers & Profiles -> Keys.', + 'Head to Apple Developer Member Center -> Certificates, Identifiers & Profiles -> Keys.', 'Click on your key to view details.' - ] + ], + popoverImage: { + src: { + light: '/images/messaging/apns-authentication-key-id.png', + dark: '/images/messaging/apns-authentication-key-id.png' + }, + alt: 'Screenshot of how to find the Authentication Key ID in the Apple Developer Member Center' + } }, { label: 'Auth key (.p8 file)', @@ -139,9 +149,16 @@ export const providers: ProvidersMap = { allowedFileExtensions: ['p8'], popover: [ 'How to get the authentication key?', - 'Head to Apple Developer Member Center (under Program resources) -> Certificates, Identifiers & Profiles -> Keys.', + 'Head to Apple Developer Member Center (under Program resources) -> Certificates, Identifiers & Profiles -> Keys.', 'Create a key and give it a name. Enable the Apple Push Notifications service (APNS), and register your key.' - ] + ], + popoverImage: { + src: { + light: '/images/messaging/apns-auth-key.png', + dark: '/images/messaging/apns-auth-key.png' + }, + alt: 'Screenshot of where to download the Authentication Key in the Apple Developer Member Center' + } }, { label: 'Sandbox', diff --git a/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte b/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte index eba51e07fc..ec119c419a 100644 --- a/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte +++ b/src/routes/console/project-[project]/messaging/providers/wizard/configure.svelte @@ -14,6 +14,7 @@ import { onMount } from 'svelte'; import { providers } from '../store'; import { providerType, provider, providerParams } from './store'; + import { ImagePreview } from '$lib/components'; import { newMemberModal } from '$lib/stores/organization'; import CreateMember from '$routes/console/organization-[organization]/createMember.svelte'; import Provider from '../../provider.svelte'; @@ -65,6 +66,7 @@ {#each inputs as input} + {@const popoverImage = input.popoverImage} {#if input.type === 'text'} {@html input.popover?.join('

')} + {#if popoverImage} +
+
+ + {/if} {:else if input.type === 'password'} @@ -142,6 +152,14 @@

{@html input.popover?.join('

')} + {#if popoverImage} +
+
+ + {/if}

diff --git a/static/images/apns-bundle-id.png b/static/images/apns-bundle-id.png deleted file mode 100644 index 90fde1eff2..0000000000 Binary files a/static/images/apns-bundle-id.png and /dev/null differ diff --git a/static/images/messaging/apns-auth-key.png b/static/images/messaging/apns-auth-key.png new file mode 100644 index 0000000000..9034d5d2be Binary files /dev/null and b/static/images/messaging/apns-auth-key.png differ diff --git a/static/images/messaging/apns-authentication-key-id.png b/static/images/messaging/apns-authentication-key-id.png new file mode 100644 index 0000000000..6101664f42 Binary files /dev/null and b/static/images/messaging/apns-authentication-key-id.png differ diff --git a/static/images/messaging/apns-bundle-id.png b/static/images/messaging/apns-bundle-id.png new file mode 100644 index 0000000000..8ef8b8f321 Binary files /dev/null and b/static/images/messaging/apns-bundle-id.png differ diff --git a/static/images/messaging/apns-team-id.png b/static/images/messaging/apns-team-id.png new file mode 100644 index 0000000000..65ee4dd87b Binary files /dev/null and b/static/images/messaging/apns-team-id.png differ diff --git a/static/images/messaging/fcm-service-account-json-dark.png b/static/images/messaging/fcm-service-account-json-dark.png new file mode 100644 index 0000000000..0ee51da95b Binary files /dev/null and b/static/images/messaging/fcm-service-account-json-dark.png differ diff --git a/static/images/messaging/fcm-service-account-json-light.png b/static/images/messaging/fcm-service-account-json-light.png new file mode 100644 index 0000000000..66bb96fc07 Binary files /dev/null and b/static/images/messaging/fcm-service-account-json-light.png differ