✨ Account contacts APIs

💄 Redesign emails
2025-06-08 17:18:23 +08:00 · 2025-06-08 17:18:23 +08:00 · 144b7fcfc2
commit 144b7fcfc2
parent b1faabb07b
18 changed files with 727 additions and 268 deletions
--- a/DysonNetwork.Sphere/Account/Account.cs
+++ b/DysonNetwork.Sphere/Account/Account.cs
@ -90,6 +90,7 @@ public class AccountContact : ModelBase
    public Guid Id { get; set; }
    public AccountContactType Type { get; set; }
    public Instant? VerifiedAt { get; set; }
+    public bool IsPrimary { get; set; } = false;
    [MaxLength(1024)] public string Content { get; set; } = string.Empty;

    public Guid AccountId { get; set; }
--- a/DysonNetwork.Sphere/Account/AccountController.cs
+++ b/DysonNetwork.Sphere/Account/AccountController.cs
@ -97,7 +97,8 @@ public class AccountController(
                new()
                {
                    Type = AccountContactType.Email,
-                    Content = request.Email
+                    Content = request.Email,
+                    IsPrimary = true
                }
            },
            AuthFactors = new List<AccountAuthFactor>
--- a/DysonNetwork.Sphere/Account/AccountCurrentController.cs
+++ b/DysonNetwork.Sphere/Account/AccountCurrentController.cs
@ -558,4 +558,106 @@ public class AccountCurrentController(
            return BadRequest(ex.Message);
        }
    }
+
+    [HttpGet("contacts")]
+    [Authorize]
+    public async Task<ActionResult<List<AccountContact>>> GetContacts()
+    {
+        if (HttpContext.Items["CurrentUser"] is not Account currentUser) return Unauthorized();
+
+        var contacts = await db.AccountContacts
+            .Where(c => c.AccountId == currentUser.Id)
+            .ToListAsync();
+
+        return Ok(contacts);
+    }
+
+    public class AccountContactRequest
+    {
+        [Required] public AccountContactType Type { get; set; }
+        [Required] public string Content { get; set; } = null!;
+    }
+
+    [HttpPost("contacts")]
+    [Authorize]
+    public async Task<ActionResult<AccountContact>> CreateContact([FromBody] AccountContactRequest request)
+    {
+        if (HttpContext.Items["CurrentUser"] is not Account currentUser) return Unauthorized();
+
+        try
+        {
+            var contact = await accounts.CreateContactMethod(currentUser, request.Type, request.Content);
+            return Ok(contact);
+        }
+        catch (Exception ex)
+        {
+            return BadRequest(ex.Message);
+        }
+    }
+
+    [HttpPost("contacts/{id:guid}/verify")]
+    [Authorize]
+    public async Task<ActionResult<AccountContact>> VerifyContact(Guid id)
+    {
+        if (HttpContext.Items["CurrentUser"] is not Account currentUser) return Unauthorized();
+
+        var contact = await db.AccountContacts
+            .Where(c => c.AccountId == currentUser.Id && c.Id == id)
+            .FirstOrDefaultAsync();
+        if (contact is null) return NotFound();
+
+        try
+        {
+            await accounts.VerifyContactMethod(currentUser, contact);
+            return Ok(contact);
+        }
+        catch (Exception ex)
+        {
+            return BadRequest(ex.Message);
+        }
+    }
+
+    [HttpPost("contacts/{id:guid}/primary")]
+    [Authorize]
+    public async Task<ActionResult<AccountContact>> SetPrimaryContact(Guid id)
+    {
+        if (HttpContext.Items["CurrentUser"] is not Account currentUser) return Unauthorized();
+
+        var contact = await db.AccountContacts
+            .Where(c => c.AccountId == currentUser.Id && c.Id == id)
+            .FirstOrDefaultAsync();
+        if (contact is null) return NotFound();
+
+        try
+        {
+            contact = await accounts.SetContactMethodPrimary(currentUser, contact);
+            return Ok(contact);
+        }
+        catch (Exception ex)
+        {
+            return BadRequest(ex.Message);
+        }
+    }
+
+    [HttpDelete("contacts/{id:guid}")]
+    [Authorize]
+    public async Task<ActionResult<AccountContact>> DeleteContact(Guid id)
+    {
+        if (HttpContext.Items["CurrentUser"] is not Account currentUser) return Unauthorized();
+        
+        var contact = await db.AccountContacts
+            .Where(c => c.AccountId == currentUser.Id && c.Id == id)
+            .FirstOrDefaultAsync();
+        if (contact is null) return NotFound();
+
+        try
+        {
+            await accounts.DeleteContactMethod(currentUser, contact);
+            return NoContent();
+        }
+        catch (Exception ex)
+        {
+            return BadRequest(ex.Message);
+        }
+    }
 }
--- a/DysonNetwork.Sphere/Account/AccountService.cs
+++ b/DysonNetwork.Sphere/Account/AccountService.cs
@ -293,7 +293,8 @@ public class AccountService(
            case AccountAuthFactorType.EmailCode:
            case AccountAuthFactorType.InAppCode:
                var correctCode = await _GetFactorCode(factor);
-                var isCorrect = correctCode is not null && string.Equals(correctCode, code, StringComparison.OrdinalIgnoreCase);
+                var isCorrect = correctCode is not null &&
+                                string.Equals(correctCode, code, StringComparison.OrdinalIgnoreCase);
                await cache.RemoveAsync($"{AuthFactorCachePrefix}{factor.Id}:code");
                return isCorrect;
            case AccountAuthFactorType.Password:
@ -323,24 +324,25 @@ public class AccountService(

    public async Task<Session> UpdateSessionLabel(Account account, Guid sessionId, string label)
    {
-         var session = await db.AuthSessions
-             .Include(s => s.Challenge)
-             .Where(s => s.Id == sessionId && s.AccountId == account.Id)
-             .FirstOrDefaultAsync();
-         if (session is null) throw new InvalidOperationException("Session was not found.");
+        var session = await db.AuthSessions
+            .Include(s => s.Challenge)
+            .Where(s => s.Id == sessionId && s.AccountId == account.Id)
+            .FirstOrDefaultAsync();
+        if (session is null) throw new InvalidOperationException("Session was not found.");

-         await db.AuthChallenges
-             .Where(s => s.DeviceId == session.Challenge.DeviceId)
-             .ExecuteUpdateAsync(p => p.SetProperty(s => s.DeviceId, label));
+        await db.AuthSessions
+            .Include(s => s.Challenge)
+            .Where(s => s.Challenge.DeviceId == session.Challenge.DeviceId)
+            .ExecuteUpdateAsync(p => p.SetProperty(s => s.Label, label));

-         var sessions = await db.AuthSessions
-             .Include(s => s.Challenge)
-             .Where(s => s.AccountId == session.Id && s.Challenge.DeviceId == session.Challenge.DeviceId)
-             .ToListAsync();
-         foreach(var item in sessions)
+        var sessions = await db.AuthSessions
+            .Include(s => s.Challenge)
+            .Where(s => s.AccountId == session.Id && s.Challenge.DeviceId == session.Challenge.DeviceId)
+            .ToListAsync();
+        foreach (var item in sessions)
            await cache.RemoveAsync($"{DysonTokenAuthHandler.AuthCachePrefix}{item.Id}");

-         return session;
+        return session;
    }

    public async Task DeleteSession(Account account, Guid sessionId)
@ -369,6 +371,72 @@ public class AccountService(
            await cache.RemoveAsync($"{DysonTokenAuthHandler.AuthCachePrefix}{item.Id}");
    }

+    public async Task<AccountContact> CreateContactMethod(Account account, AccountContactType type, string content)
+    {
+        var contact = new AccountContact
+        {
+            Type = type,
+            Content = content
+        };
+
+        db.AccountContacts.Add(contact);
+        await db.SaveChangesAsync();
+
+        return contact;
+    }
+
+    public async Task VerifyContactMethod(Account account, AccountContact contact)
+    {
+        var spell = await spells.CreateMagicSpell(
+            account,
+            MagicSpellType.ContactVerification,
+            new Dictionary<string, object> { { "contact_method", contact.Content } },
+            expiredAt: SystemClock.Instance.GetCurrentInstant().Plus(Duration.FromHours(24)),
+            preventRepeat: true
+        );
+        await spells.NotifyMagicSpell(spell);
+    }
+
+    public async Task<AccountContact> SetContactMethodPrimary(Account account, AccountContact contact)
+    {
+        if (contact.AccountId != account.Id)
+            throw new InvalidOperationException("Contact method does not belong to this account.");
+        if (contact.VerifiedAt is null)
+            throw new InvalidOperationException("Cannot set unverified contact method as primary.");
+
+        await using var transaction = await db.Database.BeginTransactionAsync();
+
+        try
+        {
+            await db.AccountContacts
+                .Where(c => c.AccountId == account.Id && c.Type == contact.Type)
+                .ExecuteUpdateAsync(s => s.SetProperty(x => x.IsPrimary, false));
+
+            contact.IsPrimary = true;
+            db.AccountContacts.Update(contact);
+            await db.SaveChangesAsync();
+
+            await transaction.CommitAsync();
+            return contact;
+        }
+        catch
+        {
+            await transaction.RollbackAsync();
+            throw;
+        }
+    }
+
+    public async Task DeleteContactMethod(Account account, AccountContact contact)
+    {
+        if (contact.AccountId != account.Id)
+            throw new InvalidOperationException("Contact method does not belong to this account.");
+        if (contact.IsPrimary)
+            throw new InvalidOperationException("Cannot delete primary contact method.");
+
+        db.AccountContacts.Remove(contact);
+        await db.SaveChangesAsync();
+    }
+
    /// Maintenance methods for server administrator
    public async Task EnsureAccountProfileCreated()
    {
--- a/DysonNetwork.Sphere/Account/MagicSpellService.cs
+++ b/DysonNetwork.Sphere/Account/MagicSpellService.cs
@ -86,7 +86,7 @@ public class MagicSpellService(
            {
                case MagicSpellType.AccountActivation:
                    await email.SendTemplatedEmailAsync<LandingEmail, LandingEmailModel>(
-                        contact.Account.Name,
+                        contact.Account.Nick,
                        contact.Content,
                        localizer["EmailLandingTitle"],
                        new LandingEmailModel
@ -98,7 +98,7 @@ public class MagicSpellService(
                    break;
                case MagicSpellType.AccountRemoval:
                    await email.SendTemplatedEmailAsync<AccountDeletionEmail, AccountDeletionEmailModel>(
-                        contact.Account.Name,
+                        contact.Account.Nick,
                        contact.Content,
                        localizer["EmailAccountDeletionTitle"],
                        new AccountDeletionEmailModel
@ -110,7 +110,7 @@ public class MagicSpellService(
                    break;
                case MagicSpellType.AuthPasswordReset:
                    await email.SendTemplatedEmailAsync<PasswordResetEmail, PasswordResetEmailModel>(
-                        contact.Account.Name,
+                        contact.Account.Nick,
                        contact.Content,
                        localizer["EmailAccountDeletionTitle"],
                        new PasswordResetEmailModel
@ -120,6 +120,20 @@ public class MagicSpellService(
                        }
                    );
                    break;
+                case MagicSpellType.ContactVerification:
+                    if (spell.Meta["contact_method"] is not string contactMethod)
+                        throw new InvalidOperationException("Contact method is not found.");
+                    await email.SendTemplatedEmailAsync<ContactVerificationEmail, ContactVerificationEmailModel>(
+                        contact.Account.Nick,
+                        contactMethod!,
+                        localizer["EmailContactVerificationTitle"],
+                        new ContactVerificationEmailModel
+                        {
+                            Name = contact.Account.Name,
+                            Link = link
+                        }
+                    );
+                    break;
                default:
                    throw new ArgumentOutOfRangeException();
            }
@ -142,7 +156,6 @@ public class MagicSpellService(
                var account = await db.Accounts.FirstOrDefaultAsync(c => c.Id == spell.AccountId);
                if (account is null) break;
                db.Accounts.Remove(account);
-                await db.SaveChangesAsync();
                break;
            case MagicSpellType.AccountActivation:
                var contactMethod = spell.Meta["contact_method"] as string;
@ -173,12 +186,24 @@ public class MagicSpellService(
                    });
                }

-                db.Remove(spell);
-                await db.SaveChangesAsync();
+                break;
+            case MagicSpellType.ContactVerification:
+                var verifyContactMethod = spell.Meta["contact_method"] as string;
+                var verifyContact = await db.AccountContacts
+                    .FirstOrDefaultAsync(c => c.Content == verifyContactMethod);
+                if (verifyContact is not null)
+                {
+                    verifyContact.VerifiedAt = SystemClock.Instance.GetCurrentInstant();
+                    db.Update(verifyContact);
+                }
+
                break;
            default:
                throw new ArgumentOutOfRangeException();
        }
+
+        db.Remove(spell);
+        await db.SaveChangesAsync();
    }

    public async Task ApplyPasswordReset(MagicSpell spell, string newPassword)
--- a/DysonNetwork.Sphere/Email/EmailModels.cs
+++ b/DysonNetwork.Sphere/Email/EmailModels.cs
@ -23,3 +23,9 @@ public class VerificationEmailModel
    public required string Name { get; set; }
    public required string Code { get; set; }
 }
+
+public class ContactVerificationEmailModel
+{
+    public required string Name { get; set; }
+    public required string Link { get; set; }
+}
--- a/DysonNetwork.Sphere/Pages/Emails/AccountDeletionEmail.razor
+++ b/DysonNetwork.Sphere/Pages/Emails/AccountDeletionEmail.razor
@ -1,59 +1,37 @@
@using DysonNetwork.Sphere.Localization
@using Microsoft.Extensions.Localization
-@using EmailResource = DysonNetwork.Sphere.Localization.EmailResource

 <EmailLayout>
-    <table class="container">
-        <tr>
-            <td class="columns">
-                <h1 style="font-size: 1.875rem; font-weight: 700; color: #111827; margin: 0; text-align: center;">
-                    @(Localizer["AccountDeletionHeader"])
-                </h1>
-            </td>
-        </tr>
+    <tr>
+        <td class="wrapper">
+            <p class="font-bold">@(Localizer["AccountDeletionHeader"])</p>
+            <p>@(Localizer["AccountDeletionPara1"]) @@@Name,</p>
+            <p>@(Localizer["AccountDeletionPara2"])</p>
+            <p>@(Localizer["AccountDeletionPara3"])</p>

-        <tr>
-            <td class="columns">
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["AccountDeletionPara1"]) @@@Name,
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["AccountDeletionPara2"])
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["AccountDeletionPara3"])
-                </p>
-            </td>
-        </tr>
+            <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
+                <tbody>
+                <tr>
+                    <td align="left">
+                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                            <tbody>
+                            <tr>
+                                <td>
+                                    <a href="@Link" target="_blank">
+                                        @(Localizer["AccountDeletionButton"])
+                                    </a>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+                </tbody>
+            </table>

-        <tr>
-            <td class="columns">
-                <div style="text-align: center;">
-                    <a href="@Link" target="_blank"
-                       style="background-color: #2563eb; color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none;">
-                        @(Localizer["AccountDeletionButton"])
-                    </a>
-                </div>
-            </td>
-        </tr>
-
-        <tr>
-            <td class="columns">
-                <p style="color: #374151; margin: 0;">
-                    @(LocalizerShared["EmailLinkHint"])
-                    <br>
-                    <a href="@Link" style="color: #2563eb; word-break: break-all;">@Link</a>
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["AccountDeletionPara4"])
-                </p>
-                <p style="color: #374151; margin: 2rem 0 0 0;">
-                    @(LocalizerShared["EmailFooter1"]) <br />
-                    @(LocalizerShared["EmailFooter2"])
-                </p>
-            </td>
-        </tr>
-    </table>
+            <p>@(Localizer["AccountDeletionPara4"])</p>
+        </td>
+    </tr>
 </EmailLayout>

@code {
@ -61,5 +39,4 @@
    [Parameter] public required string Link { get; set; }

    [Inject] IStringLocalizer<EmailResource> Localizer { get; set; } = null!;
-    [Inject] IStringLocalizer<SharedResource> LocalizerShared { get; set; } = null!;
 }
--- a/DysonNetwork.Sphere/Pages/Emails/ContactVerificationEmail.razor
+++ b/DysonNetwork.Sphere/Pages/Emails/ContactVerificationEmail.razor
@ -0,0 +1,43 @@
+@using DysonNetwork.Sphere.Localization
+@using Microsoft.Extensions.Localization
+@using EmailResource = DysonNetwork.Sphere.Localization.EmailResource
+
+<EmailLayout>
+    <tr>
+        <td class="wrapper">
+            <p class="font-bold">@(Localizer["ContactVerificationHeader"])</p>
+            <p>@(Localizer["ContactVerificationPara1"]) @Name,</p>
+            <p>@(Localizer["ContactVerificationPara2"])</p>
+
+            <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
+                <tbody>
+                <tr>
+                    <td align="left">
+                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                            <tbody>
+                            <tr>
+                                <td>
+                                    <a href="@Link" target="_blank">
+                                        @(Localizer["ContactVerificationButton"])
+                                    </a>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+            <p>@(Localizer["ContactVerificationPara3"])</p>
+            <p>@(Localizer["ContactVerificationPara4"])</p>
+        </td>
+    </tr>
+</EmailLayout>
+
+@code {
+    [Parameter] public required string Name { get; set; }
+    [Parameter] public required string Link { get; set; }
+
+    [Inject] IStringLocalizer<EmailResource> Localizer { get; set; } = null!;
+}
--- a/DysonNetwork.Sphere/Pages/Emails/EmailLayout.razor
+++ b/DysonNetwork.Sphere/Pages/Emails/EmailLayout.razor
@ -1,24 +1,332 @@
@inherits LayoutComponentBase

-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="https://www.w3.org/1999/xhtml">
+<!doctype html>
+<html lang="en">
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <meta name="viewport" content="width=device-width"/>
-    <link rel="stylesheet" href="https://unpkg.com/foundation-emails@2.4.0/dist/foundation-emails.min.css">
-    <style type="text/css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <style media="all" type="text/css">
+        body {
+            font-family: Helvetica, sans-serif;
+            -webkit-font-smoothing: antialiased;
+            font-size: 16px;
+            line-height: 1.3;
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        table {
+            border-collapse: separate;
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+            width: 100%;
+        }
+
+        table td {
+            font-family: Helvetica, sans-serif;
+            font-size: 16px;
+            vertical-align: top;
+        }
+
+        body {
+            background-color: #f4f5f6;
+            margin: 0;
+            padding: 0;
+        }
+
+        .body {
+            background-color: #f4f5f6;
+            width: 100%;
+        }
+
        .container {
-            padding: 2rem 1rem;
+            margin: 0 auto !important;
+            max-width: 600px;
+            padding: 0;
+            padding-top: 24px;
+            width: 600px;
+        }
+
+        .content {
+            box-sizing: border-box;
+            display: block;
+            margin: 0 auto;
+            max-width: 600px;
+            padding: 0;
+        }
+
+        .main {
+            background: #ffffff;
+            border: 1px solid #eaebed;
+            border-radius: 16px;
+            width: 100%;
+        }
+
+        .wrapper {
+            box-sizing: border-box;
+            padding: 24px;
+        }
+
+        .footer {
+            clear: both;
+            padding-top: 24px;
+            text-align: center;
+            width: 100%;
+        }
+
+        .footer td,
+        .footer p,
+        .footer span,
+        .footer a {
+            color: #9a9ea6;
+            font-size: 16px;
+            text-align: center;
+        }
+
+        p {
+            font-family: Helvetica, sans-serif;
+            font-size: 16px;
+            font-weight: normal;
+            margin: 0;
+            margin-bottom: 16px;
+        }
+
+        a {
+            color: #0867ec;
+            text-decoration: underline;
+        }
+
+        .btn {
+            box-sizing: border-box;
+            min-width: 100% !important;
+            width: 100%;
+        }
+
+        .btn > tbody > tr > td {
+            padding-bottom: 16px;
+        }
+
+        .btn table {
+            width: auto;
+        }
+
+        .btn table td {
+            background-color: #ffffff;
+            border-radius: 4px;
+            text-align: center;
+        }
+
+        .btn a {
+            background-color: #ffffff;
+            border: solid 2px #0867ec;
+            border-radius: 4px;
+            box-sizing: border-box;
+            color: #0867ec;
+            cursor: pointer;
+            display: inline-block;
+            font-size: 16px;
+            font-weight: bold;
+            margin: 0;
+            padding: 12px 24px;
+            text-decoration: none;
+            text-transform: capitalize;
+        }
+
+        .btn-primary table td {
+            background-color: #0867ec;
+        }
+
+        .btn-primary a {
+            background-color: #0867ec;
+            border-color: #0867ec;
+            color: #ffffff;
+        }
+        
+        .font-bold {
+            font-weight: bold;
+        }
+        
+        .verification-code
+        {
+            font-family: "Courier New", Courier, monospace;
+            font-size: 24px;
+            letter-spacing: 0.5em;
+        }
+
+        @@media all {
+            .btn-primary table td:hover {
+                background-color: #ec0867 !important;
+            }
+
+            .btn-primary a:hover {
+                background-color: #ec0867 !important;
+                border-color: #ec0867 !important;
+            }
+        }
+
+        .last {
+            margin-bottom: 0;
+        }
+
+        .first {
+            margin-top: 0;
+        }
+
+        .align-center {
+            text-align: center;
+        }
+
+        .align-right {
+            text-align: right;
+        }
+
+        .align-left {
+            text-align: left;
+        }
+
+        .text-link {
+            color: #0867ec !important;
+            text-decoration: underline !important;
+        }
+
+        .clear {
+            clear: both;
+        }
+
+        .mt0 {
+            margin-top: 0;
+        }
+
+        .mb0 {
+            margin-bottom: 0;
+        }
+
+        .preheader {
+            color: transparent;
+            display: none;
+            height: 0;
+            max-height: 0;
+            max-width: 0;
+            opacity: 0;
+            overflow: hidden;
+            mso-hide: all;
+            visibility: hidden;
+            width: 0;
+        }
+
+        .powered-by a {
+            text-decoration: none;
+        }
+
+        @@media only screen and (max-width: 640px) {
+            .main p,
+            .main td,
+            .main span {
+                font-size: 16px !important;
+            }
+
+            .wrapper {
+                padding: 8px !important;
+            }
+
+            .content {
+                padding: 0 !important;
+            }
+
+            .container {
+                padding: 0 !important;
+                padding-top: 8px !important;
+                width: 100% !important;
+            }
+
+            .main {
+                border-left-width: 0 !important;
+                border-radius: 0 !important;
+                border-right-width: 0 !important;
+            }
+
+            .btn table {
+                max-width: 100% !important;
+                width: 100% !important;
+            }
+
+            .btn a {
+                font-size: 16px !important;
+                max-width: 100% !important;
+                width: 100% !important;
+            }
+        }
+
+        @@media all {
+            .ExternalClass {
+                width: 100%;
+            }
+
+            .ExternalClass,
+            .ExternalClass p,
+            .ExternalClass span,
+            .ExternalClass font,
+            .ExternalClass td,
+            .ExternalClass div {
+                line-height: 100%;
+            }
+
+            .apple-link a {
+                color: inherit !important;
+                font-family: inherit !important;
+                font-size: inherit !important;
+                font-weight: inherit !important;
+                line-height: inherit !important;
+                text-decoration: none !important;
+            }
+
+            #MessageViewBody a {
+                color: inherit;
+                text-decoration: none;
+                font-size: inherit;
+                font-family: inherit;
+                font-weight: inherit;
+                line-height: inherit;
+            }
        }
    </style>
 </head>
-
 <body>
-<table class="body">
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
    <tr>
-        <td class="float-center" align="center" valign="top" style="padding: 2rem 1rem;">
-            @ChildContent
+        <td>&nbsp;</td>
+        <td class="container">
+            <div class="content">
+
+                <!-- START CENTERED WHITE CONTAINER -->
+                <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main">
+                    <!-- START MAIN CONTENT AREA -->
+                    @ChildContent
+                    <!-- END MAIN CONTENT AREA -->
+                </table>
+
+                <!-- START FOOTER -->
+                <div class="footer">
+                    <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                        <tr>
+                            <td class="content-block">
+                                <span class="apple-link">Solar Network</span>
+                                <br> Solsynth LLC © @(DateTime.Now.Year)
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="content-block powered-by">
+                                Powered by <a href="https://github.com/solsynth/dysonnetwork">Dyson Network</a>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+
+                <!-- END FOOTER -->
+
+                <!-- END CENTERED WHITE CONTAINER --></div>
        </td>
+        <td>&nbsp;</td>
    </tr>
 </table>
 </body>
--- a/DysonNetwork.Sphere/Pages/Emails/LandingEmail.razor
+++ b/DysonNetwork.Sphere/Pages/Emails/LandingEmail.razor
@ -3,57 +3,36 @@
@using EmailResource = DysonNetwork.Sphere.Localization.EmailResource

 <EmailLayout>
-    <table class="container">
-        <tr>
-            <td class="columns">
-                <h1 style="font-size: 1.875rem; font-weight: 700; color: #111827; margin: 0; text-align: center;">
-                    @(Localizer["LandingHeader1"])
-                </h1>
-            </td>
-        </tr>
+    <tr>
+        <td class="wrapper">
+            <p class="font-bold">@(Localizer["LandingHeader1"])</p>
+            <p>@(Localizer["LandingPara1"]) @@@Name,</p>
+            <p>@(Localizer["LandingPara2"])</p>
+            <p>@(Localizer["LandingPara3"])</p>

-        <tr>
-            <td class="columns">
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["LandingPara1"]) @@@Name,
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["LandingPara2"])
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["LandingPara3"])
-                </p>
-            </td>
-        </tr>
+            <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
+                <tbody>
+                <tr>
+                    <td align="left">
+                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                            <tbody>
+                            <tr>
+                                <td>
+                                    <a href="@Link" target="_blank">
+                                        @(Localizer["LandingButton1"])
+                                    </a>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+                </tbody>
+            </table>

-        <tr>
-            <td class="columns">
-                <div style="text-align: center;">
-                    <a href="@Link" target="_blank"
-                       style="background-color: #2563eb; color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none;">
-                        @(Localizer["LandingButton1"])
-                    </a>
-                </div>
-            </td>
-        </tr>
-
-        <tr>
-            <td class="columns">
-                <p style="color: #374151; margin: 0;">
-                    @(LocalizerShared["EmailLinkHint"])
-                    <br>
-                    <a href="@Link" style="color: #2563eb; word-break: break-all;">@Link</a>
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["LandingPara4"])
-                </p>
-                <p style="color: #374151; margin: 2rem 0 0 0;">
-                    @(LocalizerShared["EmailFooter1"]) <br />
-                    @(LocalizerShared["EmailFooter2"])
-                </p>
-            </td>
-        </tr>
-    </table>
+            <p>@(Localizer["LandingPara4"])</p>
+        </td>
+    </tr>
 </EmailLayout>

@code {
@ -61,5 +40,4 @@
    [Parameter] public required string Link { get; set; }

    [Inject] IStringLocalizer<EmailResource> Localizer { get; set; } = null!;
-    [Inject] IStringLocalizer<SharedResource> LocalizerShared { get; set; } = null!;
 }
--- a/DysonNetwork.Sphere/Pages/Emails/PasswordResetEmail.razor
+++ b/DysonNetwork.Sphere/Pages/Emails/PasswordResetEmail.razor
@ -3,57 +3,36 @@
@using EmailResource = DysonNetwork.Sphere.Localization.EmailResource

 <EmailLayout>
-    <table class="container">
-        <tr>
-            <td class="columns">
-                <h1 style="font-size: 1.875rem; font-weight: 700; color: #111827; margin: 0; text-align: center;">
-                    @(Localizer["PasswordResetHeader"])
-                </h1>
-            </td>
-        </tr>
+    <tr>
+        <td class="wrapper">
+            <p class="font-bold">@(Localizer["PasswordResetHeader"])</p>
+            <p>@(Localizer["PasswordResetPara1"]) @@@Name,</p>
+            <p>@(Localizer["PasswordResetPara2"])</p>
+            <p>@(Localizer["PasswordResetPara3"])</p>

-        <tr>
-            <td class="columns">
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["PasswordResetPara1"]) @@@Name,
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["PasswordResetPara2"])
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["PasswordResetPara3"])
-                </p>
-            </td>
-        </tr>
+            <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
+                <tbody>
+                <tr>
+                    <td align="left">
+                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                            <tbody>
+                            <tr>
+                                <td>
+                                    <a href="@Link" target="_blank">
+                                        @(Localizer["PasswordResetButton"])
+                                    </a>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+                </tbody>
+            </table>

-        <tr>
-            <td class="columns">
-                <div style="text-align: center;">
-                    <a href="@Link" target="_blank"
-                       style="background-color: #2563eb; color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none;">
-                        @(Localizer["PasswordResetButton"])
-                    </a>
-                </div>
-            </td>
-        </tr>
-
-        <tr>
-            <td class="columns">
-                <p style="color: #374151; margin: 0;">
-                    @(LocalizerShared["EmailLinkHint"])
-                    <br>
-                    <a href="@Link" style="color: #2563eb; word-break: break-all;">@Link</a>
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["PasswordResetPara4"])
-                </p>
-                <p style="color: #374151; margin: 2rem 0 0 0;">
-                    @(LocalizerShared["EmailFooter1"]) <br />
-                    @(LocalizerShared["EmailFooter2"])
-                </p>
-            </td>
-        </tr>
-    </table>
+            <p>@(Localizer["PasswordResetPara4"])</p>
+        </td>
+    </tr>
 </EmailLayout>

@code {
--- a/DysonNetwork.Sphere/Pages/Emails/VerificationEmail.razor
+++ b/DysonNetwork.Sphere/Pages/Emails/VerificationEmail.razor
@ -3,54 +3,19 @@
@using EmailResource = DysonNetwork.Sphere.Localization.EmailResource

 <EmailLayout>
-    <table class="container">
-        <tr>
-            <td class="columns">
-                <h1 style="font-size: 1.875rem; font-weight: 700; color: #111827; margin: 0; text-align: center;">
-                    @(Localizer["VerificationHeader1"])
-                </h1>
-            </td>
-        </tr>
+    <tr>
+        <td class="wrapper">
+            <p class="font-bold">@(Localizer["VerificationHeader1"])</p>
+            <p>@(Localizer["VerificationPara1"]) @@@Name,</p>
+            <p>@(Localizer["VerificationPara2"])</p>
+            <p>@(Localizer["VerificationPara3"])</p>

-        <tr>
-            <td class="columns">
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["VerificationPara1"]) @Name,
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["VerificationPara2"])
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["VerificationPara3"])
-                </p>
-            </td>
-        </tr>
+            <p class="verification-code">@Code</p>

-        <tr>
-            <td class="columns">
-                <div style="text-align: center;">
-                    <div style="background-color: #f3f4f6; padding: 1rem; border-radius: 0.5rem; display: inline-block; margin: 1rem 0;">
-                        <span style="font-size: 1.5rem; font-weight: 600; color: #111827; letter-spacing: 0.1em;">@Code</span>
-                    </div>
-                </div>
-            </td>
-        </tr>
-
-        <tr>
-            <td class="columns">
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["VerificationPara4"])
-                </p>
-                <p style="color: #374151; margin: 0;">
-                    @(Localizer["VerificationPara5"])
-                </p>
-                <p style="color: #374151; margin: 2rem 0 0 0;">
-                    @(LocalizerShared["EmailFooter1"]) <br />
-                    @(LocalizerShared["EmailFooter2"])
-                </p>
-            </td>
-        </tr>
-    </table>
+            <p>@(Localizer["VerificationPara4"])</p>
+            <p>@(Localizer["VerificationPara5"])</p>
+        </td>
+    </tr>
 </EmailLayout>

@code {
--- a/DysonNetwork.Sphere/Resources/Localization/EmailResource.resx
+++ b/DysonNetwork.Sphere/Resources/Localization/EmailResource.resx
@ -102,4 +102,25 @@
    <data name="EmailVerificationTitle" xml:space="preserve">
        <value>Verify your email address</value>
    </data>
+    <data name="ContactVerificationHeader" xml:space="preserve">
+        <value>Verify Your Contact Information</value>
+    </data>
+    <data name="ContactVerificationPara1" xml:space="preserve">
+        <value>Dear, </value>
+    </data>
+    <data name="ContactVerificationPara2" xml:space="preserve">
+        <value>Thank you for updating your contact information on the Solar Network. To ensure your account security, we need to verify this change.</value>
+    </data>
+    <data name="ContactVerificationPara3" xml:space="preserve">
+        <value>Please click the button below to verify your contact information:</value>
+    </data>
+    <data name="ContactVerificationButton" xml:space="preserve">
+        <value>Verify Contact Information</value>
+    </data>
+    <data name="ContactVerificationPara4" xml:space="preserve">
+        <value>If you didn't request this change, please contact our support team immediately.</value>
+    </data>
+    <data name="EmailContactVerificationTitle" xml:space="preserve">
+        <value>Verify your contact information</value>
+    </data>
 </root>
--- a/DysonNetwork.Sphere/Resources/Localization/EmailResource.zh-hans.resx
+++ b/DysonNetwork.Sphere/Resources/Localization/EmailResource.zh-hans.resx
@ -95,4 +95,25 @@
    <data name="EmailVerificationTitle" xml:space="preserve">
        <value>验证您的电子邮箱</value>
    </data>
+    <data name="ContactVerificationHeader" xml:space="preserve">
+        <value>验证您的联系信息</value>
+    </data>
+    <data name="ContactVerificationPara1" xml:space="preserve">
+        <value>尊敬的 </value>
+    </data>
+    <data name="ContactVerificationPara2" xml:space="preserve">
+        <value>感谢您更新 Solar Network 上的联系信息。为确保您的账户安全，我们需要验证此更改。</value>
+    </data>
+    <data name="ContactVerificationPara3" xml:space="preserve">
+        <value>请点击下方按钮验证您的联系信息：</value>
+    </data>
+    <data name="ContactVerificationButton" xml:space="preserve">
+        <value>验证联系信息</value>
+    </data>
+    <data name="ContactVerificationPara4" xml:space="preserve">
+        <value>如果您没有请求此更改，请立即联系我们的支持团队。</value>
+    </data>
+    <data name="EmailContactVerificationTitle" xml:space="preserve">
+        <value>验证您的联系信息</value>
+    </data>
 </root>
--- a/DysonNetwork.Sphere/Resources/Localization/SharedResource.Designer.cs
+++ b/DysonNetwork.Sphere/Resources/Localization/SharedResource.Designer.cs
@ -44,23 +44,5 @@ namespace DysonNetwork.Sphere.Resources {
                resourceCulture = value;
            }
        }
-        
-        internal static string EmailLinkHint {
-            get {
-                return ResourceManager.GetString("EmailLinkHint", resourceCulture);
-            }
-        }
-        
-        internal static string EmailFooter1 {
-            get {
-                return ResourceManager.GetString("EmailFooter1", resourceCulture);
-            }
-        }
-        
-        internal static string EmailFooter2 {
-            get {
-                return ResourceManager.GetString("EmailFooter2", resourceCulture);
-            }
-        }
    }
 }
--- a/DysonNetwork.Sphere/Resources/Localization/SharedResource.resx
+++ b/DysonNetwork.Sphere/Resources/Localization/SharedResource.resx
@ -18,13 +18,4 @@
    <resheader name="writer">
        <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
    </resheader>
-    <data name="EmailLinkHint" xml:space="preserve">
-        <value>If the button doesn't work, you can also copy and paste this link into your browser:</value>
-    </data>
-    <data name="EmailFooter1" xml:space="preserve">
-        <value>Best regards,</value>
-    </data>
-    <data name="EmailFooter2" xml:space="preserve">
-        <value>The Solar Network Team</value>
-    </data>
 </root>
--- a/DysonNetwork.Sphere/Resources/Localization/SharedResource.zh-hans.resx
+++ b/DysonNetwork.Sphere/Resources/Localization/SharedResource.zh-hans.resx
@ -11,13 +11,4 @@
    <resheader name="writer">
        <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
    </resheader>
-    <data name="EmailFooter1" xml:space="preserve">
-        <value>此致</value>
-    </data>
-    <data name="EmailFooter2" xml:space="preserve">
-        <value>Solar Network 团队</value>
-    </data>
-    <data name="EmailLinkHint" xml:space="preserve">
-        <value>如果上方的按钮不起作用，你也可以复制下面的链接到浏览器。</value>
-    </data>
 </root>
--- a/DysonNetwork.sln.DotSettings.user
+++ b/DysonNetwork.sln.DotSettings.user
@ -107,7 +107,7 @@
 	<s:Boolean x:Key="/Default/ResxEditorPersonal/CheckedGroups/=DysonNetwork_002ESphere_002FResources_002FLocalization_002FEmail_002ELandingResource/@EntryIndexedValue">False</s:Boolean>
 	<s:Boolean x:Key="/Default/ResxEditorPersonal/CheckedGroups/=DysonNetwork_002ESphere_002FResources_002FLocalization_002FEmails_002FEmail_002ELandingResource/@EntryIndexRemoved">True</s:Boolean>
 	<s:Boolean x:Key="/Default/ResxEditorPersonal/CheckedGroups/=DysonNetwork_002ESphere_002FResources_002FLocalization_002FEmail_002ELandingResource/@EntryIndexRemoved">True</s:Boolean>
-	<s:Boolean x:Key="/Default/ResxEditorPersonal/CheckedGroups/=DysonNetwork_002ESphere_002FResources_002FLocalization_002FEmailResource/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/ResxEditorPersonal/CheckedGroups/=DysonNetwork_002ESphere_002FResources_002FLocalization_002FEmailResource/@EntryIndexedValue">False</s:Boolean>
 	<s:Boolean x:Key="/Default/ResxEditorPersonal/CheckedGroups/=DysonNetwork_002ESphere_002FResources_002FLocalization_002FNotificationResource/@EntryIndexedValue">False</s:Boolean>