From 3423777ee30e1a99f30841123994dab594bd260a Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Thu, 18 Dec 2025 20:56:38 +0100
Subject: [PATCH] feat: gmail, outlook, yahoo links during email verification
 (#26038)

* added gmail, outlook, yahoo links during email verification

* added proton

* enable for self-hosters too

* undo i18n

* Discard changes to companion/bun.lock

* nit

* refactor: code quality improvments

---------

Co-authored-by: Dhairyashil <dhairyashil10101010@gmail.com>
---
 apps/web/modules/auth/verify-email-view.tsx |  64 +++++++++---
 apps/web/public/email-clients/gmail.svg     |   7 ++
 apps/web/public/email-clients/outlook.svg   |  35 +++++++
 apps/web/public/email-clients/proton.svg    | 102 ++++++++++++++++++++
 apps/web/public/email-clients/yahoo.svg     |   1 +
 5 files changed, 195 insertions(+), 14 deletions(-)
 create mode 100644 apps/web/public/email-clients/gmail.svg
 create mode 100644 apps/web/public/email-clients/outlook.svg
 create mode 100644 apps/web/public/email-clients/proton.svg
 create mode 100644 apps/web/public/email-clients/yahoo.svg

diff --git a/apps/web/modules/auth/verify-email-view.tsx b/apps/web/modules/auth/verify-email-view.tsx
index 0da43ceb68..590d113a72 100644
--- a/apps/web/modules/auth/verify-email-view.tsx
+++ b/apps/web/modules/auth/verify-email-view.tsx
@@ -2,17 +2,40 @@
 
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
 import posthog from "posthog-js";
+import { useEffect } from "react";
 
+import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import useEmailVerifyCheck from "@calcom/trpc/react/hooks/useEmailVerifyCheck";
-import { showToast } from "@calcom/ui/components/toast";
 import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
-import { useFlagMap } from "@calcom/features/flags/context/provider";
+import { showToast } from "@calcom/ui/components/toast";
+
+const EMAIL_CLIENTS = [
+  {
+    name: "Gmail",
+    icon: "/email-clients/gmail.svg",
+    href: 'https://mail.google.com/mail/u/0/#search/%22api%2Fauth%2Fverify-email%22',
+  },
+  {
+    name: "Outlook",
+    icon: "/email-clients/outlook.svg",
+    href: "https://outlook.live.com/mail/0/",
+  },
+  {
+    name: "Yahoo",
+    icon: "/email-clients/yahoo.svg",
+    href: "https://mail.yahoo.com/d/search?p=Cal.com",
+  },
+  {
+    name: "Proton",
+    icon: "/email-clients/proton.svg",
+    href: "https://mail.proton.me",
+  },
+] as const;
 
 function VerifyEmailPage() {
   const { data } = useEmailVerifyCheck();
@@ -47,17 +70,30 @@ function VerifyEmailPage() {
             description={t("verify_email_page_body", { email: session?.user?.email, appName: APP_NAME })}
             className="bg-default"
             buttonRaw={
-              <Button
-                color="minimal"
-                className="underline"
-                loading={mutation.isPending}
-                onClick={() => {
-                  posthog.capture("verify_email_resend_clicked");
-                  showToast(t("send_email"), "success");
-                  mutation.mutate();
-                }}>
-                {t("resend_email")}
-              </Button>
+              <>
+                <div className="mb-4 flex flex-wrap items-center gap-2">
+                  {EMAIL_CLIENTS.map(({ name, icon, href }) => (
+                    <Button
+                      key={name}
+                      color="secondary"
+                      href={href}
+                      target="_blank"
+                      rel="noopener noreferrer">
+                      <img src={icon} alt={name} className="me-1 h-4 w-4" /> {name}
+                    </Button>
+                  ))}
+                </div>
+                <Button
+                  color="minimal"
+                  loading={mutation.isPending}
+                  onClick={() => {
+                    posthog.capture("verify_email_resend_clicked");
+                    showToast(t("send_email"), "success");
+                    mutation.mutate();
+                  }}>
+                  {t("resend_email")}
+                </Button>
+              </>
             }
           />
         </div>
diff --git a/apps/web/public/email-clients/gmail.svg b/apps/web/public/email-clients/gmail.svg
new file mode 100644
index 0000000000..40b7175c11
--- /dev/null
+++ b/apps/web/public/email-clients/gmail.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="52 42 88 66">
+<path fill="#4285f4" d="M58 108h14V74L52 59v43c0 3.32 2.69 6 6 6"/>
+<path fill="#34a853" d="M120 108h14c3.32 0 6-2.69 6-6V59l-20 15"/>
+<path fill="#fbbc04" d="M120 48v26l20-15v-8c0-7.42-8.47-11.65-14.4-7.2"/>
+<path fill="#ea4335" d="M72 74V48l24 18 24-18v26L96 92"/>
+<path fill="#c5221f" d="M52 51v8l20 15V48l-5.6-4.2c-5.94-4.45-14.4-.22-14.4 7.2"/>
+</svg>
\ No newline at end of file
diff --git a/apps/web/public/email-clients/outlook.svg b/apps/web/public/email-clients/outlook.svg
new file mode 100644
index 0000000000..586f39ffb5
--- /dev/null
+++ b/apps/web/public/email-clients/outlook.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Livello_1" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1831.085 1703.335" enable-background="new 0 0 1831.085 1703.335" xml:space="preserve">
+<path fill="#0A2767" d="M1831.083,894.25c0.1-14.318-7.298-27.644-19.503-35.131h-0.213l-0.767-0.426l-634.492-375.585  c-2.74-1.851-5.583-3.543-8.517-5.067c-24.498-12.639-53.599-12.639-78.098,0c-2.934,1.525-5.777,3.216-8.517,5.067L446.486,858.693  l-0.766,0.426c-19.392,12.059-25.337,37.556-13.278,56.948c3.553,5.714,8.447,10.474,14.257,13.868l634.492,375.585  c2.749,1.835,5.592,3.527,8.517,5.068c24.498,12.639,53.599,12.639,78.098,0c2.925-1.541,5.767-3.232,8.517-5.068l634.492-375.585  C1823.49,922.545,1831.228,908.923,1831.083,894.25z"/>
+<path fill="#0364B8" d="M520.453,643.477h416.38v381.674h-416.38V643.477z M1745.917,255.5V80.908  c1-43.652-33.552-79.862-77.203-80.908H588.204C544.552,1.046,510,37.256,511,80.908V255.5l638.75,170.333L1745.917,255.5z"/>
+<path fill="#0078D4" d="M511,255.5h425.833v383.25H511V255.5z"/>
+<path fill="#28A8EA" d="M1362.667,255.5H936.833v383.25L1362.667,1022h383.25V638.75L1362.667,255.5z"/>
+<path fill="#0078D4" d="M936.833,638.75h425.833V1022H936.833V638.75z"/>
+<path fill="#0364B8" d="M936.833,1022h425.833v383.25H936.833V1022z"/>
+<path fill="#14447D" d="M520.453,1025.151h416.38v346.969h-416.38V1025.151z"/>
+<path fill="#0078D4" d="M1362.667,1022h383.25v383.25h-383.25V1022z"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1128.4584" y1="811.0833" x2="1128.4584" y2="1.9982" gradientTransform="matrix(1 0 0 -1 0 1705.3334)">
+	<stop offset="0" style="stop-color:#35B8F1"/>
+	<stop offset="1" style="stop-color:#28A8EA"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M1811.58,927.593l-0.809,0.426l-634.492,356.848c-2.768,1.703-5.578,3.321-8.517,4.769  c-10.777,5.132-22.481,8.029-34.407,8.517l-34.663-20.27c-2.929-1.47-5.773-3.105-8.517-4.897L447.167,906.003h-0.298  l-21.036-11.753v722.384c0.328,48.196,39.653,87.006,87.849,86.7h1230.914c0.724,0,1.363-0.341,2.129-0.341  c10.18-0.651,20.216-2.745,29.808-6.217c4.145-1.756,8.146-3.835,11.966-6.217c2.853-1.618,7.75-5.152,7.75-5.152  c21.814-16.142,34.726-41.635,34.833-68.772V894.25C1831.068,908.067,1823.616,920.807,1811.58,927.593z"/>
+<path opacity="0.5" fill="#0A2767" enable-background="new    " d="M1797.017,891.397v44.287l-663.448,456.791L446.699,906.301  c0-0.235-0.191-0.426-0.426-0.426l0,0l-63.023-37.899v-31.938l25.976-0.426l54.932,31.512l1.277,0.426l4.684,2.981  c0,0,645.563,368.346,647.267,369.197l24.698,14.478c2.129-0.852,4.258-1.703,6.813-2.555  c1.278-0.852,640.879-360.681,640.879-360.681L1797.017,891.397z"/>
+<path fill="#1490DF" d="M1811.58,927.593l-0.809,0.468l-634.492,356.848c-2.768,1.703-5.578,3.321-8.517,4.769  c-24.641,12.038-53.457,12.038-78.098,0c-2.918-1.445-5.76-3.037-8.517-4.769L446.657,928.061l-0.766-0.468  c-12.25-6.642-19.93-19.409-20.057-33.343v722.384c0.305,48.188,39.616,87.004,87.803,86.7c0.001,0,0.002,0,0.004,0h1229.636  c48.188,0.307,87.5-38.509,87.807-86.696c0-0.001,0-0.002,0-0.004V894.25C1831.068,908.067,1823.616,920.807,1811.58,927.593z"/>
+<path opacity="0.1" enable-background="new    " d="M1185.52,1279.629l-9.496,5.323c-2.752,1.752-5.595,3.359-8.517,4.812  c-10.462,5.135-21.838,8.146-33.47,8.857l241.405,285.479l421.107,101.476c11.539-8.716,20.717-20.178,26.7-33.343L1185.52,1279.629  z"/>
+<path opacity="0.05" enable-background="new    " d="M1228.529,1255.442l-52.505,29.51c-2.752,1.752-5.595,3.359-8.517,4.812  c-10.462,5.135-21.838,8.146-33.47,8.857l113.101,311.838l549.538,74.989c21.649-16.254,34.394-41.743,34.407-68.815v-9.326  L1228.529,1255.442z"/>
+<path fill="#28A8EA" d="M514.833,1703.333h1228.316c18.901,0.096,37.335-5.874,52.59-17.033l-697.089-408.331  c-2.929-1.47-5.773-3.105-8.517-4.897L447.125,906.088h-0.298l-20.993-11.838v719.914  C425.786,1663.364,465.632,1703.286,514.833,1703.333C514.832,1703.333,514.832,1703.333,514.833,1703.333z"/>
+<path opacity="0.1" enable-background="new    " d="M1022,418.722v908.303c-0.076,31.846-19.44,60.471-48.971,72.392  c-9.148,3.931-19,5.96-28.957,5.962H425.833V383.25H511v-42.583h433.073C987.092,340.83,1021.907,375.702,1022,418.722z"/>
+<path opacity="0.2" enable-background="new    " d="M979.417,461.305v908.302c0.107,10.287-2.074,20.469-6.388,29.808  c-11.826,29.149-40.083,48.273-71.54,48.417H425.833V383.25h475.656c12.356-0.124,24.533,2.958,35.344,8.943  C962.937,405.344,979.407,432.076,979.417,461.305z"/>
+<path opacity="0.2" enable-background="new    " d="M979.417,461.305v823.136c-0.208,43-34.928,77.853-77.927,78.225H425.833V383.25  h475.656c12.356-0.124,24.533,2.958,35.344,8.943C962.937,405.344,979.407,432.076,979.417,461.305z"/>
+<path opacity="0.2" enable-background="new    " d="M936.833,461.305v823.136c-0.046,43.067-34.861,78.015-77.927,78.225H425.833  V383.25h433.072c43.062,0.023,77.951,34.951,77.927,78.013C936.833,461.277,936.833,461.291,936.833,461.305z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="162.7469" y1="1383.0741" x2="774.0864" y2="324.2592" gradientTransform="matrix(1 0 0 -1 0 1705.3334)">
+	<stop offset="0" style="stop-color:#1784D9"/>
+	<stop offset="0.5" style="stop-color:#107AD5"/>
+	<stop offset="1" style="stop-color:#0A63C9"/>
+</linearGradient>
+<path fill="url(#SVGID_2_)" d="M78.055,383.25h780.723c43.109,0,78.055,34.947,78.055,78.055v780.723  c0,43.109-34.946,78.055-78.055,78.055H78.055c-43.109,0-78.055-34.947-78.055-78.055V461.305  C0,418.197,34.947,383.25,78.055,383.25z"/>
+<path fill="#FFFFFF" d="M243.96,710.631c19.238-40.988,50.29-75.289,89.17-98.495c43.057-24.651,92.081-36.94,141.675-35.515  c45.965-0.997,91.321,10.655,131.114,33.683c37.414,22.312,67.547,55.004,86.742,94.109c20.904,43.09,31.322,90.512,30.405,138.396  c1.013,50.043-9.706,99.628-31.299,144.783c-19.652,40.503-50.741,74.36-89.425,97.388c-41.327,23.734-88.367,35.692-136.011,34.578  c-46.947,1.133-93.303-10.651-134.01-34.067c-37.738-22.341-68.249-55.07-87.892-94.28c-21.028-42.467-31.57-89.355-30.745-136.735  C212.808,804.859,223.158,755.686,243.96,710.631z M339.006,941.858c10.257,25.912,27.651,48.385,50.163,64.812  c22.93,16.026,50.387,24.294,78.353,23.591c29.783,1.178,59.14-7.372,83.634-24.358c22.227-16.375,39.164-38.909,48.715-64.812  c10.677-28.928,15.946-59.572,15.543-90.404c0.33-31.127-4.623-62.084-14.649-91.554c-8.855-26.607-25.246-50.069-47.182-67.537  c-23.88-17.79-53.158-26.813-82.91-25.55c-28.572-0.74-56.644,7.593-80.184,23.804c-22.893,16.496-40.617,39.168-51.1,65.365  c-23.255,60.049-23.376,126.595-0.341,186.728L339.006,941.858z"/>
+<path fill="#50D9FF" d="M1362.667,255.5h383.25v383.25h-383.25V255.5z"/>
+</svg>
\ No newline at end of file
diff --git a/apps/web/public/email-clients/proton.svg b/apps/web/public/email-clients/proton.svg
new file mode 100644
index 0000000000..7756f8f044
--- /dev/null
+++ b/apps/web/public/email-clients/proton.svg
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="106"
+   height="86"
+   viewBox="0 0 106 86"
+   fill="none"
+   version="1.1"
+   id="svg18"
+   sodipodi:docname="ProtonMail_logo.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview18"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.56616"
+     inkscape:cx="81.409306"
+     inkscape:cy="66.723705"
+     inkscape:window-width="1366"
+     inkscape:window-height="699"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg18" />
+  <path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="M 83.4613,16.1551 V 86 h 11.578 C 101.094,86 106,81.026 106,74.9015 V 2.47101 c 0,-2.09261199 -2.404,-3.23204199 -3.997,-1.89540199 z"
+     fill="url(#paint0_linear_11985_190892)"
+     id="path11"
+     style="fill:url(#paint0_linear_11985_190892)" />
+  <path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="M 67.3128,29.7407 46.1604,48.6618 c -3.6066,3.2211 -8.9895,3.2978 -12.6827,0.1862 L 0,20.6691 V 2.482 C 0,0.38939001 2.40441,-0.76099599 3.99653,0.57564301 L 45.998,35.8761 c 4.0615,3.4183 9.9534,3.4183 14.0149,0 z"
+     fill="url(#paint1_linear_11985_190892)"
+     id="path12"
+     style="fill:url(#paint1_linear_11985_190892)" />
+  <path
+     d="m 83.4613,16.1661 -16.1485,13.5746 0.0108,-10e-5 -21.1632,18.9212 c -3.6066,3.2211 -8.9895,3.2978 -12.6827,0.1862 L 0,20.6691 V 74.9015 C 0,81.0259 4.9063,86 10.9607,86 h 72.5006 z"
+     fill="url(#paint2_radial_11985_190892)"
+     id="path13"
+     style="fill:url(#paint2_radial_11985_190892)" />
+  <defs
+     id="defs18">
+    <linearGradient
+       id="paint0_linear_11985_190892"
+       x1="265.97501"
+       y1="141.754"
+       x2="244.3"
+       y2="-73.404099"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0.271"
+         stop-color="#E3D9FF"
+         id="stop13" />
+      <stop
+         offset="1"
+         stop-color="#7341FF"
+         id="stop14" />
+    </linearGradient>
+    <linearGradient
+       id="paint1_linear_11985_190892"
+       x1="62.634602"
+       y1="86.798401"
+       x2="18.552999"
+       y2="-87.2799"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#E3D9FF"
+         id="stop15" />
+      <stop
+         offset="1"
+         stop-color="#7341FF"
+         id="stop16" />
+    </linearGradient>
+    <radialGradient
+       id="paint2_radial_11985_190892"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(123.614,0,0,125.045,105.538,10.5272)">
+      <stop
+         offset="0.5561"
+         stop-color="#6D4AFF"
+         id="stop17" />
+      <stop
+         offset="0.9944"
+         stop-color="#AA8EFF"
+         id="stop18" />
+    </radialGradient>
+  </defs>
+</svg>
diff --git a/apps/web/public/email-clients/yahoo.svg b/apps/web/public/email-clients/yahoo.svg
new file mode 100644
index 0000000000..6c2be965e8
--- /dev/null
+++ b/apps/web/public/email-clients/yahoo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px" baseProfile="basic"><polygon fill="#5e35b1" points="4.209,14.881 11.632,14.881 16.189,26.715 20.966,14.881 28.315,14.881 17.07,42 9.501,42 12.587,34.96"/><circle cx="29.276" cy="30.522" r="4.697" fill="#5e35b1"/><polygon fill="#5e35b1" points="34.693,6 27.213,24.042 35.444,24.042 42.925,6"/></svg>
\ No newline at end of file