GH-3245 Change password from settings page (#3538)

* GH-3245 add passwordResetToken and passwordResetTokenExpiresAt column on user entity

* Add password reset token expiry delay env variable

* Add generatePasswordResetToken mutation resolver

* Update .env.sample file on server

* Add password reset token and expiry migration script

* Add validate password reset token query and a dummy password update (WIP) resolver

* Fix bug in password reset token generate

* add update password mutation

* Update name and add email password reset link

* Add change password UI on settings page

* Add reset password route on frontend

* Add reset password form UI

* sign in user on password reset

* format code

* make PASSWORD_RESET_TOKEN_EXPIRES_IN optional

* add email template for password reset

* Improve error message

* Rename methods and DTO to improve naming

* fix formatting of backend code

* Update change password component

* Update password reset via token component

* update graphql files

* spelling fix

* Make password-reset route authless on frontend

* show token generation wait time

* remove constant from .env.example

* Add PASSWORD_RESET_TOKEN_EXPIRES_IN in docs

* refactor emails module in reset password

* update Graphql generated file

* update email template of password reset

* add space between date and text

* update method name

* fix lint issues

* remove unused code, fix indentation, and email link color

* update test file for auth and token service

* Fix ci: build twenty-emails when running tests

---------

Co-authored-by: martmull <martmull@hotmail.fr>

packages/twenty-emails/src/common-style.ts

@@ -25,6 +25,7 @@ export const emailTheme = {
     colors: {
       highlighted: grayScale.gray60,
       primary: grayScale.gray50,
+      tertiary: grayScale.gray40,
       inverted: grayScale.gray0,
     },
     weight: {

packages/twenty-emails/src/components/Link.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Link as EmailLink } from '@react-email/components';
+import { emailTheme } from 'src/common-style';
+
+const linkStyle = {
+  color: emailTheme.font.colors.tertiary,
+  textDecoration: 'underline',
+};
+
+export const Link = ({ value, href }) => {
+  return (
+    <EmailLink href={href} style={linkStyle}>
+      {value}
+    </EmailLink>
+  );
+};

packages/twenty-emails/src/emails/password-reset-link.email.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { BaseEmail } from 'src/components/BaseEmail';
+import { CallToAction } from 'src/components/CallToAction';
+import { Link } from 'src/components/Link';
+import { MainText } from 'src/components/MainText';
+import { Title } from 'src/components/Title';
+
+type PasswordResetLinkEmailProps = {
+  duration: string;
+  link: string;
+};
+
+export const PasswordResetLinkEmail = ({
+  duration,
+  link,
+}: PasswordResetLinkEmailProps) => {
+  return (
+    <BaseEmail>
+      <Title value="Reset your password 🗝" />
+      <CallToAction href={link} value="Reset" />
+      <MainText>
+        This link is only valid for the next {duration}. If link does not work,
+        you can use the login verification link directly:
+        <br />
+        <Link href={link} value={link} />
+      </MainText>
+    </BaseEmail>
+  );
+};

packages/twenty-emails/src/emails/password-update-notify.email.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { format } from 'date-fns';
+import { BaseEmail } from 'src/components/BaseEmail';
+import { CallToAction } from 'src/components/CallToAction';
+import { MainText } from 'src/components/MainText';
+import { Title } from 'src/components/Title';
+
+type PasswordUpdateNotifyEmailProps = {
+  userName: string;
+  email: string;
+  link: string;
+};
+
+export const PasswordUpdateNotifyEmail = ({
+  userName,
+  email,
+  link,
+}: PasswordUpdateNotifyEmailProps) => {
+  const helloString = userName?.length > 1 ? `Dear ${userName}` : 'Dear';
+  return (
+    <BaseEmail>
+      <Title value="Password updated" />
+      <MainText>
+        {helloString},
+        <br />
+        <br />
+        This is a confirmation that password for your account ({email}) was
+        successfully changed on {format(new Date(), 'MMMM d, yyyy')}.
+        <br />
+        <br />
+        If you did not initiate this change, please contact your workspace owner
+        immediately.
+        <br />
+      </MainText>
+      <CallToAction value="Connect to Twenty" href={link} />
+    </BaseEmail>
+  );
+};