From bb008c032d7ab692622103d0b527726359b807a6 Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Wed, 1 Apr 2026 19:27:42 +0500
Subject: [PATCH] identity: render HTML pages for email confirmation outcomes
 (#89)

---
 .../Controllers/AccountController.cs          |  26 ++-
 .../Templates/EmailConfirmErrorPage.html      | 128 +++++++++++
 .../Templates/EmailConfirmedPage.html         | 213 ++++++++++++++++++
 3 files changed, 363 insertions(+), 4 deletions(-)
 create mode 100644 Streetwriters.Identity/Templates/EmailConfirmErrorPage.html
 create mode 100644 Streetwriters.Identity/Templates/EmailConfirmedPage.html

diff --git a/Streetwriters.Identity/Controllers/AccountController.cs b/Streetwriters.Identity/Controllers/AccountController.cs
index 05ab2f1..07f74c0 100644
--- a/Streetwriters.Identity/Controllers/AccountController.cs
+++ b/Streetwriters.Identity/Controllers/AccountController.cs
@@ -34,6 +34,7 @@ using Microsoft.AspNetCore.RateLimiting;
 using Microsoft.Extensions.Logging;
 using Streetwriters.Common;
 using Streetwriters.Common.Enums;
+using Streetwriters.Common.Helpers;
 using Streetwriters.Common.Interfaces;
 using Streetwriters.Common.Messages;
 using Streetwriters.Common.Models;
@@ -52,6 +53,9 @@ namespace Streetwriters.Identity.Controllers
     [Authorize(LocalApi.PolicyName)]
     public class AccountController : IdentityControllerBase
     {
+        private static readonly string emailConfirmedPageHtml = HtmlHelper.ReadMinifiedHtmlFile("Templates/EmailConfirmedPage.html");
+        private static readonly string emailConfirmErrorPageHtml = HtmlHelper.ReadMinifiedHtmlFile("Templates/EmailConfirmErrorPage.html");
+
         private IPersistedGrantStore PersistedGrantStore { get; set; }
         private ITokenGenerationService TokenGenerationService { get; set; }
         private IUserAccountService UserAccountService { get; set; }
@@ -93,10 +97,22 @@ namespace Streetwriters.Identity.Controllers
             {
                 case TokenType.CONFRIM_EMAIL:
                     {
-                        if (await UserManager.IsEmailConfirmedAsync(user)) return Ok("Email already verified.");
+                        if (await UserManager.IsEmailConfirmedAsync(user))
+                        {
+                            return Content(
+                                emailConfirmedPageHtml.Replace("{{subheading}}", "Your email is already verified."),
+                                "text/html"
+                            );
+                        }
 
                         var result = await UserManager.ConfirmEmailAsync(user, code);
-                        if (!result.Succeeded) return BadRequest(result.Errors.ToErrors());
+                        if (!result.Succeeded)
+                        {
+                            return Content(
+                                emailConfirmErrorPageHtml.Replace("{{errors}}", string.Join(" ", result.Errors.ToErrors())),
+                                "text/html"
+                            );
+                        }
 
                         if (await UserManager.IsInRoleAsync(user, client.Id) && client.OnEmailConfirmed != null)
                         {
@@ -106,8 +122,10 @@ namespace Streetwriters.Identity.Controllers
                         if (!await UserManager.GetTwoFactorEnabledAsync(user))
                             await MFAService.EnableMFAAsync(user, MFAMethods.Email);
 
-                        var redirectUrl = $"{client.EmailConfirmedRedirectURL}?userId={userId}";
-                        return RedirectPermanent(redirectUrl);
+                        return Content(
+                            emailConfirmedPageHtml.Replace("{{subheading}}", "Your email has been confirmed."),
+                            "text/html"
+                        );
                     }
                 case TokenType.RESET_PASSWORD:
                     {
diff --git a/Streetwriters.Identity/Templates/EmailConfirmErrorPage.html b/Streetwriters.Identity/Templates/EmailConfirmErrorPage.html
new file mode 100644
index 0000000..2cb2594
--- /dev/null
+++ b/Streetwriters.Identity/Templates/EmailConfirmErrorPage.html
@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Email Confirmation Failed - Notesnook</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+        background: #ffffff;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        font-size: 16px;
+      }
+
+      .main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem;
+      }
+
+      .icon-wrapper {
+        background: #fdecea;
+        border-radius: 100px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .icon-wrapper svg {
+        width: 72px;
+        height: 72px;
+        fill: #c0392b;
+      }
+
+      .heading {
+        font-size: 2.5em;
+        font-weight: 700;
+        text-align: center;
+        margin-top: 20px;
+        color: #000;
+      }
+
+      .subheading {
+        font-size: 1.5em;
+        font-weight: 600;
+        text-align: center;
+        margin-top: 8px;
+        color: #5b5b5b;
+      }
+
+      .body-text {
+        font-size: 1.2em;
+        text-align: center;
+        margin-top: 8px;
+        color: #808080;
+        word-wrap: break-word;
+      }
+
+      .footer {
+        background: #f0f0f0;
+        padding: 40px 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .footer-heading {
+        font-size: 1.2em;
+        font-weight: bold;
+        text-align: center;
+      }
+
+      .footer-subtext {
+        font-size: 1em;
+        text-align: center;
+        margin-top: 8px;
+        color: #5b5b5b;
+      }
+
+      @media (max-width: 480px) {
+        body {
+          font-size: 14px;
+        }
+      }
+
+      @media (min-width: 769px) {
+        body {
+          font-size: 18px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="main">
+      <div class="icon-wrapper">
+        <!-- Mail X Icon -->
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M13 19C13 18.66 13.04 18.33 13.09 18H4V8L12 13L20 8V13.09C20.72 13.21 21.39 13.46 22 13.81V6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H13.09C13.04 19.67 13 19.34 13 19M20 6L12 11L4 6H20M21.12 15.46L19 17.59L16.88 15.46L15.47 16.88L17.59 19L15.47 21.12L16.88 22.54L19 20.41L21.12 22.54L22.54 21.12L20.41 19L22.54 16.88L21.12 15.46Z"
+          />
+        </svg>
+      </div>
+      <h1 class="heading">Uh oh!</h1>
+      <p class="subheading">Email confirmation failed. Please try again!</p>
+      <p class="body-text">{{errors}}</p>
+    </div>
+    <div class="footer">
+      <h2 class="footer-heading">Notesnook</h2>
+      <p class="footer-subtext">Privacy for everyone</p>
+    </div>
+  </body>
+</html>
diff --git a/Streetwriters.Identity/Templates/EmailConfirmedPage.html b/Streetwriters.Identity/Templates/EmailConfirmedPage.html
new file mode 100644
index 0000000..63ac5b3
--- /dev/null
+++ b/Streetwriters.Identity/Templates/EmailConfirmedPage.html
@@ -0,0 +1,213 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Email Confirmed - Notesnook</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+        background: #ffffff;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        font-size: 16px;
+      }
+
+      .main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem;
+      }
+
+      .icon-wrapper {
+        background: #e8f5e9;
+        border-radius: 100px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .icon-wrapper svg {
+        width: 72px;
+        height: 72px;
+        fill: #008837;
+      }
+
+      .heading {
+        font-size: 2.5em;
+        font-weight: 700;
+        text-align: center;
+        margin-top: 20px;
+        color: #000;
+      }
+
+      .subheading {
+        font-size: 1.5em;
+        font-weight: 600;
+        text-align: center;
+        margin-top: 8px;
+        color: #5b5b5b;
+      }
+
+      .body-text {
+        font-size: 1.2em;
+        text-align: center;
+        margin-top: 8px;
+        color: #808080;
+        word-wrap: break-word;
+      }
+
+      .footer {
+        background: #f0f0f0;
+        padding: 40px 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .footer-heading {
+        font-size: 1.2em;
+        font-weight: bold;
+        text-align: center;
+      }
+
+      .footer-subtext {
+        font-size: 1em;
+        text-align: center;
+        margin-top: 8px;
+        color: #5b5b5b;
+      }
+
+      .social-icons {
+        display: flex;
+        gap: 8px;
+        margin-top: 20px;
+      }
+
+      .social-icons a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #5b5b5b;
+        cursor: pointer;
+        text-decoration: none;
+      }
+
+      .social-icons a:hover svg {
+        opacity: 0.8;
+      }
+
+      .social-icons svg {
+        width: 30px;
+        height: 30px;
+      }
+
+      .promo-text {
+        font-size: 0.85em;
+        text-align: center;
+        margin-top: 8px;
+        color: #5b5b5b;
+      }
+
+      .promo-text .hashtag {
+        font-weight: bold;
+        color: #008837;
+      }
+
+      @media (max-width: 480px) {
+        body {
+          font-size: 14px;
+        }
+      }
+
+      @media (min-width: 769px) {
+        body {
+          font-size: 18px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="main">
+      <div class="icon-wrapper">
+        <!-- Mail Check Icon -->
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M13 19C13 18.66 13.04 18.33 13.09 18H4V8L12 13L20 8V13.09C20.72 13.21 21.39 13.46 22 13.81V6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H13.09C13.04 19.67 13 19.34 13 19M20 6L12 11L4 6H20M17.75 22.16L15 19.16L16.16 18L17.75 19.59L21.34 16L22.5 17.41L17.75 22.16"
+          />
+        </svg>
+      </div>
+      <h1 class="heading">Huzzah!</h1>
+      <p class="subheading">{{subheading}}</p>
+      <p class="body-text">
+        Thank you for choosing end-to-end encrypted note taking. Now you can
+        sync your notes to unlimited devices.
+      </p>
+    </div>
+
+    <div class="footer">
+      <h2 class="footer-heading">Share Notesnook with friends!</h2>
+      <p class="footer-subtext">Because where's the fun in nookin' alone?</p>
+      <div class="social-icons">
+        <!-- Discord -->
+        <a
+          href="https://discord.com/invite/zQBK97EE22"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Discord"
+        >
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
+            />
+          </svg>
+        </a>
+        <!-- Twitter -->
+        <a
+          href="https://twitter.com/notesnook"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Twitter"
+        >
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M23.953 4.57a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.936 4.936 0 0 0 4.604 3.417 9.867 9.867 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0 0 24 4.59z"
+            />
+          </svg>
+        </a>
+        <!-- Reddit -->
+        <a
+          href="https://reddit.com/r/Notesnook"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Reddit"
+        >
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"
+            />
+          </svg>
+        </a>
+      </div>
+      <p class="promo-text">
+        Use <span class="hashtag">#notesnook</span> and get a chance to win free
+        promo codes.
+      </p>
+    </div>
+  </body>
+</html>