fix(frontend):perf email env (#5323)

* perf: sms env * feat:update email for english
labring · Feb 28, 2025 · 11ccb1d · 11ccb1d
1 parent 288c4fb
commit 11ccb1d
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 89 deletions.
diff --git a/frontend/desktop/src/components/account/AccountCenter/SmsModify/SmsBind.tsx b/frontend/desktop/src/components/account/AccountCenter/SmsModify/SmsBind.tsx
@@ -162,6 +162,7 @@ const smsBindGen = (smsType: SmsType) =>
                   <SettingInputRightElement>
                     {
                       <Link
+                        display={getCodeMutation.isLoading ? 'none' : 'unset'}
                         onClick={getCode}
                         color={'brightBlue.600'}
                         marginY={'auto'}

diff --git a/frontend/desktop/src/components/account/AccountCenter/index.tsx b/frontend/desktop/src/components/account/AccountCenter/index.tsx
@@ -348,7 +348,7 @@ export default function Index(props: Omit<IconButtonProps, 'aria-label'>) {
                       }
                     />
                   )}
-                  {conf.authConfig?.idp.sms.enabled && conf.authConfig.idp.sms.email.enabled && (
+                  {conf.authConfig?.idp.email.enabled && (
                     <ConfigItem
                       LeftElement={<Text>{t('common:email')}</Text>}
                       RightElement={

diff --git a/frontend/desktop/src/pages/api/platform/getAuthConfig.ts b/frontend/desktop/src/pages/api/platform/getAuthConfig.ts
@@ -33,11 +33,11 @@ function genResAuthClientConfig(conf: AuthConfigType) {
         enabled: !!conf.idp.sms?.enabled,
         ali: {
           enabled: !!conf.idp.sms?.ali?.enabled
-        },
-        email: {
-          enabled: !!conf.idp.sms?.email?.enabled
         }
       },
+      email: {
+        enabled: !!conf.idp.email?.enabled
+      },
       github: {
         enabled: !!conf.idp.github?.enabled,
         proxyAddress: conf.idp.github?.proxyAddress || '',

diff --git a/frontend/desktop/src/services/backend/sms.ts b/frontend/desktop/src/services/backend/sms.ts
@@ -9,7 +9,7 @@ import Captcha, * as $Captcha from '@alicloud/captcha20230305';
 import nodemailer from 'nodemailer';
 const getTransporter = () => {
   if (!global.nodemailer) {
-    const emailConfig = global.AppConfig.desktop.auth.idp.sms?.email;
+    const emailConfig = global.AppConfig.desktop.auth.idp.email;
     if (!emailConfig) throw Error('email transporter config error');
     const transporter = nodemailer.createTransport({
       pool: true,
@@ -118,72 +118,87 @@ export const captchaReq = async ({ captchaVerifyParam }: { captchaVerifyParam?:
   }, 3);
 };
 export const emailSmsReq = async (email: string) => {
-  const emailConfig = global.AppConfig.desktop.auth.idp.sms?.email;
+  const emailConfig = global.AppConfig.desktop.auth.idp.email;
   if (!emailConfig) throw Error('config error');
 
   const code = Math.floor(Math.random() * 900000 + 100000).toString();
   const transporter = getTransporter();
+  const language = emailConfig.language === 'zh' ? 'zh' : 'en';
+
+  const getLocalizedContent = (content: string, subject: string, language: 'zh' | 'en') => {
+    return `
+      <!DOCTYPE html>
+      <html lang="${language}">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>${subject}</title>
+          <style>
+              body {
+                  font-family: Arial, sans-serif;
+                  background-color: #f0f0f0;
+              }
+              .container {
+                  max-width: 400px;
+                  margin: 50px auto;
+                  padding: 20px;
+                  background-color: #fff;
+                  border-radius: 5px;
+                  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+              }
+              .verification-code-title {
+                  text-align: center;
+              }
+              .verification-code {
+                  text-align: center;
+                  font-size: 24px;
+                  color: #333;
+                  margin-bottom: 20px;
+              }
+          </style>
+      </head>
+      <body>
+      <div class="container">
+          ${content}
+      </div>
+      </body>
+      </html>
+    `;
+  };
+  const subjectMap = {
+    zh: '【sealos】验证码',
+    en: '【sealos】Verification Code'
+  } as const;
+  const htmlMap = {
+    zh: getLocalizedContent(
+      `
+      <p>尊敬的用户，您正在进行邮箱绑定操作。请输入以下验证码完成验证。</p>
+      <p class="verification-code-title">您的验证码是：</p>
+      <p class="verification-code">${code}</p>
+    `,
+      subjectMap['zh'],
+      'zh'
+    ),
+    en: getLocalizedContent(
+      `
+      <p>Hi, <br>
+      We received a request to link this email to an account. If this was you, please use the code below to confirm your email.</p>
+      <p class="verification-code-title">Your verifcation code:</p>
+      <p class="verification-code">${code}</p>
+      <p>If not, you can ignore this message or contact us for help.</p>
+    `,
+      subjectMap['en'],
+      'en'
+    )
+  } as const;
 
   await retrySerially(
     () =>
       transporter.sendMail({
         from: emailConfig.user,
         to: email,
-        subject: '【sealos】验证码',
-        html: `<!DOCTYPE html>
-			<html lang="en">
-			<head>
-				<meta charset="UTF-8">
-				<meta name="viewport" content="width=device-width, initial-scale=1.0">
-				<title>【sealos】验证码</title>
-				<style>
-					body {
-						font-family: Arial, sans-serif;
-						background-color: #f0f0f0;
-						text-align: center;
-					}
-
-					.container {
-						max-width: 400px;
-						margin: 50px auto;
-						padding: 20px;
-						background-color: #fff;
-						border-radius: 5px;
-						box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-					}
-
-					h2 {
-						color: #3498db;
-					}
-
-					.verification-code {
-						font-size: 24px;
-						color: #333;
-						margin-bottom: 20px;
-					}
-
-					.button {
-						padding: 10px 20px;
-						background-color: #3498db;
-						color: #fff;
-						border: none;
-						border-radius: 5px;
-						cursor: pointer;
-					}
-
-					.button:hover {
-						background-color: #2980b9;
-					}
-				</style>
-			</head>
-			<body>
-			<div class="container">
-				<h2>尊敬的用户，您正在进行邮箱绑定操作。请输入以下验证码完成验证。</h2>
-				<p>您的验证码是：</p>
-				<p class="verification-code">${code}</p>
-			</div>
-			</body>
-			</html>`
+        subject: subjectMap[language],
+        html: htmlMap[language]
       }),
     3
   );

diff --git a/frontend/desktop/src/services/enable.ts b/frontend/desktop/src/services/enable.ts
@@ -7,8 +7,7 @@ export const enableGithub = () => global.AppConfig.desktop.auth.idp.github?.enab
 export const enableSms = () => global.AppConfig.desktop.auth.idp.sms?.enabled || false;
 export const enablePhoneSms = () =>
   enableSms() && !!global.AppConfig.desktop.auth.idp.sms?.ali?.enabled;
-export const enableEmailSms = () =>
-  enableSms() && !!global.AppConfig.desktop.auth.idp.sms?.email?.enabled;
+export const enableEmailSms = () => !!global.AppConfig.desktop.auth.idp.email?.enabled;
 export const enableWechat = () => global.AppConfig.desktop.auth.idp.wechat?.enabled || false;
 export const enableGoogle = () => global.AppConfig.desktop.auth.idp.google?.enabled || false;
 export const enableSignUp = () => global.AppConfig.desktop.auth.signUpEnabled || false;

diff --git a/frontend/desktop/src/types/system.ts b/frontend/desktop/src/types/system.ts
@@ -132,13 +132,14 @@ export type AuthConfigType = {
         accessKeyID: string;
         accessKeySecret?: string;
       };
-      email?: {
-        enabled: boolean;
-        host: string;
-        port: number;
-        user: string;
-        password: string;
-      };
+    };
+    email?: {
+      enabled: boolean;
+      host: string;
+      port: number;
+      user: string;
+      password: string;
+      language?: string;
     };
   };
   captcha?: {
@@ -154,7 +155,19 @@ export type AuthConfigType = {
   };
 };
 
-export type AuthClientConfigType = DeepRequired<
+export type AuthClientConfigType = {
+  idp: {
+    sms: {
+      enabled: boolean;
+      ali: {
+        enabled: boolean;
+      };
+    };
+    email: {
+      enabled: boolean;
+    };
+  };
+} & DeepRequired<
   OmitPathArr<
     AuthConfigType,
     [
@@ -166,8 +179,8 @@ export type AuthClientConfigType = DeepRequired<
       'idp.github.clientSecret',
       'idp.wechat.clientSecret',
       'idp.google.clientSecret',
-      'idp.sms.ali',
-      'idp.sms.email',
+      'idp.sms',
+      'idp.email',
       'idp.oauth2.clientSecret',
       'jwt',
       'billingUrl',
@@ -179,19 +192,7 @@ export type AuthClientConfigType = DeepRequired<
       'captcha.ali.endpoint'
     ]
   >
-> & {
-  idp: {
-    sms: {
-      enabled: boolean;
-      ali: {
-        enabled: boolean;
-      };
-      email: {
-        enabled: boolean;
-      };
-    };
-  };
-};
+>;
 
 export type JwtConfigType = {
   internal?: string;
@@ -313,11 +314,11 @@ export const DefaultAuthClientConfig: AuthClientConfigType = {
       enabled: false,
       ali: {
         enabled: false
-      },
-      email: {
-        enabled: false
       }
     },
+    email: {
+      enabled: false
+    },
     oauth2: {
       enabled: false,
       callbackURL: '',