From 6169f5c2e820de8f51b4a1abd11aea095026ef20 Mon Sep 17 00:00:00 2001
From: Pablo Alba <pablo.alba@kaleidos.net>
Date: Thu, 27 Jun 2024 11:00:31 +0200
Subject: [PATCH] :tada: New oops page with login and request access
---
backend/resources/app/email/join-team/en.html | 518 ++++++++++++++++
backend/resources/app/email/join-team/en.subj | 1 +
backend/resources/app/email/join-team/en.txt | 10 +
.../en.html | 528 ++++++++++++++++
.../en.subj | 1 +
.../en.txt | 17 +
.../request-file-access-yourpenpot/en.html | 551 +++++++++++++++++
.../request-file-access-yourpenpot/en.subj | 1 +
.../request-file-access-yourpenpot/en.txt | 30 +
.../app/email/request-file-access/en.html | 568 ++++++++++++++++++
.../app/email/request-file-access/en.subj | 1 +
.../app/email/request-file-access/en.txt | 34 ++
.../app/email/request-team-access/en.html | 526 ++++++++++++++++
.../app/email/request-team-access/en.subj | 1 +
.../app/email/request-team-access/en.txt | 14 +
backend/src/app/email.clj | 75 +++
backend/src/app/migrations.clj | 5 +-
.../0126-add-team-access-request-table.sql | 10 +
backend/src/app/rpc/commands/files.clj | 17 +
backend/src/app/rpc/commands/teams.clj | 268 ++++++++-
backend/src/app/rpc/commands/verify_token.clj | 4 +
backend/test/backend_tests/rpc_team_test.clj | 143 +++++
frontend/src/app/main/data/common.cljs | 15 +
frontend/src/app/main/data/users.cljs | 10 +-
frontend/src/app/main/errors.cljs | 22 +-
frontend/src/app/main/ui.cljs | 5 +-
frontend/src/app/main/ui/auth.cljs | 23 +-
frontend/src/app/main/ui/auth.scss | 20 -
frontend/src/app/main/ui/auth/login.cljs | 13 +-
.../app/main/ui/auth/recovery_request.cljs | 13 +
.../app/main/ui/auth/recovery_request.scss | 7 +
frontend/src/app/main/ui/auth/register.cljs | 37 +-
frontend/src/app/main/ui/auth/register.scss | 20 +
.../src/app/main/ui/components/forms.cljs | 8 +-
frontend/src/app/main/ui/dashboard.cljs | 8 +-
frontend/src/app/main/ui/dashboard/team.cljs | 21 +-
frontend/src/app/main/ui/static.cljs | 283 ++++++++-
frontend/src/app/main/ui/static.scss | 223 +++++++
frontend/src/app/main/ui/viewer.cljs | 5 +-
frontend/src/app/main/ui/viewer/header.cljs | 13 +-
frontend/src/app/main/ui/viewer/login.cljs | 12 +-
frontend/src/app/main/ui/viewer/login.scss | 5 +-
frontend/src/app/util/router.cljs | 6 +
frontend/src/app/util/storage.cljs | 1 +
frontend/translations/en.po | 78 +++
frontend/translations/es.po | 80 +++
46 files changed, 4117 insertions(+), 134 deletions(-)
create mode 100644 backend/resources/app/email/join-team/en.html
create mode 100644 backend/resources/app/email/join-team/en.subj
create mode 100644 backend/resources/app/email/join-team/en.txt
create mode 100644 backend/resources/app/email/request-file-access-yourpenpot-view/en.html
create mode 100644 backend/resources/app/email/request-file-access-yourpenpot-view/en.subj
create mode 100644 backend/resources/app/email/request-file-access-yourpenpot-view/en.txt
create mode 100644 backend/resources/app/email/request-file-access-yourpenpot/en.html
create mode 100644 backend/resources/app/email/request-file-access-yourpenpot/en.subj
create mode 100644 backend/resources/app/email/request-file-access-yourpenpot/en.txt
create mode 100644 backend/resources/app/email/request-file-access/en.html
create mode 100644 backend/resources/app/email/request-file-access/en.subj
create mode 100644 backend/resources/app/email/request-file-access/en.txt
create mode 100644 backend/resources/app/email/request-team-access/en.html
create mode 100644 backend/resources/app/email/request-team-access/en.subj
create mode 100644 backend/resources/app/email/request-team-access/en.txt
create mode 100644 backend/src/app/migrations/sql/0126-add-team-access-request-table.sql
diff --git a/backend/resources/app/email/join-team/en.html b/backend/resources/app/email/join-team/en.html
new file mode 100644
index 000000000..7668ee0fb
--- /dev/null
+++ b/backend/resources/app/email/join-team/en.html
@@ -0,0 +1,518 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+ xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+ <title>
+ </title>
+ <!--[if !mso]><!-- -->
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <!--<![endif]-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <style type="text/css">
+ #outlook a {
+ padding: 0;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ }
+
+ table,
+ td {
+ border-collapse: collapse;
+ mso-table-lspace: 0pt;
+ mso-table-rspace: 0pt;
+ }
+
+ img {
+ border: 0;
+ height: auto;
+ line-height: 100%;
+ outline: none;
+ text-decoration: none;
+ -ms-interpolation-mode: bicubic;
+ }
+
+ p {
+ display: block;
+ margin: 13px 0;
+ }
+ </style>
+ <!--[if mso]>
+ <xml>
+ <o:OfficeDocumentSettings>
+ <o:AllowPNG/>
+ <o:PixelsPerInch>96</o:PixelsPerInch>
+ </o:OfficeDocumentSettings>
+ </xml>
+ <![endif]-->
+ <!--[if lte mso 11]>
+ <style type="text/css">
+ .mj-outlook-group-fix { width:100% !important; }
+ </style>
+ <![endif]-->
+ <!--[if !mso]><!-->
+ <link href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro" rel="stylesheet" type="text/css">
+ <style type="text/css">
+ @import url(https://fonts.googleapis.com/css?family=Source%20Sans%20Pro);
+ </style>
+ <!--<![endif]-->
+ <style type="text/css">
+ @media only screen and (min-width:480px) {
+ .mj-column-per-100 {
+ width: 100% !important;
+ max-width: 100%;
+ }
+
+ .mj-column-px-425 {
+ width: 425px !important;
+ max-width: 425px;
+ }
+ }
+ </style>
+ <style type="text/css">
+ @media only screen and (max-width:480px) {
+ table.mj-full-width-mobile {
+ width: 100% !important;
+ }
+
+ td.mj-full-width-mobile {
+ width: auto !important;
+ }
+ }
+ </style>
+</head>
+
+<body style="background-color:#E5E5E5;">
+ <div style="background-color:#E5E5E5;">
+ <!--[if mso | IE]>
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="left" style="font-size:0px;padding:16px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:collapse;border-spacing:0px;">
+ <tbody>
+ <tr>
+ <td style="width:97px;">
+ <img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
+ style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
+ width="97" />
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:24px;font-weight:600;line-height:150%;text-align:left;color:#000000;">
+ Hello!</div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ As you requested, {{invited-by|abbreviate:25}} has added you to the team “{{
+ team|abbreviate:25}}”.</div>
+ </td>
+ </tr>
+ <tr>
+ <td align="center" vertical-align="middle"
+ style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:separate;line-height:100%;">
+ <tr>
+ <td align="center" bgcolor="#31EFB8" role="presentation"
+ style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#31EFB8;"
+ valign="middle">
+ <a href="{{ public-uri }}/#/dashboard/team/{{team-id}}/projects"
+ style="display:inline-block;background:#31EFB8;color:#1F1F1F;font-family:Source Sans Pro, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"
+ target="_blank"> Go to the Team </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ Enjoy!</div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ The Penpot team.</div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:24px 0 0 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:425px;"
+ >
+ <![endif]-->
+ <div class="mj-column-px-425 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
+ Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <!--[if mso | IE]>
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ >
+ <tr>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://penpot.app/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-uxbox.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://twitter.com/penpotapp" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-twitter.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://github.com/penpot/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-github.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://www.instagram.com/penpot.app/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-instagram.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://tree.taiga.io/project/penpot" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-taiga.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0 0 24px 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
+ Penpot | Made with <3 and Open Source</div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+ <![endif]-->
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/backend/resources/app/email/join-team/en.subj b/backend/resources/app/email/join-team/en.subj
new file mode 100644
index 000000000..296ce140f
--- /dev/null
+++ b/backend/resources/app/email/join-team/en.subj
@@ -0,0 +1 @@
+You have joined {{team}}
diff --git a/backend/resources/app/email/join-team/en.txt b/backend/resources/app/email/join-team/en.txt
new file mode 100644
index 000000000..78cba680e
--- /dev/null
+++ b/backend/resources/app/email/join-team/en.txt
@@ -0,0 +1,10 @@
+Hello!
+
+As you requested, {{invited-by|abbreviate:25}} has added you to the team “{{ team|abbreviate:25}}”.
+
+Go to the team with this link:
+
+{{ public-uri }}/#/dashboard/team/{{team-id}}
+
+Enjoy!
+The Penpot team.
diff --git a/backend/resources/app/email/request-file-access-yourpenpot-view/en.html b/backend/resources/app/email/request-file-access-yourpenpot-view/en.html
new file mode 100644
index 000000000..53e217cf7
--- /dev/null
+++ b/backend/resources/app/email/request-file-access-yourpenpot-view/en.html
@@ -0,0 +1,528 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+ xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+ <title>
+ </title>
+ <!--[if !mso]><!-- -->
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <!--<![endif]-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <style type="text/css">
+ #outlook a {
+ padding: 0;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ }
+
+ table,
+ td {
+ border-collapse: collapse;
+ mso-table-lspace: 0pt;
+ mso-table-rspace: 0pt;
+ }
+
+ img {
+ border: 0;
+ height: auto;
+ line-height: 100%;
+ outline: none;
+ text-decoration: none;
+ -ms-interpolation-mode: bicubic;
+ }
+
+ p {
+ display: block;
+ margin: 13px 0;
+ }
+ </style>
+ <!--[if mso]>
+ <xml>
+ <o:OfficeDocumentSettings>
+ <o:AllowPNG/>
+ <o:PixelsPerInch>96</o:PixelsPerInch>
+ </o:OfficeDocumentSettings>
+ </xml>
+ <![endif]-->
+ <!--[if lte mso 11]>
+ <style type="text/css">
+ .mj-outlook-group-fix { width:100% !important; }
+ </style>
+ <![endif]-->
+ <!--[if !mso]><!-->
+ <link href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro" rel="stylesheet" type="text/css">
+ <style type="text/css">
+ @import url(https://fonts.googleapis.com/css?family=Source%20Sans%20Pro);
+ </style>
+ <!--<![endif]-->
+ <style type="text/css">
+ @media only screen and (min-width:480px) {
+ .mj-column-per-100 {
+ width: 100% !important;
+ max-width: 100%;
+ }
+
+ .mj-column-px-425 {
+ width: 425px !important;
+ max-width: 425px;
+ }
+ }
+ </style>
+ <style type="text/css">
+ @media only screen and (max-width:480px) {
+ table.mj-full-width-mobile {
+ width: 100% !important;
+ }
+
+ td.mj-full-width-mobile {
+ width: auto !important;
+ }
+ }
+ </style>
+</head>
+
+<body style="background-color:#E5E5E5;">
+ <div style="background-color:#E5E5E5;">
+ <!--[if mso | IE]>
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="left" style="font-size:0px;padding:16px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:collapse;border-spacing:0px;">
+ <tbody>
+ <tr>
+ <td style="width:97px;">
+ <img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
+ style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
+ width="97" />
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:24px;font-weight:600;line-height:150%;text-align:left;color:#000000;">
+ Hello!</div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ <p>
+ {{requested-by|abbreviate:25}} ({{requested-by-email}}) wants to have view-only access to the
+ file named “{{file-name|abbreviate:25}}”.
+ </p>
+ <p>
+ Since this file is in your Penpot team, you can provide access by sending a view-only link.
+ This will allow {{requested-by|abbreviate:25}} to view the content without making any changes.
+ </p>
+ <p>To proceed, please click the button below to generate and send the view-only link:</p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td align="center" vertical-align="middle"
+ style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:separate;line-height:100%">
+ <tr>
+ <td align="center" bgcolor="#31EFB8" role="presentation"
+ style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#31EFB8;"
+ valign="middle">
+ <a href="{{ public-uri }}/#/view/{{file-id}}?page-id={{page-id}}§ion=interactions&index=0&share=true"
+ style="display:inline-block;background:#31EFB8;color:#1F1F1F;font-family:Source Sans Pro, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"
+ target="_blank"> Send a View-Only link </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ <p>If you do not wish to grant access at this time, you can simply disregard this email.</p>
+ <p>Thank you</p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ The Penpot team.</div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:24px 0 0 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:425px;"
+ >
+ <![endif]-->
+ <div class="mj-column-px-425 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
+ Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <!--[if mso | IE]>
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ >
+ <tr>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://penpot.app/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-uxbox.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://twitter.com/penpotapp" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-twitter.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://github.com/penpot/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-github.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://www.instagram.com/penpot.app/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-instagram.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://tree.taiga.io/project/penpot" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-taiga.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0 0 24px 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
+ Penpot | Made with <3 and Open Source</div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+ <![endif]-->
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/backend/resources/app/email/request-file-access-yourpenpot-view/en.subj b/backend/resources/app/email/request-file-access-yourpenpot-view/en.subj
new file mode 100644
index 000000000..2e577c3e0
--- /dev/null
+++ b/backend/resources/app/email/request-file-access-yourpenpot-view/en.subj
@@ -0,0 +1 @@
+Request View-Only Access to “{{file-name|abbreviate:25}}”
diff --git a/backend/resources/app/email/request-file-access-yourpenpot-view/en.txt b/backend/resources/app/email/request-file-access-yourpenpot-view/en.txt
new file mode 100644
index 000000000..67eb6cedf
--- /dev/null
+++ b/backend/resources/app/email/request-file-access-yourpenpot-view/en.txt
@@ -0,0 +1,17 @@
+Hello!
+
+{{requested-by|abbreviate:25}} ({{requested-by-email}}) wants to have view-only access to the file named “{{file-name|abbreviate:25}}”.
+
+Since this file is in your Penpot team, you can provide access by sending a view-only link. This will allow {{requested-by|abbreviate:25}} to view the content without making any changes.
+
+To proceed, please click the link below to generate and send the view-only link:
+
+{{ public-uri }}/#/view/{{file-id}}?page-id={{page-id}}§ion=interactions&index=0&share=true
+
+
+
+If you do not wish to grant access at this time, you can simply disregard this email.
+Thank you
+
+
+The Penpot team.
diff --git a/backend/resources/app/email/request-file-access-yourpenpot/en.html b/backend/resources/app/email/request-file-access-yourpenpot/en.html
new file mode 100644
index 000000000..f168168ba
--- /dev/null
+++ b/backend/resources/app/email/request-file-access-yourpenpot/en.html
@@ -0,0 +1,551 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+ xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+ <title>
+ </title>
+ <!--[if !mso]><!-- -->
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <!--<![endif]-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <style type="text/css">
+ #outlook a {
+ padding: 0;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ }
+
+ table,
+ td {
+ border-collapse: collapse;
+ mso-table-lspace: 0pt;
+ mso-table-rspace: 0pt;
+ }
+
+ img {
+ border: 0;
+ height: auto;
+ line-height: 100%;
+ outline: none;
+ text-decoration: none;
+ -ms-interpolation-mode: bicubic;
+ }
+
+ p {
+ display: block;
+ margin: 13px 0;
+ }
+ </style>
+ <!--[if mso]>
+ <xml>
+ <o:OfficeDocumentSettings>
+ <o:AllowPNG/>
+ <o:PixelsPerInch>96</o:PixelsPerInch>
+ </o:OfficeDocumentSettings>
+ </xml>
+ <![endif]-->
+ <!--[if lte mso 11]>
+ <style type="text/css">
+ .mj-outlook-group-fix { width:100% !important; }
+ </style>
+ <![endif]-->
+ <!--[if !mso]><!-->
+ <link href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro" rel="stylesheet" type="text/css">
+ <style type="text/css">
+ @import url(https://fonts.googleapis.com/css?family=Source%20Sans%20Pro);
+ </style>
+ <!--<![endif]-->
+ <style type="text/css">
+ @media only screen and (min-width:480px) {
+ .mj-column-per-100 {
+ width: 100% !important;
+ max-width: 100%;
+ }
+
+ .mj-column-px-425 {
+ width: 425px !important;
+ max-width: 425px;
+ }
+ }
+ </style>
+ <style type="text/css">
+ @media only screen and (max-width:480px) {
+ table.mj-full-width-mobile {
+ width: 100% !important;
+ }
+
+ td.mj-full-width-mobile {
+ width: auto !important;
+ }
+ }
+ </style>
+</head>
+
+<body style="background-color:#E5E5E5;">
+ <div style="background-color:#E5E5E5;">
+ <!--[if mso | IE]>
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="left" style="font-size:0px;padding:16px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:collapse;border-spacing:0px;">
+ <tbody>
+ <tr>
+ <td style="width:97px;">
+ <img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
+ style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
+ width="97" />
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:24px;font-weight:600;line-height:150%;text-align:left;color:#000000;">
+ Hello!</div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ <p>
+ {{requested-by|abbreviate:25}} ({{requested-by-email}}) has requested access to the file named
+ “{{file-name|abbreviate:25}}”.
+ </p>
+ <p>
+ Please note that the file is currently in Your Penpot 's team, so direct access cannot be
+ granted. However, you have two options to provide the requested access:
+ </p>
+ <ul>
+ <li>
+ <p>Move the File to Another Team:</p>
+ <p>You can move the file to another team and then give access to that team, inviting
+ {{requested-by|abbreviate:25}}.</p>
+ </li>
+ </ul>
+ </p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ <ul>
+ <li>
+ <p>Send a View-Only Link:</p>
+ <p>Alternatively, you can create and share a view-only link to the file. This will allow
+ {{requested-by|abbreviate:25}} to view the content without making any changes.</p>
+ <p>Click the button below to generate and send the link:</p>
+ </li>
+ </ul>
+ </p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td align="center" vertical-align="middle"
+ style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:separate;line-height:100%">
+ <tr>
+ <td align="center" bgcolor="#31EFB8" role="presentation"
+ style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#31EFB8;"
+ valign="middle">
+ <a href="{{ public-uri }}/#/view/{{file-id}}?page-id={{page-id}}§ion=interactions&index=0&share=true"
+ style="display:inline-block;background:#31EFB8;color:#1F1F1F;font-family:Source Sans Pro, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"
+ target="_blank"> Send a View-Only link </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ <p>If you do not wish to grant access at this time, you can simply disregard this email.</p>
+ <p>Thank you</p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ The Penpot team.</div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:24px 0 0 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:425px;"
+ >
+ <![endif]-->
+ <div class="mj-column-px-425 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
+ Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <!--[if mso | IE]>
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ >
+ <tr>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://penpot.app/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-uxbox.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://twitter.com/penpotapp" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-twitter.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://github.com/penpot/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-github.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://www.instagram.com/penpot.app/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-instagram.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://tree.taiga.io/project/penpot" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-taiga.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0 0 24px 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
+ Penpot | Made with <3 and Open Source</div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+ <![endif]-->
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/backend/resources/app/email/request-file-access-yourpenpot/en.subj b/backend/resources/app/email/request-file-access-yourpenpot/en.subj
new file mode 100644
index 000000000..d4a90980b
--- /dev/null
+++ b/backend/resources/app/email/request-file-access-yourpenpot/en.subj
@@ -0,0 +1 @@
+Request Access to “{{file-name|abbreviate:25}}”
diff --git a/backend/resources/app/email/request-file-access-yourpenpot/en.txt b/backend/resources/app/email/request-file-access-yourpenpot/en.txt
new file mode 100644
index 000000000..140cb0445
--- /dev/null
+++ b/backend/resources/app/email/request-file-access-yourpenpot/en.txt
@@ -0,0 +1,30 @@
+Hello!
+
+
+Hello!
+
+{{requested-by|abbreviate:25}} ({{requested-by-email}}) has requested access to the file named “{{file-name|abbreviate:25}}”.
+
+Please note that the file is currently in Your Penpot 's team, so direct access cannot be granted. However, you have two options to provide the requested access:
+
+- Move the File to Another Team:
+
+You can move the file to another team and then give access to that team, inviting {{requested-by|abbreviate:25}}.
+
+
+
+- Send a View-Only Link:
+
+Alternatively, you can create and share a view-only link to the file. This will allow {{requested-by|abbreviate:25}} to view the content without making any changes.
+
+Click the link below to generate and send the link:
+
+{{ public-uri }}/#/view/{{file-id}}?page-id={{page-id}}§ion=interactions&index=0&share=true
+
+
+
+If you do not wish to grant access at this time, you can simply disregard this email.
+Thank you
+
+
+The Penpot team.
diff --git a/backend/resources/app/email/request-file-access/en.html b/backend/resources/app/email/request-file-access/en.html
new file mode 100644
index 000000000..23254524b
--- /dev/null
+++ b/backend/resources/app/email/request-file-access/en.html
@@ -0,0 +1,568 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+ xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+ <title>
+ </title>
+ <!--[if !mso]><!-- -->
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <!--<![endif]-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <style type="text/css">
+ #outlook a {
+ padding: 0;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ }
+
+ table,
+ td {
+ border-collapse: collapse;
+ mso-table-lspace: 0pt;
+ mso-table-rspace: 0pt;
+ }
+
+ img {
+ border: 0;
+ height: auto;
+ line-height: 100%;
+ outline: none;
+ text-decoration: none;
+ -ms-interpolation-mode: bicubic;
+ }
+
+ p {
+ display: block;
+ margin: 13px 0;
+ }
+ </style>
+ <!--[if mso]>
+ <xml>
+ <o:OfficeDocumentSettings>
+ <o:AllowPNG/>
+ <o:PixelsPerInch>96</o:PixelsPerInch>
+ </o:OfficeDocumentSettings>
+ </xml>
+ <![endif]-->
+ <!--[if lte mso 11]>
+ <style type="text/css">
+ .mj-outlook-group-fix { width:100% !important; }
+ </style>
+ <![endif]-->
+ <!--[if !mso]><!-->
+ <link href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro" rel="stylesheet" type="text/css">
+ <style type="text/css">
+ @import url(https://fonts.googleapis.com/css?family=Source%20Sans%20Pro);
+ </style>
+ <!--<![endif]-->
+ <style type="text/css">
+ @media only screen and (min-width:480px) {
+ .mj-column-per-100 {
+ width: 100% !important;
+ max-width: 100%;
+ }
+
+ .mj-column-px-425 {
+ width: 425px !important;
+ max-width: 425px;
+ }
+ }
+ </style>
+ <style type="text/css">
+ @media only screen and (max-width:480px) {
+ table.mj-full-width-mobile {
+ width: 100% !important;
+ }
+
+ td.mj-full-width-mobile {
+ width: auto !important;
+ }
+ }
+ </style>
+</head>
+
+<body style="background-color:#E5E5E5;">
+ <div style="background-color:#E5E5E5;">
+ <!--[if mso | IE]>
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="left" style="font-size:0px;padding:16px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:collapse;border-spacing:0px;">
+ <tbody>
+ <tr>
+ <td style="width:97px;">
+ <img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
+ style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
+ width="97" />
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:24px;font-weight:600;line-height:150%;text-align:left;color:#000000;">
+ Hello!</div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ <p>
+ {{requested-by|abbreviate:25}} ({{requested-by-email}}) has requested access to the file named
+ “{{file-name|abbreviate:25}}”.
+ </p>
+ <p>
+ To provide this access, you have the following options:
+ </p>
+ <ul>
+ <li>
+ <p>Give Access to the “{{team-name|abbreviate:25}}” Team:</p>
+ <p>This will automatically include {{requested-by|abbreviate:25}} in the team, so the user
+ can see all the projects and files in it.</p>
+ <p>Click the button below to provide team access:</p>
+ </li>
+ </ul>
+ </p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td align="center" vertical-align="middle"
+ style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:separate;line-height:100%">
+ <tr>
+ <td align="center" bgcolor="#31EFB8" role="presentation"
+ style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#31EFB8;"
+ valign="middle">
+ <a href="{{ public-uri }}/#/dashboard/team/{{team-id}}/members?invite-email={{requested-by-email|urlescape }}"
+ style="display:inline-block;background:#31EFB8;color:#1F1F1F;font-family:Source Sans Pro, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"
+ target="_blank"> Give access to “{{team-name|abbreviate:25}}” Team </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ <ul>
+ <li>
+ <p>Send a View-Only Link:</p>
+ <p>Alternatively, you can create and share a view-only link to the file. This will allow
+ {{requested-by|abbreviate:25}} to view the content without making any changes.</p>
+ <p>Click the button below to generate and send the link:</p>
+ </li>
+ </ul>
+ </p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td align="center" vertical-align="middle"
+ style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:separate;line-height:100%">
+ <tr>
+ <td align="center" bgcolor="#31EFB8" role="presentation"
+ style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#31EFB8;"
+ valign="middle">
+ <a href="{{ public-uri }}/#/view/{{file-id}}?page-id={{page-id}}§ion=interactions&index=0&share=true"
+ style="display:inline-block;background:#31EFB8;color:#1F1F1F;font-family:Source Sans Pro, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"
+ target="_blank"> Send a View-Only link </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ <p>If you do not wish to grant access at this time, you can simply disregard this email.</p>
+ <p>Thank you</p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ The Penpot team.</div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:24px 0 0 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:425px;"
+ >
+ <![endif]-->
+ <div class="mj-column-px-425 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
+ Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <!--[if mso | IE]>
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ >
+ <tr>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://penpot.app/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-uxbox.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://twitter.com/penpotapp" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-twitter.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://github.com/penpot/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-github.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://www.instagram.com/penpot.app/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-instagram.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://tree.taiga.io/project/penpot" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-taiga.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0 0 24px 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
+ Penpot | Made with <3 and Open Source</div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+ <![endif]-->
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/backend/resources/app/email/request-file-access/en.subj b/backend/resources/app/email/request-file-access/en.subj
new file mode 100644
index 000000000..d4a90980b
--- /dev/null
+++ b/backend/resources/app/email/request-file-access/en.subj
@@ -0,0 +1 @@
+Request Access to “{{file-name|abbreviate:25}}”
diff --git a/backend/resources/app/email/request-file-access/en.txt b/backend/resources/app/email/request-file-access/en.txt
new file mode 100644
index 000000000..d327e4780
--- /dev/null
+++ b/backend/resources/app/email/request-file-access/en.txt
@@ -0,0 +1,34 @@
+Hello!
+
+
+Hello!
+
+{{requested-by|abbreviate:25}} ({{requested-by-email}}) has requested access to the file named “{{file-name|abbreviate:25}}”.
+
+To provide this access, you have the following options:
+
+- Give Access to the “{{team-name|abbreviate:25}}” Team:
+
+This will automatically include {{requested-by|abbreviate:25}} in the team, so the user can see all the projects and files in it.
+
+Click the link below to provide team access:
+
+{{ public-uri }}/#/dashboard/team/{{team-id}}/members?invite-email={{requested-by-email|urlescape}}
+
+
+
+- Send a View-Only Link:
+
+Alternatively, you can create and share a view-only link to the file. This will allow {{requested-by|abbreviate:25}} to view the content without making any changes.
+
+Click the link below to generate and send the link:
+
+{{ public-uri }}/#/view/{{file-id}}?page-id={{page-id}}§ion=interactions&index=0&share=true
+
+
+
+If you do not wish to grant access at this time, you can simply disregard this email.
+Thank you
+
+
+The Penpot team.
diff --git a/backend/resources/app/email/request-team-access/en.html b/backend/resources/app/email/request-team-access/en.html
new file mode 100644
index 000000000..103b0870b
--- /dev/null
+++ b/backend/resources/app/email/request-team-access/en.html
@@ -0,0 +1,526 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+ xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+ <title>
+ </title>
+ <!--[if !mso]><!-- -->
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <!--<![endif]-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <style type="text/css">
+ #outlook a {
+ padding: 0;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ }
+
+ table,
+ td {
+ border-collapse: collapse;
+ mso-table-lspace: 0pt;
+ mso-table-rspace: 0pt;
+ }
+
+ img {
+ border: 0;
+ height: auto;
+ line-height: 100%;
+ outline: none;
+ text-decoration: none;
+ -ms-interpolation-mode: bicubic;
+ }
+
+ p {
+ display: block;
+ margin: 13px 0;
+ }
+ </style>
+ <!--[if mso]>
+ <xml>
+ <o:OfficeDocumentSettings>
+ <o:AllowPNG/>
+ <o:PixelsPerInch>96</o:PixelsPerInch>
+ </o:OfficeDocumentSettings>
+ </xml>
+ <![endif]-->
+ <!--[if lte mso 11]>
+ <style type="text/css">
+ .mj-outlook-group-fix { width:100% !important; }
+ </style>
+ <![endif]-->
+ <!--[if !mso]><!-->
+ <link href="https://fonts.googleapis.com/css?family=Source%20Sans%20Pro" rel="stylesheet" type="text/css">
+ <style type="text/css">
+ @import url(https://fonts.googleapis.com/css?family=Source%20Sans%20Pro);
+ </style>
+ <!--<![endif]-->
+ <style type="text/css">
+ @media only screen and (min-width:480px) {
+ .mj-column-per-100 {
+ width: 100% !important;
+ max-width: 100%;
+ }
+
+ .mj-column-px-425 {
+ width: 425px !important;
+ max-width: 425px;
+ }
+ }
+ </style>
+ <style type="text/css">
+ @media only screen and (max-width:480px) {
+ table.mj-full-width-mobile {
+ width: 100% !important;
+ }
+
+ td.mj-full-width-mobile {
+ width: auto !important;
+ }
+ }
+ </style>
+</head>
+
+<body style="background-color:#E5E5E5;">
+ <div style="background-color:#E5E5E5;">
+ <!--[if mso | IE]>
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="left" style="font-size:0px;padding:16px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:collapse;border-spacing:0px;">
+ <tbody>
+ <tr>
+ <td style="width:97px;">
+ <img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
+ style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
+ width="97" />
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:24px;font-weight:600;line-height:150%;text-align:left;color:#000000;">
+ Hello!</div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ <p>
+ {{requested-by|abbreviate:25}} ({{requested-by-email}}) wants to have access to the
+ “{{team-name|abbreviate:25}}” Team.
+ </p>
+ <p>
+ To provide access, please click the button below:
+ </p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td align="center" vertical-align="middle"
+ style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-collapse:separate;line-height:100%;">
+ <tr>
+ <td align="center" bgcolor="#31EFB8" role="presentation"
+ style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#31EFB8;"
+ valign="middle">
+ <a href="{{ public-uri }}/#/dashboard/team/{{team-id}}/members?invite-email={{requested-by-email|urlescape}}"
+ style="display:inline-block;background:#31EFB8;color:#1F1F1F;font-family:Source Sans Pro, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"
+ target="_blank"> Give access to “{{team-name|abbreviate:25}}” </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ <p>If you do not wish to grant access at this time, you can simply disregard this email.</p>
+ <p>Thank you</p>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
+ The Penpot team.</div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:24px 0 0 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:425px;"
+ >
+ <![endif]-->
+ <div class="mj-column-px-425 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
+ Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <!--[if mso | IE]>
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ >
+ <tr>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://penpot.app/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-uxbox.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://twitter.com/penpotapp" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-twitter.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://github.com/penpot/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-github.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://www.instagram.com/penpot.app/" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-instagram.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ <td>
+ <![endif]-->
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="float:none;display:inline-table;">
+ <tr>
+ <td style="padding:0 8px;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+ style="border-radius:3px;width:24px;">
+ <tr>
+ <td style="font-size:0;height:24px;vertical-align:middle;width:24px;">
+ <a href="https://tree.taiga.io/project/penpot" target="_blank">
+ <img height="24" src="{{ public-uri }}/images/email/logo-taiga.png"
+ style="border-radius:3px;display:block;" width="24" />
+ </a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+
+ <table
+ align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
+ >
+ <tr>
+ <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
+ <![endif]-->
+ <div style="margin:0px auto;max-width:600px;">
+ <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+ <tbody>
+ <tr>
+ <td style="direction:ltr;font-size:0px;padding:0 0 24px 0;text-align:center;">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+
+ <tr>
+
+ <td
+ class="" style="vertical-align:top;width:600px;"
+ >
+ <![endif]-->
+ <div class="mj-column-per-100 mj-outlook-group-fix"
+ style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
+ width="100%">
+ <tr>
+ <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+ <div
+ style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
+ Penpot | Made with <3 and Open Source</div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+
+ </tr>
+
+ </table>
+ <![endif]-->
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <!--[if mso | IE]>
+ </td>
+ </tr>
+ </table>
+ <![endif]-->
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/backend/resources/app/email/request-team-access/en.subj b/backend/resources/app/email/request-team-access/en.subj
new file mode 100644
index 000000000..d455c082b
--- /dev/null
+++ b/backend/resources/app/email/request-team-access/en.subj
@@ -0,0 +1 @@
+Request Access to “{{team-name|abbreviate:25}}”
diff --git a/backend/resources/app/email/request-team-access/en.txt b/backend/resources/app/email/request-team-access/en.txt
new file mode 100644
index 000000000..225bc1e26
--- /dev/null
+++ b/backend/resources/app/email/request-team-access/en.txt
@@ -0,0 +1,14 @@
+Hello!
+
+{{requested-by|abbreviate:25}} ({{requested-by-email}}) wants to have access to the “{{team-name|abbreviate:25}}” Team.
+
+To provide access, please click the link below:
+
+{{ public-uri }}/#/dashboard/team/{{team-id}}/members?invite-email={{requested-by-email|urlescape}}
+
+
+If you do not wish to grant access at this time, you can simply disregard this email.
+Thank you
+
+
+The Penpot team.
diff --git a/backend/src/app/email.clj b/backend/src/app/email.clj
index 102b6fea8..4329b8452 100644
--- a/backend/src/app/email.clj
+++ b/backend/src/app/email.clj
@@ -17,6 +17,8 @@
[app.db :as db]
[app.db.sql :as sql]
[app.email.invite-to-team :as-alias email.invite-to-team]
+ [app.email.join-team :as-alias email.join-team]
+ [app.email.request-team-access :as-alias email.request-team-access]
[app.metrics :as mtx]
[app.util.template :as tmpl]
[app.worker :as wrk]
@@ -399,6 +401,79 @@
"Teams member invitation email."
(template-factory ::invite-to-team))
+
+(s/def ::email.join-team/invited-by ::us/string)
+(s/def ::email.join-team/team ::us/string)
+(s/def ::email.join-team/team-id ::us/uuid)
+
+(s/def ::join-team
+ (s/keys :req-un [::email.join-team/invited-by
+ ::email.join-team/team-id
+ ::email.join-team/team]))
+
+(def join-team
+ "Teams member joined after request email."
+ (template-factory ::join-team))
+
+(s/def ::email.request-team-access/requested-by ::us/string)
+(s/def ::email.request-team-access/requested-by-email ::us/string)
+(s/def ::email.request-team-access/team-name ::us/string)
+(s/def ::email.request-team-access/team-id ::us/uuid)
+(s/def ::email.request-team-access/file-name ::us/string)
+(s/def ::email.request-team-access/file-id ::us/uuid)
+(s/def ::email.request-team-access/page-id ::us/uuid)
+
+(s/def ::request-file-access
+ (s/keys :req-un [::email.request-team-access/requested-by
+ ::email.request-team-access/requested-by-email
+ ::email.request-team-access/team-name
+ ::email.request-team-access/team-id
+ ::email.request-team-access/file-name
+ ::email.request-team-access/file-id
+ ::email.request-team-access/page-id]))
+
+(def request-file-access
+ "File access request email."
+ (template-factory ::request-file-access))
+
+
+(s/def ::request-file-access-yourpenpot
+ (s/keys :req-un [::email.request-team-access/requested-by
+ ::email.request-team-access/requested-by-email
+ ::email.request-team-access/team-name
+ ::email.request-team-access/team-id
+ ::email.request-team-access/file-name
+ ::email.request-team-access/file-id
+ ::email.request-team-access/page-id]))
+
+(def request-file-access-yourpenpot
+ "File access on Your Penpot request email."
+ (template-factory ::request-file-access-yourpenpot))
+
+(s/def ::request-file-access-yourpenpot-view
+ (s/keys :req-un [::email.request-team-access/requested-by
+ ::email.request-team-access/requested-by-email
+ ::email.request-team-access/team-name
+ ::email.request-team-access/team-id
+ ::email.request-team-access/file-name
+ ::email.request-team-access/file-id
+ ::email.request-team-access/page-id]))
+
+(def request-file-access-yourpenpot-view
+ "File access on Your Penpot view mode request email."
+ (template-factory ::request-file-access-yourpenpot-view))
+
+(s/def ::request-team-access
+ (s/keys :req-un [::email.request-team-access/requested-by
+ ::email.request-team-access/requested-by-email
+ ::email.request-team-access/team-name
+ ::email.request-team-access/team-id]))
+
+(def request-team-access
+ "Team access request email."
+ (template-factory ::request-team-access))
+
+
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; BOUNCE/COMPLAINS HELPERS
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
diff --git a/backend/src/app/migrations.clj b/backend/src/app/migrations.clj
index 0efd24613..a66110fb5 100644
--- a/backend/src/app/migrations.clj
+++ b/backend/src/app/migrations.clj
@@ -397,7 +397,10 @@
:fn (mg/resource "app/migrations/sql/0124-mod-profile-table.sql")}
{:name "0125-mod-file-table"
- :fn (mg/resource "app/migrations/sql/0125-mod-file-table.sql")}])
+ :fn (mg/resource "app/migrations/sql/0125-mod-file-table.sql")}
+
+ {:name "0126-add-team-access-request-table"
+ :fn (mg/resource "app/migrations/sql/0126-add-team-access-request-table.sql")}])
(defn apply-migrations!
[pool name migrations]
diff --git a/backend/src/app/migrations/sql/0126-add-team-access-request-table.sql b/backend/src/app/migrations/sql/0126-add-team-access-request-table.sql
new file mode 100644
index 000000000..548003adb
--- /dev/null
+++ b/backend/src/app/migrations/sql/0126-add-team-access-request-table.sql
@@ -0,0 +1,10 @@
+CREATE TABLE team_access_request (
+ id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
+ team_id uuid NOT NULL REFERENCES team(id) ON DELETE CASCADE DEFERRABLE,
+ requester_id uuid NULL REFERENCES profile(id) ON DELETE CASCADE DEFERRABLE,
+ valid_until timestamptz NOT NULL,
+ auto_join_until timestamptz NOT NULL,
+ created_at timestamptz NOT NULL DEFAULT now(),
+ updated_at timestamptz NOT NULL DEFAULT now(),
+ UNIQUE (team_id, requester_id)
+);
diff --git a/backend/src/app/rpc/commands/files.clj b/backend/src/app/rpc/commands/files.clj
index 336c4aeb2..721068d05 100644
--- a/backend/src/app/rpc/commands/files.clj
+++ b/backend/src/app/rpc/commands/files.clj
@@ -729,6 +729,23 @@
[cfg {:keys [::rpc/profile-id] :as params}]
(db/tx-run! cfg get-file-summary (assoc params :profile-id profile-id)))
+
+;; --- COMMAND QUERY: get-file-info
+
+(defn- get-file-info
+ [{:keys [::db/conn] :as cfg} {:keys [id] :as params}]
+ (db/get* conn :file
+ {:id id}
+ {::sql/columns [:id]}))
+
+(sv/defmethod ::get-file-info
+ "Retrieve minimal file info by its ID."
+ {::rpc/auth false
+ ::doc/added "2.2.0"
+ ::sm/params schema:get-file}
+ [cfg params]
+ (db/tx-run! cfg get-file-info params))
+
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; MUTATION COMMANDS
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
diff --git a/backend/src/app/rpc/commands/teams.clj b/backend/src/app/rpc/commands/teams.clj
index 553257560..2760e73be 100644
--- a/backend/src/app/rpc/commands/teams.clj
+++ b/backend/src/app/rpc/commands/teams.clj
@@ -15,6 +15,7 @@
[app.common.uuid :as uuid]
[app.config :as cf]
[app.db :as db]
+ [app.db.sql :as sql]
[app.email :as eml]
[app.loggers.audit :as audit]
[app.main :as-alias main]
@@ -28,6 +29,7 @@
[app.setup :as-alias setup]
[app.storage :as sto]
[app.tokens :as tokens]
+ [app.util.blob :as blob]
[app.util.services :as sv]
[app.util.time :as dt]
[app.worker :as wrk]
@@ -80,6 +82,37 @@
(cond-> row
(some? features) (assoc :features (db/decode-pgarray features #{}))))
+
+
+(defn- check-valid-email-muted
+ "Check if the member's email is part of the global bounce report."
+ [conn member]
+ (let [email (profile/clean-email (:email member))]
+ (when (and member (not (eml/allow-send-emails? conn member)))
+ (ex/raise :type :validation
+ :code :member-is-muted
+ :email email
+ :hint "the profile has reported repeatedly as spam or has bounces"))))
+
+(defn- check-valid-email-bounce
+ "Check if the email is part of the global complain report"
+ [conn email show?]
+ (when (eml/has-bounce-reports? conn email)
+ (ex/raise :type :restriction
+ :code :email-has-permanent-bounces
+ :email (if show? email "private")
+ :hint "this email has been repeatedly reported as bounce")))
+
+(defn- check-valid-email-spam
+ "Check if the member email is part of the global complain report"
+ [conn email show?]
+ (when (eml/has-complaint-reports? conn email)
+ (ex/raise :type :restriction
+ :code :email-has-complaints
+ :email (if show? email "private")
+ :hint "this email has been repeatedly reported as spam")))
+
+
;; --- Query: Teams
(declare get-teams)
@@ -333,6 +366,24 @@
(check-read-permissions! conn profile-id team-id)
(get-team-invitations conn team-id)))
+
+;; --- COMMAND QUERY: get-team-info
+
+(defn- get-team-info
+ [{:keys [::db/conn] :as cfg} {:keys [id] :as params}]
+ (db/get* conn :team
+ {:id id}
+ {::sql/columns [:id :is-default]}))
+
+(sv/defmethod ::get-team-info
+ "Retrieve minimal team info by its ID."
+ {::rpc/auth false
+ ::doc/added "2.2.0"
+ ::sm/params schema:get-team}
+ [cfg params]
+ (db/tx-run! cfg get-team-info params))
+
+
;; --- Mutation: Create Team
(declare create-team)
@@ -727,25 +778,10 @@
(let [email (profile/clean-email email)
member (profile/get-profile-by-email conn email)]
- (when (and member (not (eml/allow-send-emails? conn member)))
- (ex/raise :type :validation
- :code :member-is-muted
- :email email
- :hint "the profile has reported repeatedly as spam or has bounces"))
+ (check-valid-email-muted conn member)
+ (check-valid-email-bounce conn email true)
+ (check-valid-email-spam conn email true)
- ;; Secondly check if the invited member email is part of the global bounce report.
- (when (eml/has-bounce-reports? conn email)
- (ex/raise :type :restriction
- :code :email-has-permanent-bounces
- :email email
- :hint "the email you invite has been repeatedly reported as bounce"))
-
- ;; Secondly check if the invited member email is part of the global complain report.
- (when (eml/has-complaint-reports? conn email)
- (ex/raise :type :restriction
- :code :email-has-complaints
- :email email
- :hint "the email you invite has been repeatedly reported as spam"))
;; When we have email verification disabled and invitation user is
;; already present in the database, we proceed to add it to the
@@ -814,6 +850,58 @@
itoken))))
+(defn- add-user-to-team
+ [conn profile team email role]
+
+ (let [team-id (:id team)
+ member (db/get* conn :profile
+ {:email (str/lower email)}
+ {::sql/columns [:id :email]})
+ params (merge
+ {:team-id team-id
+ :profile-id (:id member)}
+ (role->params role))]
+
+ ;; Do not allow blocked users to join teams.
+ (when (:is-blocked member)
+ (ex/raise :type :restriction
+ :code :profile-blocked))
+
+ (quotes/check-quote! conn
+ {::quotes/id ::quotes/profiles-per-team
+ ::quotes/profile-id (:id member)
+ ::quotes/team-id team-id})
+
+ ;; Insert the member to the team
+ (db/insert! conn :team-profile-rel params {::db/on-conflict-do-nothing? true})
+
+ ;; Delete any request
+ (db/delete! conn :team-access-request
+ {:team-id team-id :requester-id (:id member)})
+
+ ;; Delete any invitation
+ (db/delete! conn :team-invitation
+ {:team-id team-id :email-to (:email member)})
+
+ (eml/send! {::eml/conn conn
+ ::eml/factory eml/join-team
+ :public-uri (cf/get :public-uri)
+ :to email
+ :invited-by (:fullname profile)
+ :team (:name team)
+ :team-id (:id team)})))
+
+(def sql:valid-requests-email
+ "SELECT p.email
+ FROM team_access_request AS tr
+ JOIN profile AS p ON (tr.requester_id = p.id)
+ WHERE tr.team_id = ?
+ AND tr.auto_join_until > now()")
+
+(defn- get-valid-requests-email
+ [conn team-id]
+ (db/exec! conn [sql:valid-requests-email team-id]))
+
(def ^:private schema:create-team-invitations
[:map {:title "create-team-invitations"}
[:team-id ::sm/uuid]
@@ -846,13 +934,14 @@
(ex/raise :type :validation
:code :insufficient-permissions))
- ;; First check if the current profile is allowed to send emails.
- (when-not (eml/allow-send-emails? conn profile)
- (ex/raise :type :validation
- :code :profile-is-muted
- :hint "looks like the profile has reported repeatedly as spam or has permanent bounces"))
+ ;; Check if the current profile is allowed to send emails.
+ (check-valid-email-muted conn profile)
- (let [cfg (assoc cfg ::db/conn conn)
+
+ (let [requested (into #{} (map :email) (get-valid-requests-email conn team-id))
+ emails-to-add (filter #(contains? requested %) emails)
+ emails (remove #(contains? requested %) emails)
+ cfg (assoc cfg ::db/conn conn)
members (->> (db/exec! conn [sql:team-members team-id])
(into #{} (map :email)))
@@ -868,6 +957,10 @@
(assoc :role role))))
(keep (partial create-invitation cfg)))
emails)]
+ ;; For requested invitations, do not send invitation emails, add the user directly to the team
+ (doseq [email emails-to-add]
+ (add-user-to-team conn profile team email role))
+
(with-meta {:total (count invitations)
:invitations invitations}
{::audit/props {:invitations (count invitations)}})))))
@@ -1006,3 +1099,130 @@
:email-to (profile/clean-email email)}
{::db/return-keys true})]
(rph/wrap nil {::audit/props {:invitation-id (:id invitation)}})))))
+
+
+
+
+;; --- Mutation: Request Team Invitation
+
+(def sql:upsert-team-access-request
+ "INSERT INTO team_access_request (id, team_id, requester_id, valid_until, auto_join_until)
+ VALUES (?, ?, ?, ?, ?)
+ ON conflict(id)
+ DO UPDATE SET valid_until = ?, auto_join_until = ?, updated_at = now()
+ RETURNING *")
+
+
+(def sql:team-access-request
+ "SELECT id, (valid_until < now()) AS expired
+ FROM team_access_request
+ WHERE team_id = ?
+ AND requester_id = ?")
+
+(def sql:team-owner
+ "SELECT profile_id
+ FROM team_profile_rel
+ WHERE team_id = ?
+ AND is_owner = true")
+
+
+(defn- create-team-access-request
+ [{:keys [::db/conn] :as cfg} {:keys [team requester team-owner file is-viewer] :as params}]
+ (let [old-request (->> (db/exec-one! conn [sql:team-access-request (:id team) (:id requester)])
+ (decode-row))]
+ (when (false? (:expired old-request))
+ (ex/raise :type :validation
+ :code :request-already-sent
+ :hint "you have already made a request to join this team less than 24 hours ago"))
+
+ (let [id (or (:id old-request) (uuid/next))
+ valid_until (dt/in-future "24h")
+ auto_join_until (dt/in-future "168h") ;; 7 days
+ request (db/exec-one! conn [sql:upsert-team-access-request
+ id (:id team) (:id requester) valid_until auto_join_until
+ valid_until auto_join_until])
+ factory (cond
+ (and (some? file) (:is-default team) is-viewer)
+ eml/request-file-access-yourpenpot-view
+ (and (some? file) (:is-default team))
+ eml/request-file-access-yourpenpot
+ (some? file)
+ eml/request-file-access
+ :else
+ eml/request-team-access)
+ page-id (when (some? file)
+ (-> file :data :pages first))]
+
+ ;; TODO needs audit?
+
+ (eml/send! {::eml/conn conn
+ ::eml/factory factory
+ :public-uri (cf/get :public-uri)
+ :to (:email team-owner)
+ :requested-by (:fullname requester)
+ :requested-by-email (:email requester)
+ :team-name (:name team)
+ :team-id (:id team)
+ :file-name (:name file)
+ :file-id (:id file)
+ :page-id page-id})
+
+ request)))
+
+
+(def ^:private schema:create-team-access-request
+ [:and
+ [:map {:title "create-team-access-request"}
+ [:file-id {:optional true} ::sm/uuid]
+ [:team-id {:optional true} ::sm/uuid]
+ [:is-viewer {:optional true} :boolean]]
+
+ [:fn (fn [params]
+ (or (contains? params :file-id)
+ (contains? params :team-id)))]])
+
+
+(sv/defmethod ::create-team-access-request
+ "A rpc call that allow to request for an invitations to join the team."
+ {::doc/added "2.2.0"
+ ::sm/params schema:create-team-access-request}
+ [cfg {:keys [::rpc/profile-id file-id team-id is-viewer] :as params}]
+
+ (db/tx-run! cfg
+ (fn [{:keys [::db/conn] :as cfg}]
+
+ (let [requester (db/get-by-id conn :profile profile-id)
+ team-id (if (some? team-id)
+ team-id
+ (:id (get-team-for-file conn file-id)))
+ team (db/get-by-id conn :team team-id)
+ owner-id (->> (db/exec! conn [sql:team-owner (:id team)])
+ (map decode-row)
+ (first)
+ :profile-id)
+ team-owner (db/get-by-id conn :profile owner-id)
+ file (when (some? file-id)
+ (db/get* conn :file
+ {:id file-id}
+ {::sql/columns [:id :name :data]}))
+ file (when (some? file)
+ (assoc file :data (blob/decode (:data file))))]
+
+ ;;TODO needs quotes?
+
+ (when (or (nil? requester) (nil? team) (nil? team-owner) (and (some? file-id) (nil? file)))
+ (ex/raise :type :validation
+ :code :invalid-parameters))
+
+ ;; Check that the requester is not muted
+ (check-valid-email-muted conn requester)
+
+ ;; Check that the owner is not marked as bounce nor spam
+ (check-valid-email-bounce conn (:email team-owner) false)
+ (check-valid-email-spam conn (:email team-owner) true)
+
+ (let [request (create-team-access-request
+ cfg {:team team :requester requester :team-owner team-owner :file file :is-viewer is-viewer})]
+ (when request
+ (with-meta {:request request}
+ {::audit/props {:request 1}})))))))
diff --git a/backend/src/app/rpc/commands/verify_token.clj b/backend/src/app/rpc/commands/verify_token.clj
index 0e4f3c89f..95f266d6e 100644
--- a/backend/src/app/rpc/commands/verify_token.clj
+++ b/backend/src/app/rpc/commands/verify_token.clj
@@ -127,6 +127,10 @@
(db/delete! conn :team-invitation
{:team-id team-id :email-to member-email})
+ ;; Delete any request
+ (db/delete! conn :team-access-request
+ {:team-id team-id :requester-id (:id member)})
+
(assoc member :is-active true)))
(def schema:team-invitation-claims
diff --git a/backend/test/backend_tests/rpc_team_test.clj b/backend/test/backend_tests/rpc_team_test.clj
index 8b4ccda3f..0cdce4995 100644
--- a/backend/test/backend_tests/rpc_team_test.clj
+++ b/backend/test/backend_tests/rpc_team_test.clj
@@ -467,3 +467,146 @@
(let [result (th/run-task! :objects-gc {:min-age 0})]
(t/is (= 5 (:processed result))))))
+
+(t/deftest create-team-access-request
+ (with-mocks [mock {:target 'app.email/send! :return nil}]
+ (let [owner (th/create-profile* 1 {:is-active true :email "owner@bar.com"})
+ requester (th/create-profile* 3 {:is-active true :email "requester@bar.com"})
+ team (th/create-team* 1 {:profile-id (:id owner)})
+ proj (th/create-project* 1 {:profile-id (:id owner)
+ :team-id (:id team)})
+ file (th/create-file* 1 {:profile-id (:id owner)
+ :project-id (:id proj)})
+
+ data {::th/type :create-team-access-request
+ ::rpc/profile-id (:id requester)
+ :file-id (:id file)}]
+
+ ;; request success
+ (let [out (th/command! data)
+ ;; retrieve the value from the database and check its content
+ request (db/exec-one!
+ th/*pool*
+ ["select count(*) as num from team_access_request where team_id = ? and requester_id = ?"
+ (:id team) (:id requester)])]
+
+ (t/is (th/success? out))
+ (t/is (= 1 (:call-count @mock)))
+ (t/is (= 1 (:num request))))
+
+ ;; request again fails
+ (th/reset-mock! mock)
+ (let [out (th/command! data)
+ edata (-> out :error ex-data)]
+ (t/is (not (th/success? out)))
+ (t/is (= 0 (:call-count @mock)))
+
+ (t/is (= :validation (:type edata)))
+ (t/is (= :request-already-sent (:code edata))))
+
+
+ ;; request again when is expired success
+ (th/reset-mock! mock)
+
+ (db/exec-one!
+ th/*pool*
+ ["update team_access_request set valid_until = ? where team_id = ? and requester_id = ?"
+ (dt/in-past "1h") (:id team) (:id requester)])
+
+ (t/is (th/success? (th/command! data)))
+ (t/is (= 1 (:call-count @mock))))))
+
+
+(t/deftest create-team-access-request-owner-muted
+ (with-mocks [mock {:target 'app.email/send! :return nil}]
+ (let [owner (th/create-profile* 1 {:is-active true :is-muted true :email "owner@bar.com"})
+ requester (th/create-profile* 2 {:is-active true :email "requester@bar.com"})
+ team (th/create-team* 1 {:profile-id (:id owner)})
+ proj (th/create-project* 1 {:profile-id (:id owner)
+ :team-id (:id team)})
+ file (th/create-file* 1 {:profile-id (:id owner)
+ :project-id (:id proj)})
+
+ data {::th/type :create-team-access-request
+ ::rpc/profile-id (:id requester)
+ :file-id (:id file)}]
+
+ ;; request to team with owner muted should success
+ (t/is (th/success? (th/command! data)))
+ (t/is (= 1 (:call-count @mock))))))
+
+
+(t/deftest create-team-access-request-requester-muted
+ (with-mocks [mock {:target 'app.email/send! :return nil}]
+ (let [owner (th/create-profile* 1 {:is-active true :email "owner@bar.com"})
+ requester (th/create-profile* 2 {:is-active true :is-muted true :email "requester@bar.com"})
+ team (th/create-team* 1 {:profile-id (:id owner)})
+ proj (th/create-project* 1 {:profile-id (:id owner)
+ :team-id (:id team)})
+ file (th/create-file* 1 {:profile-id (:id owner)
+ :project-id (:id proj)})
+
+ data {::th/type :create-team-access-request
+ ::rpc/profile-id (:id requester)
+ :file-id (:id file)}
+
+ out (th/command! data)
+ edata (-> out :error ex-data)]
+
+ ;; request with requester muted should fail
+ (t/is (not (th/success? out)))
+ (t/is (= 0 (:call-count @mock)))
+
+ (t/is (= :validation (:type edata)))
+ (t/is (= :member-is-muted (:code edata)))
+ (t/is (= (:email requester) (:email edata))))))
+
+
+(t/deftest create-team-access-request-owner-bounce
+ (with-mocks [mock {:target 'app.email/send! :return nil}]
+ (let [owner (th/create-profile* 1 {:is-active true :email "owner@bar.com"})
+ requester (th/create-profile* 2 {:is-active true :email "requester@bar.com"})
+ team (th/create-team* 1 {:profile-id (:id owner)})
+ proj (th/create-project* 1 {:profile-id (:id owner)
+ :team-id (:id team)})
+ file (th/create-file* 1 {:profile-id (:id owner)
+ :project-id (:id proj)})
+
+ pool (:app.db/pool th/*system*)
+ data {::th/type :create-team-access-request
+ ::rpc/profile-id (:id requester)
+ :file-id (:id file)}]
+
+
+ (th/create-global-complaint-for pool {:type :bounce :email "owner@bar.com"})
+ (let [out (th/command! data)
+ edata (-> out :error ex-data)]
+
+ ;; request with owner bounce should fail
+ (t/is (not (th/success? out)))
+ (t/is (= 0 (:call-count @mock)))
+
+ (t/is (= :restriction (:type edata)))
+ (t/is (= :email-has-permanent-bounces (:code edata)))
+ (t/is (= "private" (:email edata)))))))
+
+(t/deftest create-team-access-request-requester-bounce
+ (with-mocks [mock {:target 'app.email/send! :return nil}]
+ (let [owner (th/create-profile* 1 {:is-active true :email "owner@bar.com"})
+ requester (th/create-profile* 2 {:is-active true :email "requester@bar.com"})
+ team (th/create-team* 1 {:profile-id (:id owner)})
+ proj (th/create-project* 1 {:profile-id (:id owner)
+ :team-id (:id team)})
+ file (th/create-file* 1 {:profile-id (:id owner)
+ :project-id (:id proj)})
+
+ pool (:app.db/pool th/*system*)
+ data {::th/type :create-team-access-request
+ ::rpc/profile-id (:id requester)
+ :file-id (:id file)}]
+
+ ;; request with requester bounce should success
+ (th/create-global-complaint-for pool {:type :bounce :email "requester@bar.com"})
+ (t/is (th/success? (th/command! data)))
+ (t/is (= 1 (:call-count @mock))))))
+
diff --git a/frontend/src/app/main/data/common.cljs b/frontend/src/app/main/data/common.cljs
index 201193b70..a9b219f78 100644
--- a/frontend/src/app/main/data/common.cljs
+++ b/frontend/src/app/main/data/common.cljs
@@ -155,3 +155,18 @@
:files files
:binary? binary?}))))))))
+;;;;;;;;;;;;;;;;;;;;;;
+;; Team Request
+;;;;;;;;;;;;;;;;;;;;;;
+
+(defn create-team-access-request
+ [params]
+ (ptk/reify ::create-team-access-request
+ ptk/WatchEvent
+ (watch [_ _ _]
+ (let [{:keys [on-success on-error]
+ :or {on-success identity
+ on-error rx/throw}} (meta params)]
+ (->> (rp/cmd! :create-team-access-request params)
+ (rx/tap on-success)
+ (rx/catch on-error))))))
diff --git a/frontend/src/app/main/data/users.cljs b/frontend/src/app/main/data/users.cljs
index ac49a8fbd..1a61a0644 100644
--- a/frontend/src/app/main/data/users.cljs
+++ b/frontend/src/app/main/data/users.cljs
@@ -153,13 +153,8 @@
accepting invitation, or third party auth signup or singin."
[profile]
(letfn [(get-redirect-event []
- (let [team-id (get-current-team-id profile)
- redirect-url (:redirect-url @storage)]
- (if (some? redirect-url)
- (do
- (swap! storage dissoc :redirect-url)
- (.replace js/location redirect-url))
- (rt/nav' :dashboard-projects {:team-id team-id}))))]
+ (let [team-id (get-current-team-id profile)]
+ (rt/nav' :dashboard-projects {:team-id team-id})))]
(ptk/reify ::logged-in
ev/Event
@@ -316,7 +311,6 @@
ptk/EffectEvent
(effect [_ _ _]
;; We prefer to keek some stuff in the storage like the current-team-id and the profile
- (swap! storage dissoc :redirect-url)
(set-current-team! nil)))))
(defn logout
diff --git a/frontend/src/app/main/errors.cljs b/frontend/src/app/main/errors.cljs
index 998d81c48..38fd01c22 100644
--- a/frontend/src/app/main/errors.cljs
+++ b/frontend/src/app/main/errors.cljs
@@ -17,7 +17,6 @@
[app.util.globals :as glob]
[app.util.i18n :refer [tr]]
[app.util.router :as rt]
- [app.util.storage :refer [storage]]
[app.util.timers :as ts]
[cuerdas.core :as str]
[potok.v2.core :as ptk]))
@@ -96,16 +95,23 @@
(print-trace! error)
(print-data! error))))
-;; We receive a explicit authentication error; this explicitly clears
+;; We receive a explicit authentication error;
+;; If the uri is for workspace, dashboard or view assign the
+;; exception for the 'Oops' page. Otherwise this explicitly clears
;; all profile data and redirect the user to the login page. This is
;; here and not in app.main.errors because of circular dependency.
(defmethod ptk/handle-error :authentication
- [_]
- (let [msg (tr "errors.auth.unable-to-login")
- uri (. (. js/document -location) -href)]
- (st/emit! (du/logout {:capture-redirect true}))
- (ts/schedule 500 #(st/emit! (ntf/warn msg)))
- (ts/schedule 1000 #(swap! storage assoc :redirect-url uri))))
+ [e]
+ (let [msg (tr "errors.auth.unable-to-login")
+ uri (.-href glob/location)
+ show-oops? (or (str/includes? uri "workspace")
+ (str/includes? uri "dashboard")
+ (str/includes? uri "view"))]
+ (if show-oops?
+ (st/async-emit! (rt/assign-exception e))
+ (do
+ (st/emit! (du/logout {:capture-redirect true}))
+ (ts/schedule 500 #(st/emit! (ntf/warn msg)))))))
;; Error that happens on an active business model validation does not
;; passes an validation (example: profile can't leave a team). From
diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs
index 2e18214e5..30668501f 100644
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@@ -133,7 +133,7 @@
[:& dashboard-page {:route route :profile profile}]]
:viewer
(let [{:keys [query-params path-params]} route
- {:keys [index share-id section page-id interactions-mode frame-id]
+ {:keys [index share-id section page-id interactions-mode frame-id share]
:or {section :interactions interactions-mode :show-on-click}} query-params
{:keys [file-id]} path-params]
[:? {}
@@ -154,7 +154,8 @@
:hide false
:show true
:show-on-click false)
- :frame-id frame-id}])])
+ :frame-id frame-id
+ :share share}])])
:workspace
(let [project-id (some-> params :path :project-id uuid)
diff --git a/frontend/src/app/main/ui/auth.cljs b/frontend/src/app/main/ui/auth.cljs
index 4d24070cc..42db83794 100644
--- a/frontend/src/app/main/ui/auth.cljs
+++ b/frontend/src/app/main/ui/auth.cljs
@@ -14,31 +14,12 @@
[app.main.ui.auth.login :refer [login-page]]
[app.main.ui.auth.recovery :refer [recovery-page]]
[app.main.ui.auth.recovery-request :refer [recovery-request-page]]
- [app.main.ui.auth.register :refer [register-page register-success-page register-validate-page]]
+ [app.main.ui.auth.register :refer [register-page register-success-page register-validate-page terms-register]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
-(mf/defc terms-login
- []
- (let [show-all? (and cf/terms-of-service-uri cf/privacy-policy-uri)
- show-terms? (some? cf/terms-of-service-uri)
- show-privacy? (some? cf/privacy-policy-uri)]
-
- (when show-all?
- [:div {:class (stl/css :terms-login)}
- (when show-terms?
- [:a {:href cf/terms-of-service-uri :target "_blank" :class (stl/css :auth-link)}
- (tr "auth.terms-of-service")])
-
- (when show-all?
- [:span {:class (stl/css :and-text)}
- (dm/str " " (tr "labels.and") " ")])
-
- (when show-privacy?
- [:a {:href cf/privacy-policy-uri :target "_blank" :class (stl/css :auth-link)}
- (tr "auth.privacy-policy")])])))
(mf/defc auth
{::mf/props :obj}
@@ -90,4 +71,4 @@
[:& recovery-page {:params params}])
(when (= section :auth-register)
- [:& terms-login])]]))
+ [:& terms-register])]]))
diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss
index 390d4083b..edcb34520 100644
--- a/frontend/src/app/main/ui/auth.scss
+++ b/frontend/src/app/main/ui/auth.scss
@@ -103,23 +103,3 @@
fill: var(--main-icon-foreground);
}
}
-
-.terms-login {
- @include bodySmallTypography;
- display: flex;
- gap: $s-4;
- justify-content: center;
- width: 100%;
-}
-
-.and-text {
- border-bottom: $s-1 solid transparent;
- color: var(--title-foreground-color);
-}
-
-.auth-link {
- color: var(--link-foreground-color);
- &:hover {
- text-decoration: underline;
- }
-}
diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs
index 2881458d8..0d0b587a9 100644
--- a/frontend/src/app/main/ui/auth/login.cljs
+++ b/frontend/src/app/main/ui/auth/login.cljs
@@ -71,7 +71,7 @@
[:string {:min 1}]]])
(mf/defc login-form
- [{:keys [params on-success-callback origin] :as props}]
+ [{:keys [params on-success-callback on-recovery-request origin] :as props}]
(let [initial (mf/with-memo [params] params)
error (mf/use-state false)
form (fm/use-form :schema schema:login-form
@@ -139,9 +139,12 @@
:on-success on-success})]
(st/emit! (du/login-with-ldap params)))))
- on-recovery-request
+ default-recovery-req
(mf/use-fn
- #(st/emit! (rt/nav :auth-recovery-request)))]
+ #(st/emit! (rt/nav :auth-recovery-request)))
+
+ on-recovery-request (or on-recovery-request
+ default-recovery-req)]
[:*
(when-let [message @error]
@@ -243,7 +246,7 @@
(tr "auth.login-with-oidc-submit")])))
(mf/defc login-methods
- [{:keys [params on-success-callback origin] :as props}]
+ [{:keys [params on-success-callback on-recovery-request origin] :as props}]
[:*
(when show-alt-login-buttons?
[:*
@@ -257,7 +260,7 @@
(when (or (contains? cf/flags :login)
(contains? cf/flags :login-with-password)
(contains? cf/flags :login-with-ldap))
- [:& login-form {:params params :on-success-callback on-success-callback :origin origin}])])
+ [:& login-form {:params params :on-success-callback on-success-callback :on-recovery-request on-recovery-request :origin origin}])])
(mf/defc login-page
[{:keys [params] :as props}]
diff --git a/frontend/src/app/main/ui/auth/recovery_request.cljs b/frontend/src/app/main/ui/auth/recovery_request.cljs
index 55b6fd28f..afb240647 100644
--- a/frontend/src/app/main/ui/auth/recovery_request.cljs
+++ b/frontend/src/app/main/ui/auth/recovery_request.cljs
@@ -102,3 +102,16 @@
:class (stl/css :go-back-link)
:data-testid "go-back-link"}
(tr "labels.go-back")]]]))
+
+
+(mf/defc recovery-sent-page
+ {::mf/props :obj}
+ [{:keys [email]}]
+ [:div {:class (stl/css :auth-form-wrapper :register-success)}
+ [:div {:class (stl/css :auth-title-wrapper)}
+ [:h2 {:class (stl/css :auth-title)}
+ (tr "auth.check-mail")]
+ [:div {:class (stl/css :notification-text)} (tr "not-found.login.sent-recovery")]]
+ [:div {:class (stl/css :notification-text-email)} email]
+ [:div {:class (stl/css :notification-text)} (tr "not-found.login.sent-recovery-check")]])
+
diff --git a/frontend/src/app/main/ui/auth/recovery_request.scss b/frontend/src/app/main/ui/auth/recovery_request.scss
index e78e21b6d..8b384e59d 100644
--- a/frontend/src/app/main/ui/auth/recovery_request.scss
+++ b/frontend/src/app/main/ui/auth/recovery_request.scss
@@ -10,3 +10,10 @@
.fields-row {
margin-bottom: $s-8;
}
+
+.notification-text-email {
+ @include medTitleTipography;
+ font-size: $fs-20;
+ color: var(--register-confirmation-color);
+ margin-inline: $s-36;
+}
diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs
index 0d0ed0ecb..f4788b628 100644
--- a/frontend/src/app/main/ui/auth/register.cljs
+++ b/frontend/src/app/main/ui/auth/register.cljs
@@ -7,6 +7,7 @@
(ns app.main.ui.auth.register
(:require-macros [app.main.style :as stl])
(:require
+ [app.common.data.macros :as dm]
[app.common.schema :as sm]
[app.config :as cf]
[app.main.data.notifications :as ntf]
@@ -103,11 +104,12 @@
(mf/defc register-methods
{::mf/props :obj}
- [{:keys [params on-success-callback]}]
+ [{:keys [params hide-separator on-success-callback]}]
[:*
(when login/show-alt-login-buttons?
[:& login/login-buttons {:params params}])
- [:hr {:class (stl/css :separator)}]
+ (when (or login/show-alt-login-buttons? (false? hide-separator))
+ [:hr {:class (stl/css :separator)}])
[:& register-form {:params params :on-success-callback on-success-callback}]])
(mf/defc register-page
@@ -251,14 +253,37 @@
(mf/defc register-success-page
{::mf/props :obj}
- []
- (let [email (::email @sto/storage)]
+ [{:keys [params]}]
+ (let [email (or (:email params) (::email @sto/storage))]
[:div {:class (stl/css :auth-form-wrapper :register-success)}
- [:h1 {:class (stl/css :logo-container)}
- [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]]
+ (when-not (:hide-logo params)
+ [:h1 {:class (stl/css :logo-container)}
+ [:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]])
[:div {:class (stl/css :auth-title-wrapper)}
[:h2 {:class (stl/css :auth-title)}
(tr "auth.check-mail")]
[:div {:class (stl/css :notification-text)} (tr "auth.verification-email-sent")]]
[:div {:class (stl/css :notification-text-email)} email]
[:div {:class (stl/css :notification-text)} (tr "auth.check-your-email")]]))
+
+
+(mf/defc terms-register
+ []
+ (let [show-all? (and cf/terms-of-service-uri cf/privacy-policy-uri)
+ show-terms? (some? cf/terms-of-service-uri)
+ show-privacy? (some? cf/privacy-policy-uri)]
+
+ (when show-all?
+ [:div {:class (stl/css :terms-register)}
+ (when show-terms?
+ [:a {:href cf/terms-of-service-uri :target "_blank" :class (stl/css :auth-link)}
+ (tr "auth.terms-of-service")])
+
+ (when show-all?
+ [:span {:class (stl/css :and-text)}
+ (dm/str " " (tr "labels.and") " ")])
+
+ (when show-privacy?
+ [:a {:href cf/privacy-policy-uri :target "_blank" :class (stl/css :auth-link)}
+ (tr "auth.privacy-policy")])])))
+
diff --git a/frontend/src/app/main/ui/auth/register.scss b/frontend/src/app/main/ui/auth/register.scss
index 0f0497442..0309cd44a 100644
--- a/frontend/src/app/main/ui/auth/register.scss
+++ b/frontend/src/app/main/ui/auth/register.scss
@@ -66,3 +66,23 @@
width: $s-120;
margin-block-end: $s-24;
}
+
+.terms-register {
+ @include bodySmallTypography;
+ display: flex;
+ gap: $s-4;
+ justify-content: center;
+ width: 100%;
+}
+
+.and-text {
+ border-bottom: $s-1 solid transparent;
+ color: var(--title-foreground-color);
+}
+
+.auth-link {
+ color: var(--link-foreground-color);
+ &:hover {
+ text-decoration: underline;
+ }
+}
diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs
index eef34a8cf..75f6ee25a 100644
--- a/frontend/src/app/main/ui/components/forms.cljs
+++ b/frontend/src/app/main/ui/components/forms.cljs
@@ -420,7 +420,7 @@
(into [] (distinct) (conj coll item)))
(mf/defc multi-input
- [{:keys [form label class name trim valid-item-fn caution-item-fn on-submit] :as props}]
+ [{:keys [form label class name trim valid-item-fn caution-item-fn on-submit invite-email] :as props}]
(let [form (or form (mf/use-ctx form-ctx))
input-name (get props :name)
touched? (get-in @form [:touched input-name])
@@ -528,6 +528,12 @@
values (filterv #(:valid %) values)]
(update-form! values)))
+ (mf/with-effect []
+ (when invite-email
+ (swap! items conj-dedup {:text (str/trim invite-email)
+ :valid (valid-item-fn invite-email)
+ :caution (caution-item-fn invite-email)})))
+
[:div {:class klass}
[:input {:id (name input-name)
:class in-klass
diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs
index 4adec8d15..78c9902a9 100644
--- a/frontend/src/app/main/ui/dashboard.cljs
+++ b/frontend/src/app/main/ui/dashboard.cljs
@@ -52,7 +52,7 @@
(assoc :project-id (uuid project-id)))))
(mf/defc dashboard-content
- [{:keys [team projects project section search-term profile] :as props}]
+ [{:keys [team projects project section search-term profile invite-email] :as props}]
(let [container (mf/use-ref)
content-width (mf/use-state 0)
project-id (:id project)
@@ -129,7 +129,7 @@
[:& libraries-page {:team team}]
:dashboard-team-members
- [:& team-members-page {:team team :profile profile}]
+ [:& team-members-page {:team team :profile profile :invite-email invite-email}]
:dashboard-team-invitations
[:& team-invitations-page {:team team}]
@@ -153,6 +153,7 @@
project-id (:project-id params)
team-id (:team-id params)
search-term (:search-term params)
+ invite-email (-> route :query-params :invite-email)
teams (mf/deref refs/teams)
team (get teams team-id)
@@ -204,5 +205,6 @@
:project project
:section section
:search-term search-term
- :team team}])])]]))
+ :team team
+ :invite-email invite-email}])])]]))
diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs
index af8b3e4d5..c19f6f495 100644
--- a/frontend/src/app/main/ui/dashboard/team.cljs
+++ b/frontend/src/app/main/ui/dashboard/team.cljs
@@ -61,7 +61,7 @@
(mf/defc header
{::mf/wrap [mf/memo]
::mf/wrap-props false}
- [{:keys [section team]}]
+ [{:keys [section team invite-email]}]
(let [on-nav-members (mf/use-fn #(st/emit! (dd/go-to-team-members)))
on-nav-settings (mf/use-fn #(st/emit! (dd/go-to-team-settings)))
on-nav-invitations (mf/use-fn #(st/emit! (dd/go-to-team-invitations)))
@@ -79,7 +79,12 @@
(fn []
(st/emit! (modal/show {:type :invite-members
:team team
- :origin :team}))))]
+ :origin :team
+ :invite-email invite-email}))))]
+
+ (mf/with-effect []
+ (when invite-email
+ (on-invite-member)))
[:header {:class (stl/css :dashboard-header :team) :data-testid "dashboard-header"}
[:div {:class (stl/css :dashboard-title)}
@@ -141,7 +146,7 @@
{::mf/register modal/components
::mf/register-as :invite-members
::mf/wrap-props false}
- [{:keys [team origin]}]
+ [{:keys [team origin invite-email]}]
(let [members-map (mf/deref refs/dashboard-team-members)
perms (:permissions team)
@@ -192,7 +197,8 @@
:on-error (partial on-error form)}]
(st/emit! (-> (dd/invite-team-members (with-meta params mdata))
(with-meta {::ev/origin origin}))
- (dd/fetch-team-invitations))))]
+ (dd/fetch-team-invitations)
+ (dd/fetch-team-members (:id team)))))]
[:div {:class (stl/css-case :modal-team-container true
@@ -223,7 +229,8 @@
:valid-item-fn us/parse-email
:caution-item-fn current-members-emails
:label (tr "modals.invite-member.emails")
- :on-submit on-submit}]]
+ :on-submit on-submit
+ :invite-email invite-email}]]
[:div {:class (stl/css :action-buttons)}
[:> fm/submit-button*
@@ -497,7 +504,7 @@
(mf/defc team-members-page
{::mf/wrap-props false}
- [{:keys [team profile]}]
+ [{:keys [team profile invite-email]}]
(let [members-map (mf/deref refs/dashboard-team-members)]
(mf/with-effect [team]
@@ -511,7 +518,7 @@
(st/emit! (dd/fetch-team-members (:id team))))
[:*
- [:& header {:section :dashboard-team-members :team team}]
+ [:& header {:section :dashboard-team-members :team team :invite-email invite-email}]
[:section {:class (stl/css :dashboard-container :dashboard-team-members)}
[:& team-members
{:profile profile
diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs
index 5a0b0a11a..dea1570f6 100644
--- a/frontend/src/app/main/ui/static.cljs
+++ b/frontend/src/app/main/ui/static.cljs
@@ -10,32 +10,50 @@
[app.common.data :as d]
[app.common.pprint :as pp]
[app.common.uri :as u]
+ [app.main.data.common :as dc]
[app.main.data.events :as ev]
+ [app.main.repo :as rp]
[app.main.store :as st]
+ [app.main.ui.auth.login :refer [login-methods]]
+ [app.main.ui.auth.recovery-request :refer [recovery-request-page recovery-sent-page]]
+ [app.main.ui.auth.register :refer [register-methods register-validate-form register-success-page terms-register]]
+ [app.main.ui.dashboard.sidebar :refer [sidebar]]
[app.main.ui.icons :as i]
+ [app.main.ui.viewer.header :as header]
[app.util.dom :as dom]
- [app.util.globals :as globals]
[app.util.i18n :refer [tr]]
[app.util.router :as rt]
[app.util.webapi :as wapi]
+ [beicon.v2.core :as rx]
+ [cuerdas.core :as str]
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
(mf/defc error-container
{::mf/wrap-props false}
[{:keys [children]}]
- (let [on-click (mf/use-callback #(set! (.-href globals/location) "/"))]
+ (let [profile-id (:profile-id @st/state)]
[:section {:class (stl/css :exception-layout)}
[:button
{:class (stl/css :exception-header)
- :on-click on-click}
- i/logo-icon]
+ :on-click rt/nav-root}
+ i/logo-icon
+ (when profile-id
+ (str "< "
+ (tr "not-found.no-permission.go-dashboard")))]
[:div {:class (stl/css :deco-before)} i/logo-error-screen]
+ (when-not profile-id
+ [:button {:class (stl/css :login-header)
+ :on-click rt/nav-root}
+ (tr "labels.login")])
[:div {:class (stl/css :exception-content)}
[:div {:class (stl/css :container)} children]]
- [:div {:class (stl/css :deco-after)} i/logo-error-screen]]))
+ [:div {:class (stl/css :deco-after2)}
+ [:span (tr "labels.copyright")]
+ i/logo-error-screen
+ [:span (tr "not-found.made-with-love")]]]))
(mf/defc invalid-token
[]
@@ -43,16 +61,221 @@
[:div {:class (stl/css :main-message)} (tr "errors.invite-invalid")]
[:div {:class (stl/css :desc-message)} (tr "errors.invite-invalid.info")]])
+
+
+(mf/defc login-dialog
+ {::mf/props :obj}
+ [{:keys [show-dialog]}]
+ (let [current-section (mf/use-state :login)
+ user-email (mf/use-state "")
+ register-token (mf/use-state "")
+
+ set-section
+ (mf/use-fn
+ (fn [event]
+ (let [section (-> (dom/get-current-target event)
+ (dom/get-data "section")
+ (keyword))]
+ (reset! current-section section))))
+
+ set-section-recovery
+ (mf/use-fn
+ #(reset! current-section :recovery-request))
+
+ set-section-login
+ (mf/use-fn
+ #(reset! current-section :login))
+
+ success-login
+ (fn []
+ (reset! show-dialog false)
+ (.reload js/window.location true))
+
+ success-register
+ (fn [data]
+ (reset! register-token (:token data))
+ (reset! current-section :register-validate))
+
+ register-email-sent
+ (fn [email]
+ (reset! user-email email)
+ (reset! current-section :register-email-sent))
+
+ recovery-email-sent
+ (fn [email]
+ (reset! user-email email)
+ (reset! current-section :recovery-email-sent))]
+
+ [:div {:class (stl/css :overlay)}
+ [:div {:class (stl/css :dialog-login)}
+ [:div {:class (stl/css :modal-close)}
+ [:button {:class (stl/css :modal-close-button) :on-click rt/nav-root}
+ i/close]]
+ [:div {:class (stl/css :login)}
+ [:div {:class (stl/css :logo)} i/logo]
+
+ (case @current-section
+ :login
+ [:*
+ [:div {:class (stl/css :logo-title)} (tr "labels.login")]
+ [:div {:class (stl/css :logo-subtitle)} (tr "not-found.login.free")]
+ [:& login-methods {:on-recovery-request set-section-recovery
+ :on-success-callback success-login}]
+ [:hr {:class (stl/css :separator)}]
+ [:div {:class (stl/css :change-section)}
+ (tr "auth.register")
+ " "
+ [:a {:data-section "register"
+ :on-click set-section} (tr "auth.register-submit")]]]
+
+ :register
+ [:*
+ [:div {:class (stl/css :logo-title)} (tr "not-found.login.signup-free")]
+ [:div {:class (stl/css :logo-subtitle)} (tr "not-found.login.start-using")]
+ [:& register-methods {:on-success-callback success-register :hide-separator true}]
+ #_[:hr {:class (stl/css :separator)}]
+ [:div {:class (stl/css :separator)}]
+ [:div {:class (stl/css :change-section)}
+ (tr "auth.already-have-account")
+ " "
+ [:a {:data-section "login"
+ :on-click set-section} (tr "auth.login-here")]]
+ [:div {:class (stl/css :links)}
+ [:hr {:class (stl/css :separator)}]
+ [:& terms-register]]]
+
+ :register-validate
+ [:div {:class (stl/css :form-container)}
+ [:& register-validate-form {:params {:token @register-token}
+ :on-success-callback register-email-sent}]
+ [:div {:class (stl/css :links)}
+ [:div {:class (stl/css :register)}
+ [:a {:data-section "register"
+ :on-click set-section}
+ (tr "labels.go-back")]]]]
+
+ :register-email-sent
+ [:div {:class (stl/css :form-container)}
+ [:& register-success-page {:params {:email @user-email :hide-logo true}}]]
+
+ :recovery-request
+ [:& recovery-request-page {:go-back-callback set-section-login
+ :on-success-callback recovery-email-sent}]
+
+ :recovery-email-sent
+ [:div {:class (stl/css :form-container)}
+ [:& recovery-sent-page {:email @user-email}]])]]]))
+
+(mf/defc request-dialog
+ {::mf/props :obj}
+ [{:keys [title content button-text on-button-click cancel-text]}]
+ (let [on-click (or on-button-click rt/nav-root)]
+ [:div {:class (stl/css :overlay)}
+ [:div {:class (stl/css :dialog)}
+ [:div {:class (stl/css :modal-close)}
+ [:button {:class (stl/css :modal-close-button) :on-click rt/nav-root}
+ i/close]]
+ [:div {:class (stl/css :dialog-title)} title]
+ (for [txt content]
+ [:div txt])
+ [:div {:class (stl/css :sign-info)}
+ (when cancel-text
+ [:button {:class (stl/css :cancel-button) :on-click rt/nav-root} cancel-text])
+ [:button {:on-click on-click} button-text]]]]))
+
+
+(mf/defc request-access
+ {::mf/props :obj}
+ [{:keys [file-id team-id is-default workspace?]}]
+ (let [profile (:profile @st/state)
+ requested* (mf/use-state {:sent false :already-requested false})
+ requested (deref requested*)
+ show-dialog (mf/use-state true)
+ on-success
+ (mf/use-fn
+ #(reset! requested* {:sent true :already-requested false}))
+ on-error
+ (mf/use-fn
+ #(reset! requested* {:sent true :already-requested true}))
+ on-request-access
+ (mf/use-fn
+ (mf/deps file-id team-id workspace?)
+ (fn []
+ (let [params (if (some? file-id) {:file-id file-id :is-viewer (not workspace?)} {:team-id team-id})
+ mdata {:on-success on-success :on-error on-error}]
+ (st/emit! (dc/create-team-access-request (with-meta params mdata))))))]
+
+
+ [:*
+ (if (some? file-id)
+ (if workspace?
+ [:div {:class (stl/css :workspace)}
+ [:div {:class (stl/css :workspace-left)}
+ i/logo-icon
+ [:div
+ [:div {:class (stl/css :project-name)} (tr "not-found.no-permission.project-name")]
+ [:div {:class (stl/css :file-name)} (tr "not-found.no-permission.penpot-file")]]]
+ [:div {:class (stl/css :workspace-right)}]]
+ [:div {:class (stl/css :viewer)}
+ [:& header/header {:project {:name (tr "not-found.no-permission.project-name")}
+ :index 0
+ :file {:name (tr "not-found.no-permission.penpot-file")}
+ :page nil
+ :frame nil
+ :permissions {:is-logged true}
+ :zoom 1
+ :section :interactions
+ :shown-thumbnails false
+ :interactions-mode nil}]])
+
+ [:div {:class (stl/css :dashboard)}
+ [:div {:class (stl/css :dashboard-sidebar)}
+ [:& sidebar
+ {:team nil
+ :projects []
+ :project (:default-project-id profile)
+ :profile profile
+ :section :dashboard-projects
+ :search-term ""}]]])
+
+ (when @show-dialog
+ (cond
+ (nil? profile)
+ [:& login-dialog {:show-dialog show-dialog}]
+
+ is-default
+ [:& request-dialog {:title (tr "not-found.no-permission.project") :button-text (tr "not-found.no-permission.go-dashboard")}]
+
+ (and (some? file-id) (:already-requested requested))
+ [:& request-dialog {:title (tr "not-found.no-permission.already-requested.file") :content [(tr "not-found.no-permission.already-requested.or-others.file")] :button-text (tr "not-found.no-permission.go-dashboard")}]
+
+ (:already-requested requested)
+ [:& request-dialog {:title (tr "not-found.no-permission.already-requested.project") :content [(tr "not-found.no-permission.already-requested.or-others.project")] :button-text (tr "not-found.no-permission.go-dashboard")}]
+
+ (:sent requested)
+ [:& request-dialog {:title (tr "not-found.no-permission.done.success") :content [(tr "not-found.no-permission.done.remember")] :button-text (tr "not-found.no-permission.go-dashboard")}]
+
+ (some? file-id)
+ [:& request-dialog {:title (tr "not-found.no-permission.file") :content [(tr "not-found.no-permission.you-can-ask.file") (tr "not-found.no-permission.if-approves")] :button-text (tr "not-found.no-permission.ask") :on-button-click on-request-access :cancel-text (tr "not-found.no-permission.go-dashboard")}]
+
+ (some? team-id)
+ [:& request-dialog {:title (tr "not-found.no-permission.project") :content [(tr "not-found.no-permission.you-can-ask.project") (tr "not-found.no-permission.if-approves")] :button-text (tr "not-found.no-permission.ask") :on-button-click on-request-access :cancel-text (tr "not-found.no-permission.go-dashboard")}]))]))
+
+
+
(mf/defc not-found
[]
[:> error-container {}
[:div {:class (stl/css :main-message)} (tr "labels.not-found.main-message")]
- [:div {:class (stl/css :desc-message)} (tr "labels.not-found.desc-message")]])
+ [:div {:class (stl/css :desc-message)} (tr "not-found.desc-message.error")]
+ [:div {:class (stl/css :desc-message)} (tr "not-found.desc-message.doesnt-exist")]])
+
+
(mf/defc bad-gateway
[]
(let [handle-retry
- (mf/use-callback
+ (mf/use-fn
(fn [] (st/emit! (rt/assign-exception nil))))]
[:> error-container {}
[:div {:class (stl/css :main-message)} (tr "labels.bad-gateway.main-message")]
@@ -150,13 +373,49 @@
(mf/defc exception-page
{::mf/props :obj}
[{:keys [data route] :as props}]
- (let [type (:type data)
- path (:path route)
- query-params (u/map->query-string (:query-params route))]
- (st/emit! (ptk/event ::ev/event {::ev/name "exception-page" :type type :path path :query-params query-params}))
+ (let [file-info (mf/use-state {:pending true})
+ team-info (mf/use-state {:pending true})
+ type (:type data)
+ path (:path route)
+
+ workspace? (str/includes? path "workspace")
+ dashboard? (str/includes? path "dashboard")
+ view? (str/includes? path "view")
+
+ request-access? (and
+ (or workspace? dashboard? view?)
+ (or (not (str/empty? (:file-id @file-info))) (not (str/empty? (:team-id @team-info)))))
+
+ query-params (u/map->query-string (:query-params route))
+ pparams (:path-params route)
+ on-file-info (mf/use-fn
+ (fn [info]
+ (reset! file-info {:file-id (:id info)})))
+ on-team-info (mf/use-fn
+ (fn [info]
+ (reset! team-info {:team-id (:id info) :is-default (:is-default info)})))]
+
+ (mf/with-effect [type path query-params pparams @file-info @team-info]
+ (st/emit! (ptk/event ::ev/event {::ev/name "exception-page" :type type :path path :query-params query-params}))
+
+ (when (and (:file-id pparams) (:pending @file-info))
+ (->> (rp/cmd! :get-file-info {:id (:file-id pparams)})
+ (rx/subs! on-file-info)))
+
+ (when (and (:team-id pparams) (:pending @team-info))
+ (->> (rp/cmd! :get-team-info {:id (:team-id pparams)})
+ (rx/subs! on-team-info))))
+
(case (:type data)
:not-found
- [:& not-found]
+ (if request-access?
+ [:& request-access {:file-id (:file-id @file-info) :team-id (:team-id @team-info) :is-default (:is-default @team-info) :workspace? workspace?}]
+ [:& not-found])
+
+ :authentication
+ (if request-access?
+ [:& request-access {:file-id (:file-id @file-info) :team-id (:team-id @team-info) :is-default (:is-default @team-info) :workspace? workspace?}]
+ [:& not-found])
:bad-gateway
[:& bad-gateway]
diff --git a/frontend/src/app/main/ui/static.scss b/frontend/src/app/main/ui/static.scss
index 1d2ea861a..601bd780c 100644
--- a/frontend/src/app/main/ui/static.scss
+++ b/frontend/src/app/main/ui/static.scss
@@ -28,6 +28,7 @@
.deco-before {
height: 34vh;
top: 0;
+
svg {
bottom: 0;
}
@@ -36,17 +37,52 @@
.deco-after {
height: 34vh;
bottom: 0;
+
svg {
top: 0;
}
}
+.deco-after2 {
+ display: flex;
+ justify-content: center;
+ gap: $s-8;
+ width: 100%;
+ height: 34vh;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ color: var(--color-foreground-primary);
+
+ svg {
+ fill: var(--color-foreground-secondary);
+ height: 1537px;
+ width: $s-80;
+ }
+
+ span {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ height: 100%;
+ width: 25%;
+
+ &:first-child {
+ text-align: right;
+ }
+ }
+}
+
.exception-header {
+ color: var(--color-foreground-secondary);
padding: $s-24 $s-32;
position: fixed;
background: none;
border: none;
cursor: pointer;
+ display: flex;
+ align-items: center;
+
svg {
fill: var(--color-foreground-primary);
width: $s-48;
@@ -54,6 +90,15 @@
}
}
+.login-header {
+ @extend .button-primary;
+ padding: $s-8 $s-16;
+ font-size: $fs-11;
+ position: fixed;
+ right: 0;
+ margin: $s-40 $s-32;
+}
+
.exception-content {
display: flex;
height: 100%;
@@ -85,6 +130,7 @@
.sign-info {
text-align: center;
+
button {
@extend .button-primary;
text-transform: uppercase;
@@ -98,3 +144,180 @@
fill: var(--color-foreground-primary);
}
}
+
+.workspace {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ background-color: var(--color-canvas);
+ position: relative;
+
+ .workspace-left,
+ .workspace-right {
+ padding: $s-12;
+ width: $s-276;
+ height: 100%;
+ background-color: var(--color-background-primary);
+ display: flex;
+ gap: $s-4;
+
+ svg {
+ width: 2rem;
+ height: 2rem;
+ fill: var(--icon-foreground-hover);
+ }
+
+ .project-name {
+ @include uppercaseTitleTipography;
+ color: var(--title-foreground-color);
+ }
+
+ .file-name {
+ @include smallTitleTipography;
+ text-transform: none;
+ color: var(--title-foreground-color-hover);
+ }
+ }
+}
+
+.dashboard {
+ width: 100%;
+ height: 100%;
+
+ .dashboard-sidebar {
+ width: $s-300;
+ height: 100%;
+ }
+}
+
+.viewer {
+ width: 100%;
+ height: 100%;
+}
+
+.overlay {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 100;
+ background-color: rgba(0, 0, 0, 0.65);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .dialog,
+ .dialog-login {
+ width: 556px;
+ background-color: var(--color-background-primary);
+ border-radius: $s-8;
+ display: flex;
+ flex-direction: column;
+ align-content: stretch;
+ padding: $s-36;
+ color: var(--modal-text-foreground-color);
+
+ .modal-close {
+ text-align: right;
+
+ .modal-close-button {
+ background: none;
+ border: none;
+ cursor: pointer;
+
+ svg {
+ cursor: pointer;
+ width: $s-24;
+ height: $s-24;
+ fill: var(--modal-text-foreground-color);
+ stroke: var(--modal-text-foreground-color);
+ }
+ }
+ }
+
+ .dialog-title {
+ font-size: $fs-20;
+ }
+
+ .sign-info {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: $s-32;
+
+ button {
+ @extend .button-primary;
+ text-transform: uppercase;
+ padding: $s-8 $s-16;
+ font-size: $fs-11;
+ }
+
+ .cancel-button {
+ @extend .button-secondary;
+ text-transform: uppercase;
+ padding: $s-8 $s-16;
+ font-size: $fs-11;
+ margin-right: $s-16;
+ }
+ }
+ }
+
+ .dialog {
+ gap: $s-12;
+ }
+
+ .login {
+ gap: 0;
+ padding: 0 $s-36 $s-72 $s-36;
+
+ .logo {
+ margin-bottom: $s-40;
+
+ svg {
+ fill: var(--color-foreground-primary);
+ width: $s-120;
+ height: $s-40;
+ }
+ }
+
+ .logo-title {
+ font-size: $fs-20;
+ color: var(--title-foreground-color-hover);
+ margin-bottom: $s-4;
+ }
+
+ .logo-subtitle {
+ font-size: $fs-14;
+ color: var(--title-foreground-color-hover);
+ margin-bottom: $s-24;
+ }
+
+ .change-section {
+ width: 100%;
+ text-align: center;
+
+ a {
+ color: var(--link-foreground-color);
+ }
+ }
+
+ hr {
+ margin: $s-20 0;
+ border-top: solid 1px var(--modal-separator-backogrund-color);
+ }
+
+ .separator {
+ margin: $s-20 0;
+ }
+
+ form div {
+ margin-bottom: $s-8;
+ }
+ }
+}
+
+.login-container {
+ width: 100%;
+ background-color: red;
+}
diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs
index 2fe373491..0410bd1df 100644
--- a/frontend/src/app/main/ui/viewer.cljs
+++ b/frontend/src/app/main/ui/viewer.cljs
@@ -276,7 +276,7 @@
(mf/defc viewer-content
{::mf/wrap-props false}
- [{:keys [data page-id share-id section index interactions-mode] :as props}]
+ [{:keys [data page-id share-id section index interactions-mode share] :as props}]
(let [{:keys [file users project permissions]} data
allowed (or
(= section :interactions)
@@ -615,7 +615,8 @@
:zoom zoom
:section section
:shown-thumbnails (:show-thumbnails local)
- :interactions-mode interactions-mode}]]))
+ :interactions-mode interactions-mode
+ :share share}]]))
;; --- Component: Viewer
diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs
index 603c1cba1..deeaced4d 100644
--- a/frontend/src/app/main/ui/viewer/header.cljs
+++ b/frontend/src/app/main/ui/viewer/header.cljs
@@ -120,7 +120,7 @@
:key (dm/str "zoom-fullscreen-" sc)} sc])]]]]]))
(mf/defc header-options
- [{:keys [section zoom page file index permissions interactions-mode]}]
+ [{:keys [section zoom page file index permissions interactions-mode share]}]
(let [fullscreen? (mf/deref fullscreen-ref)
toggle-fullscreen
@@ -159,6 +159,12 @@
handle-zoom-fit
(mf/use-fn
#(st/emit! dv/zoom-to-fit))]
+ (mf/with-effect [permissions share]
+ (when (and
+ (:in-team permissions)
+ (:is-admin permissions)
+ share)
+ (open-share-dialog)))
[:div {:class (stl/css :options-zone)}
[:& export-progress-widget]
@@ -261,7 +267,7 @@
(mf/defc header
- [{:keys [project file page frame zoom section permissions index interactions-mode shown-thumbnails]}]
+ [{:keys [project file page frame zoom section permissions index interactions-mode shown-thumbnails share]}]
(let [go-to-dashboard
(mf/use-fn
#(st/emit! (dv/go-to-dashboard)))
@@ -351,4 +357,5 @@
:file file
:index index
:zoom zoom
- :interactions-mode interactions-mode}]]))
+ :interactions-mode interactions-mode
+ :share share}]]))
diff --git a/frontend/src/app/main/ui/viewer/login.cljs b/frontend/src/app/main/ui/viewer/login.cljs
index 1a1e692dc..c8b02b2f1 100644
--- a/frontend/src/app/main/ui/viewer/login.cljs
+++ b/frontend/src/app/main/ui/viewer/login.cljs
@@ -10,14 +10,12 @@
[app.common.logging :as log]
[app.main.data.modal :as modal]
[app.main.store :as st]
- [app.main.ui.auth :refer [terms-login]]
[app.main.ui.auth.login :refer [login-methods]]
[app.main.ui.auth.recovery-request :refer [recovery-request-page]]
- [app.main.ui.auth.register :refer [register-methods register-validate-form register-success-page]]
+ [app.main.ui.auth.register :refer [register-methods register-validate-form register-success-page terms-register]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
- [app.util.storage :refer [storage]]
[rumext.v2 :as mf]))
(log/set-level! :warn)
@@ -26,8 +24,7 @@
{::mf/register modal/components
::mf/register-as :login-register}
[_]
- (let [uri (. (. js/document -location) -href)
- user-email (mf/use-state "")
+ (let [user-email (mf/use-state "")
register-token (mf/use-state "")
current-section* (mf/use-state :login)
@@ -66,9 +63,6 @@
(reset! register-token (:token data))
(set-current-section :register-validate))]
- (mf/with-effect []
- (swap! storage assoc :redirect-url uri))
-
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-header)}
@@ -125,4 +119,4 @@
(when main-section
[:div {:class (stl/css :links)}
- [:& terms-login]])]]]))
+ [:& terms-register]])]]]))
diff --git a/frontend/src/app/main/ui/viewer/login.scss b/frontend/src/app/main/ui/viewer/login.scss
index 74dc3eb6e..614bfa701 100644
--- a/frontend/src/app/main/ui/viewer/login.scss
+++ b/frontend/src/app/main/ui/viewer/login.scss
@@ -12,6 +12,7 @@
.modal-container {
@extend .modal-container-base;
+ width: $s-368;
}
.modal-header {
@@ -32,8 +33,8 @@
@include bodySmallTypography;
gap: $s-24;
max-height: $s-400;
- width: $s-368;
overflow: hidden auto;
+
form {
display: flex;
flex-direction: column;
@@ -46,7 +47,6 @@
display: flex;
justify-content: center;
flex-direction: column;
- max-width: $s-368;
}
.links {
@@ -64,6 +64,7 @@
color: var(--modal-text-foreground-color);
margin-top: $s-12;
}
+
a {
@extend .button-secondary;
height: $s-40;
diff --git a/frontend/src/app/util/router.cljs b/frontend/src/app/util/router.cljs
index c4d541cfd..6374d8822 100644
--- a/frontend/src/app/util/router.cljs
+++ b/frontend/src/app/util/router.cljs
@@ -13,6 +13,7 @@
[app.main.data.events :as ev]
[app.util.browser-history :as bhistory]
[app.util.dom :as dom]
+ [app.util.globals :as globals]
[app.util.timers :as ts]
[beicon.v2.core :as rx]
[goog.events :as e]
@@ -143,6 +144,11 @@
(= (.-hostname location) (:host referrer)))
(nav-back))))
+(defn nav-root
+ "Navigate to the root page."
+ []
+ (set! (.-href globals/location) "/"))
+
;; --- History API
(defn initialize-history
diff --git a/frontend/src/app/util/storage.cljs b/frontend/src/app/util/storage.cljs
index a29049740..cd9303edd 100644
--- a/frontend/src/app/util/storage.cljs
+++ b/frontend/src/app/util/storage.cljs
@@ -44,3 +44,4 @@
(defonce storage (atom (load (ex/ignoring (unchecked-get g/global "localStorage")))))
(add-watch storage :persistence #(persist js/localStorage %3 %4))
+
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 7d968ff1b..fe0da0f66 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -2627,6 +2627,15 @@ msgstr "Start"
msgid "labels.student-teacher"
msgstr "Student or teacher"
+msgid "labels.login"
+msgstr "Login"
+
+msgid "labels.ok"
+msgstr "Ok"
+
+msgid "labels.copyright"
+msgstr "Kaleidos @2024"
+
#: src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs,
msgid "settings.detach"
msgstr "Detach"
@@ -5322,3 +5331,72 @@ msgstr "Read and modify your libraries and assets."
msgid "workspace.plugins.discover"
msgstr ""
"Discover [more plugins](%s)"
+
+msgid "not-found.desc-message.error"
+msgstr "404 error"
+
+msgid "not-found.desc-message.doesnt-exist"
+msgstr "This page doesn't exist"
+
+msgid "not-found.made-with-love"
+msgstr "Made with LOVE and Open Source"
+
+msgid "not-found.no-permission.file"
+msgstr "You don't have access to this file."
+
+msgid "not-found.no-permission.project"
+msgstr "You don't have access to this project."
+
+msgid "not-found.no-permission.you-can-ask.file"
+msgstr "To access this file, you can ask the team owner."
+
+msgid "not-found.no-permission.you-can-ask.project"
+msgstr "To access this project, you can ask the team owner."
+
+msgid "not-found.no-permission.if-approves"
+msgstr "If the owner allows it, you're going to be invited to the team."
+
+msgid "not-found.no-permission.ask"
+msgstr "REQUEST ACCESS"
+
+msgid "not-found.no-permission.already-requested.file"
+msgstr "You have already requested access to this file."
+
+msgid "not-found.no-permission.already-requested.project"
+msgstr "You have already requested access to this project."
+
+msgid "not-found.no-permission.already-requested.or-others.file"
+msgstr "You have already requested access to this file or other files or projects of this team."
+
+msgid "not-found.no-permission.already-requested.or-others.project"
+msgstr "You have already requested access to this project or other projects or files of this team."
+
+msgid "not-found.no-permission.done.success"
+msgstr "Your request has been sent correctly!"
+
+msgid "not-found.no-permission.done.remember"
+msgstr "Remember that, if the owner allows it, you're going to be invited to the team."
+
+msgid "not-found.no-permission.go-dashboard"
+msgstr "Go to your Penpot"
+
+msgid "not-found.no-permission.project-name"
+msgstr "PROJECT"
+
+msgid "not-found.no-permission.penpot-file"
+msgstr "Penpot file"
+
+msgid "not-found.login.free"
+msgstr "Penpot is the free and open-source design tool for collaboration between Design and Code"
+
+msgid "not-found.login.signup-free"
+msgstr "Signup for free"
+
+msgid "not-found.login.start-using"
+msgstr "And start using Penpot in seconds!"
+
+msgid "not-found.login.sent-recovery"
+msgstr "We have sent a recovery email to"
+
+msgid "not-found.login.sent-recovery-check"
+msgstr "Check your email and click on the link to create a new password."
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 72d891e8a..57fff1984 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -2680,6 +2680,15 @@ msgstr "Comenzar"
msgid "labels.student-teacher"
msgstr "Estudiante o profesorado"
+msgid "labels.login"
+msgstr "Entrar"
+
+msgid "labels.ok"
+msgstr "Ok"
+
+msgid "labels.copyright"
+msgstr "Kaleidos @2024"
+
#: src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs,
msgid "settings.detach"
msgstr "Desacoplar"
@@ -5426,3 +5435,74 @@ msgstr "Leer y modificar la información de sus bibliotecas y recursos."
msgid "workspace.plugins.discover"
msgstr ""
"Descubre [más extensiones](%s)"
+
+msgid "not-found.desc-message.error"
+msgstr "Error 404"
+
+msgid "not-found.desc-message.doesnt-exist"
+msgstr "Esta página no existe"
+
+msgid "not-found.made-with-love"
+msgstr "Hecho con AMOR y Software Libre"
+
+msgid "not-found.no-permission.file"
+msgstr "No tienes permiso para acceder a este archivo."
+
+msgid "not-found.no-permission.project"
+msgstr "No tienes permiso para acceder a este proyecto."
+
+msgid "not-found.no-permission.you-can-ask.file"
+msgstr "Para acceder a este archivo, puedes pedir permiso al propietario del equipo."
+
+msgid "not-found.no-permission.you-can-ask.project"
+msgstr "Para acceder a este proyecto, puedes pedir permiso al propietario del equipo."
+
+msgid "not-found.no-permission.if-approves"
+msgstr "Si el propietario lo aprueba, te invitará al equipo."
+
+msgid "not-found.no-permission.ask"
+msgstr "SOLICITAR ACCESO"
+
+msgid "not-found.no-permission.already-requested.file"
+msgstr "Ya has solicitado acceso a este archivo."
+
+msgid "not-found.no-permission.already-requested.project"
+msgstr "Ya has solicitado acceso a este proyecto."
+
+msgid "not-found.no-permission.already-requested.or-others.file"
+msgstr "Ya has solicitado acceso a este archivo o a otros archivos o proyectos del mismo equipo."
+
+msgid "not-found.no-permission.already-requested.or-others.project"
+msgstr "Ya has solicitado acceso a este proyecto o a otros proyectos o archivos del mismo equipo."
+
+msgid "not-found.no-permission.done.success"
+msgstr "¡Tu solicitud se ha enviado correctamente!"
+
+msgid "not-found.no-permission.done.remember"
+msgstr "Recuerda que, si el propietario la aprueba, entrarás en el equipo."
+
+msgid "not-found.no-permission.go-dashboard"
+msgstr "Ir a tu Penpot"
+
+msgid "not-found.no-permission.project-name"
+msgstr "PROYECTO"
+
+msgid "not-found.no-permission.penpot-file"
+msgstr "Archivo de Penpot"
+
+msgid "not-found.login.free"
+msgstr "Penpot es la herramienta de diseño libre y de código abierto para la colaboración entre diseño y código"
+
+msgid "not-found.login.signup-free"
+msgstr "Registrate gratis"
+
+msgid "not-found.login.start-using"
+msgstr "¡Y comienza a usar Penpot en segundos!"
+
+msgid "not-found.login.sent-recovery"
+msgstr "Hemos enviado un email de recuperación a"
+
+msgid "not-found.login.sent-recovery-check"
+msgstr "Revisa tu correo y haz clic en el enlace para crear una nueva contraseña."
+
+