diff --git a/server/package-lock.json b/server/package-lock.json index c49dfb4ef2..63cb3ebd26 100644 --- a/server/package-lock.json +++ b/server/package-lock.json @@ -60,6 +60,7 @@ "semver": "^7.6.2", "sharp": "^0.33.0", "sirv": "^2.0.4", + "tailwindcss-preset-email": "^1.3.2", "thumbhash": "^0.1.1", "typeorm": "^0.3.17", "ua-parser-js": "^1.0.35" @@ -13831,6 +13832,11 @@ "csstype": "^3.0.2" } }, + "node_modules/react-email/node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==" + }, "node_modules/react-email/node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -13981,6 +13987,53 @@ "node": ">=0.10.0" } }, + "node_modules/react-email/node_modules/tailwindcss": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz", + "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "arg": "^5.0.2", + "chokidar": "^3.5.3", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.3.0", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "jiti": "^1.19.1", + "lilconfig": "^2.1.0", + "micromatch": "^4.0.5", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.4.23", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.1", + "postcss-nested": "^6.0.1", + "postcss-selector-parser": "^6.0.11", + "resolve": "^1.22.2", + "sucrase": "^3.32.0" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/react-email/node_modules/tailwindcss/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/react-email/node_modules/typescript": { "version": "5.1.6", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", @@ -15507,9 +15560,10 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz", - "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==", + "version": "3.4.6", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.6.tgz", + "integrity": "sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==", + "peer": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -15519,7 +15573,7 @@ "fast-glob": "^3.3.0", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.19.1", + "jiti": "^1.21.0", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", @@ -15542,15 +15596,48 @@ "node": ">=14.0.0" } }, + "node_modules/tailwindcss-email-variants": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/tailwindcss-email-variants/-/tailwindcss-email-variants-3.0.1.tgz", + "integrity": "sha512-bRk4R2jnfaW7BBaL2kDgOdBl0SpVP/JPDE/yCkZb1n3YrPK9ZQyQGZoVX3OX06GxjMOrNO3wZACVdHJce7dm8w==", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "tailwindcss": ">=3.4.0" + } + }, + "node_modules/tailwindcss-mso": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/tailwindcss-mso/-/tailwindcss-mso-1.4.3.tgz", + "integrity": "sha512-8YfZ4xnIComDrhoSr8FUwm7EGz1FkxsZy07Fs4Jm/JxHrFiubdiZjyxLuHMc3S8o02+U4fjRGHPOzoVXRus10A==", + "peerDependencies": { + "tailwindcss": ">=3.4.0" + } + }, + "node_modules/tailwindcss-preset-email": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/tailwindcss-preset-email/-/tailwindcss-preset-email-1.3.2.tgz", + "integrity": "sha512-kSPNZM5+tSi+uhCb4rk1XF9Q6zp8lhoNLCa3GQqe6gKmfI/nTqY8Y+5/DYNpwqhmUPCSHULlyI/LUCaF/q8sLg==", + "dependencies": { + "tailwindcss-email-variants": "^3.0.0", + "tailwindcss-mso": "^1.4.3" + }, + "peerDependencies": { + "tailwindcss": ">=3.4.6" + } + }, "node_modules/tailwindcss/node_modules/arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", - "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==" + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "peer": true }, "node_modules/tailwindcss/node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "peer": true, "dependencies": { "is-glob": "^4.0.3" }, @@ -26373,6 +26460,11 @@ "csstype": "^3.0.2" } }, + "arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==" + }, "brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -26476,6 +26568,45 @@ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" }, + "tailwindcss": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz", + "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==", + "requires": { + "@alloc/quick-lru": "^5.2.0", + "arg": "^5.0.2", + "chokidar": "^3.5.3", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.3.0", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "jiti": "^1.19.1", + "lilconfig": "^2.1.0", + "micromatch": "^4.0.5", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.4.23", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.1", + "postcss-nested": "^6.0.1", + "postcss-selector-parser": "^6.0.11", + "resolve": "^1.22.2", + "sucrase": "^3.32.0" + }, + "dependencies": { + "glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "requires": { + "is-glob": "^4.0.3" + } + } + } + }, "typescript": { "version": "5.1.6", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", @@ -27591,9 +27722,10 @@ } }, "tailwindcss": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz", - "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==", + "version": "3.4.6", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.6.tgz", + "integrity": "sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==", + "peer": true, "requires": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -27603,7 +27735,7 @@ "fast-glob": "^3.3.0", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.19.1", + "jiti": "^1.21.0", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", @@ -27622,18 +27754,41 @@ "arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", - "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==" + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "peer": true }, "glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "peer": true, "requires": { "is-glob": "^4.0.3" } } } }, + "tailwindcss-email-variants": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/tailwindcss-email-variants/-/tailwindcss-email-variants-3.0.1.tgz", + "integrity": "sha512-bRk4R2jnfaW7BBaL2kDgOdBl0SpVP/JPDE/yCkZb1n3YrPK9ZQyQGZoVX3OX06GxjMOrNO3wZACVdHJce7dm8w==", + "requires": {} + }, + "tailwindcss-mso": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/tailwindcss-mso/-/tailwindcss-mso-1.4.3.tgz", + "integrity": "sha512-8YfZ4xnIComDrhoSr8FUwm7EGz1FkxsZy07Fs4Jm/JxHrFiubdiZjyxLuHMc3S8o02+U4fjRGHPOzoVXRus10A==", + "requires": {} + }, + "tailwindcss-preset-email": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/tailwindcss-preset-email/-/tailwindcss-preset-email-1.3.2.tgz", + "integrity": "sha512-kSPNZM5+tSi+uhCb4rk1XF9Q6zp8lhoNLCa3GQqe6gKmfI/nTqY8Y+5/DYNpwqhmUPCSHULlyI/LUCaF/q8sLg==", + "requires": { + "tailwindcss-email-variants": "^3.0.0", + "tailwindcss-mso": "^1.4.3" + } + }, "tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/server/package.json b/server/package.json index bbabb284e0..c6796a95f5 100644 --- a/server/package.json +++ b/server/package.json @@ -86,6 +86,7 @@ "semver": "^7.6.2", "sharp": "^0.33.0", "sirv": "^2.0.4", + "tailwindcss-preset-email": "^1.3.2", "thumbhash": "^0.1.1", "typeorm": "^0.3.17", "ua-parser-js": "^1.0.35" diff --git a/server/src/emails/album-invite.email.tsx b/server/src/emails/album-invite.email.tsx index cb2298b6d0..8ea6007eba 100644 --- a/server/src/emails/album-invite.email.tsx +++ b/server/src/emails/album-invite.email.tsx @@ -1,21 +1,8 @@ -import { - Body, - Button, - Column, - Container, - Head, - Hr, - Html, - Img, - Link, - Preview, - Row, - Section, - Text, -} from '@react-email/components'; -import * as CSS from 'csstype'; +import { Img, Link, Section, Text } from '@react-email/components'; import * as React from 'react'; import { AlbumInviteEmailProps } from 'src/interfaces/notification.interface'; +import { ImmichButton } from './components/button.component'; +import ImmichLayout from './components/immich.layout'; export const AlbumInviteEmail = ({ baseUrl, @@ -25,122 +12,37 @@ export const AlbumInviteEmail = ({ albumId, cid, }: AlbumInviteEmailProps) => ( - - - You have been added to a shared album. - - -
+ + Hey {recipientName}! + + + + {senderName} has added you to the album {albumName}. + + + {cid && ( +
+ - Immich + /> +
+ )} - Hey {recipientName}! +
+ View Album +
- - {senderName} has added you to the album {albumName}. - - - {cid && ( - - - - - - )} - - - To view the album, open the link in a browser, or click the button below. - - - - - {baseUrl}/albums/{albumId} - - - - - - - - -
- -
- -
- - - - Immich - - - Immich - - - -
- - - Immich project is available under GNU AGPL v3 license. - - - - + + If you cannot click the button use the link below to view the album. +
+ {`${baseUrl}/albums/${albumId}`} + + ); AlbumInviteEmail.PreviewProps = { @@ -148,27 +50,7 @@ AlbumInviteEmail.PreviewProps = { albumName: 'Trip to Europe', albumId: 'b63f6dae-e1c9-401b-9a85-9dbbf5612539', senderName: 'Owner User', - recipientName: 'Guest User', - cid: '', + recipientName: 'Alan Turing', } as AlbumInviteEmailProps; export default AlbumInviteEmail; - -const text = { - margin: '0 0 24px 0', - textAlign: 'left' as const, - fontSize: '18px', - lineHeight: '24px', -}; - -const button: CSS.Properties = { - backgroundColor: 'rgb(66, 80, 175)', - margin: '1em 0', - padding: '0.75em 3em', - color: '#fff', - fontSize: '1em', - fontWeight: 700, - lineHeight: 1.5, - textTransform: 'uppercase', - borderRadius: '9999px', -}; diff --git a/server/src/emails/album-update.email.tsx b/server/src/emails/album-update.email.tsx index 8dbd3fb7d9..87d7558c8d 100644 --- a/server/src/emails/album-update.email.tsx +++ b/server/src/emails/album-update.email.tsx @@ -1,165 +1,49 @@ -import { - Body, - Button, - Column, - Container, - Head, - Hr, - Html, - Img, - Link, - Preview, - Row, - Section, - Text, -} from '@react-email/components'; -import * as CSS from 'csstype'; +import { Img, Link, Section, Text } from '@react-email/components'; import * as React from 'react'; import { AlbumUpdateEmailProps } from 'src/interfaces/notification.interface'; +import { ImmichButton } from './components/button.component'; +import ImmichLayout from './components/immich.layout'; export const AlbumUpdateEmail = ({ baseUrl, albumName, recipientName, albumId, cid }: AlbumUpdateEmailProps) => ( - - - New media has been added to a shared album. - - -
+ + Hey {recipientName}! + + + + New media has been added to {albumName}, +
check it out! + + + {cid && ( +
+ - Immich + /> +
+ )} - Hey {recipientName}! +
+ View Album +
- - New media has been added to {albumName}, check it out! - - - {cid && ( - - - - - - )} - - - To view the album, open the link in a browser, or click the button below. - - - - - {baseUrl}/albums/{albumId} - - - - - - - - -
- -
- -
- - - - Immich - - - Immich - - - -
- - - Immich project is available under GNU AGPL v3 license. - - - - + + If you cannot click the button use the link below to view the album. +
+ {`${baseUrl}/albums/${albumId}`} + + ); AlbumUpdateEmail.PreviewProps = { baseUrl: 'https://demo.immich.app', albumName: 'Trip to Europe', albumId: 'b63f6dae-e1c9-401b-9a85-9dbbf5612539', - recipientName: 'Alex Tran', + recipientName: 'Alan Turing', } as AlbumUpdateEmailProps; export default AlbumUpdateEmail; - -const text = { - margin: '0 0 24px 0', - textAlign: 'left' as const, - fontSize: '18px', - lineHeight: '24px', -}; - -const button: CSS.Properties = { - backgroundColor: 'rgb(66, 80, 175)', - margin: '1em 0', - padding: '0.75em 3em', - color: '#fff', - fontSize: '1em', - fontWeight: 700, - lineHeight: 1.5, - textTransform: 'uppercase', - borderRadius: '9999px', -}; diff --git a/server/src/emails/components/button.component.tsx b/server/src/emails/components/button.component.tsx new file mode 100644 index 0000000000..9c229fc16d --- /dev/null +++ b/server/src/emails/components/button.component.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { Button, ButtonProps } from '@react-email/components'; + +interface ImmichButtonProps extends ButtonProps {} + +export const ImmichButton = ({ children, ...props }: ImmichButtonProps) => ( + +); diff --git a/server/src/emails/components/footer.template.tsx b/server/src/emails/components/footer.template.tsx new file mode 100644 index 0000000000..7c41a7196d --- /dev/null +++ b/server/src/emails/components/footer.template.tsx @@ -0,0 +1,25 @@ +import { Column, Img, Link, Row, Text } from '@react-email/components'; +import * as React from 'react'; + +export const ImmichFooter = () => ( + <> + + + + + + + +
+ + Immich + +
+ + + + + Immich project is available under GNU AGPL v3 license. + + +); diff --git a/server/src/emails/components/futo.layout.tsx b/server/src/emails/components/futo.layout.tsx new file mode 100644 index 0000000000..54da77b8af --- /dev/null +++ b/server/src/emails/components/futo.layout.tsx @@ -0,0 +1,102 @@ +import { + Body, + Container, + Font, + Head, + Hr, + Html, + Img, + Link, + Preview, + Section, + Tailwind, + Text, +} from '@react-email/components'; +import * as React from 'react'; +import { ImmichFooter } from './footer.template'; + +interface FutoLayoutProps { + children: React.ReactNode; + preview: string; +} + +export const FutoLayout = ({ children, preview }: FutoLayoutProps) => ( + + + + + + {preview} + + +
+
+ Immich +
+ + {children} +
+ +
+ + FUTO + +
+ +
+ + + + + + +); + +FutoLayout.PreviewProps = { + preview: 'This is the preview shown on some mail clients', + children: Email body goes here., +} as FutoLayoutProps; + +export default FutoLayout; diff --git a/server/src/emails/components/immich.layout.tsx b/server/src/emails/components/immich.layout.tsx new file mode 100644 index 0000000000..30e4b552fd --- /dev/null +++ b/server/src/emails/components/immich.layout.tsx @@ -0,0 +1,74 @@ +import { Body, Container, Font, Head, Hr, Html, Img, Preview, Section, Tailwind, Text } from '@react-email/components'; +import * as React from 'react'; +import { ImmichFooter } from './footer.template'; + +interface ImmichLayoutProps { + children: React.ReactNode; + preview: string; +} + +export const ImmichLayout = ({ children, preview }: ImmichLayoutProps) => ( + + + + + + {preview} + + +
+
+ Immich +
+ + {children} +
+ +
+ + + + + + +); + +ImmichLayout.PreviewProps = { + preview: 'This is the preview shown on some mail clients', + children: Email body goes here., +} as ImmichLayoutProps; + +export default ImmichLayout; diff --git a/server/src/emails/license.email.tsx b/server/src/emails/license.email.tsx index 9c6c42a152..69eb6d9045 100644 --- a/server/src/emails/license.email.tsx +++ b/server/src/emails/license.email.tsx @@ -15,172 +15,50 @@ import { } from '@react-email/components'; import * as CSS from 'csstype'; import * as React from 'react'; +import { ImmichButton } from './components/button.component'; +import FutoLayout from './components/futo.layout'; /** * Template to be used for FUTOPay project * Variable is {{LICENSEKEY}} * */ export const LicenseEmail = () => ( - - - Your Immich Server License - - + Thank you for supporting Immich and open-source software + + + Your Immich license key is + + +
+ {'{{LICENSEKEY}}'} +
+ + {/* + To activate your instance, you can click the following button or copy and paste the link below to your browser. + + +
+ -
- Immich + Activate + +
- Thank you for supporting Immich and open-source software - - - Your Immich license key is - - -
- - {'{{LICENSEKEY}}'} - -
- - {/* - To activate your instance, you can click the following button or copy and paste the link below to your - browser - - - - - - - - - - - - https://my.immich.app/link?target=activate_license&licenseKey={'{{LICENSEKEY}}'}&activationKey= - {'{{ACTIVATIONKEY}}'} - - - */} -
- -
- - - - FUTO - - - -
- -
- -
- - - Immich - - - Immich - - -
- - - Immich project is available under GNU AGPL v3 license. - - - - + + + https://my.immich.app/link?target=activate_license&licenseKey={'{{LICENSEKEY}}'}&activationKey= + {'{{ACTIVATIONKEY}}'} + + */} + ); LicenseEmail.PreviewProps = {}; export default LicenseEmail; - -const text = { - margin: '0 0 24px 0', - textAlign: 'left' as const, - fontSize: '16px', - lineHeight: '24px', -}; - -const button: CSS.Properties = { - backgroundColor: 'rgb(66, 80, 175)', - margin: '1em 0', - padding: '0.75em 3em', - color: '#fff', - fontSize: '1em', - fontWeight: 600, - lineHeight: 1.5, - textTransform: 'uppercase', - borderRadius: '9999px', -}; diff --git a/server/src/emails/test.email.tsx b/server/src/emails/test.email.tsx index d419cddf99..ba596ef797 100644 --- a/server/src/emails/test.email.tsx +++ b/server/src/emails/test.email.tsx @@ -1,134 +1,25 @@ -import { - Body, - Button, - Column, - Container, - Head, - Hr, - Html, - Img, - Link, - Preview, - Row, - Section, - Text, -} from '@react-email/components'; -import * as CSS from 'csstype'; +import { Link, Row, Text } from '@react-email/components'; import * as React from 'react'; import { TestEmailProps } from 'src/interfaces/notification.interface'; +import ImmichLayout from './components/immich.layout'; export const TestEmail = ({ baseUrl, displayName }: TestEmailProps) => ( - - - This is a test email from Immich - - -
- Immich + + + Hey {displayName}! + - - Hey {displayName}, this is the test email from your Immich Instance - + This is a test email from your Immich Instance! - - - {baseUrl} - - -
- -
- -
- - - - Immich - - - Immich - - - -
- - - Immich project is available under GNU AGPL v3 license. - - - - + + {baseUrl} + + ); TestEmail.PreviewProps = { - baseUrl: 'https://demo.immich.app/auth/login', + baseUrl: 'https://demo.immich.app', displayName: 'Alan Turing', } as TestEmailProps; export default TestEmail; - -const text = { - margin: '0 0 24px 0', - textAlign: 'left' as const, - fontSize: '18px', - lineHeight: '24px', -}; - -const button: CSS.Properties = { - backgroundColor: 'rgb(66, 80, 175)', - margin: '1em 0', - padding: '0.75em 3em', - color: '#fff', - fontSize: '1em', - fontWeight: 700, - lineHeight: 1.5, - textTransform: 'uppercase', - borderRadius: '9999px', -}; diff --git a/server/src/emails/welcome.email.tsx b/server/src/emails/welcome.email.tsx index a567226ae1..90e55b1f49 100644 --- a/server/src/emails/welcome.email.tsx +++ b/server/src/emails/welcome.email.tsx @@ -1,132 +1,37 @@ -import { - Body, - Button, - Column, - Container, - Head, - Hr, - Html, - Img, - Link, - Preview, - Row, - Section, - Text, -} from '@react-email/components'; -import * as CSS from 'csstype'; +import { Link, Section, Text } from '@react-email/components'; import * as React from 'react'; import { WelcomeEmailProps } from 'src/interfaces/notification.interface'; +import { ImmichButton } from './components/button.component'; +import ImmichLayout from './components/immich.layout'; export const WelcomeEmail = ({ baseUrl, displayName, username, password }: WelcomeEmailProps) => ( - - - You have been invited to a new Immich instance. - - -
- Immich + + + Hey {displayName}! + - - Hey {displayName}! - + A new account has been created for you. - A new account has been created for you. + + Username: {username} + {password && ( + <> +
+ Password: {password} + + )} + - - Username: {username} - {password && ( - <> -
- Password: {password} - - )} - +
+ Login +
- - - To login, open the link in a browser, or click the button below. - - - - - {baseUrl} - - - - - -
- -
- -
- - - - Immich - - - Immich - - - -
- - - Immich project is available under GNU AGPL v3 license. - - - - + + If you cannot click the button use the link below to proceed with first login. +
+ {baseUrl} + + ); WelcomeEmail.PreviewProps = { @@ -137,22 +42,3 @@ WelcomeEmail.PreviewProps = { } as WelcomeEmailProps; export default WelcomeEmail; - -const text = { - margin: '0 0 24px 0', - textAlign: 'left' as const, - fontSize: '18px', - lineHeight: '24px', -}; - -const button: CSS.Properties = { - backgroundColor: 'rgb(66, 80, 175)', - margin: '1em 0', - padding: '0.75em 3em', - color: '#fff', - fontSize: '1em', - fontWeight: 700, - lineHeight: 1.5, - textTransform: 'uppercase', - borderRadius: '9999px', -};