feat: email login

Author: kermanx

frontend/src/components/SiliconFlowLoginCard.vue

@@ -1,13 +1,36 @@
 <script setup lang="ts">
+import { useScriptTag } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import Captcha from '@/components/Captcha.vue'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
-import { useSiliconFlowStore } from '@/stores'
+import { useSiliconFlowStore, useThemeStore } from '@/stores'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const siliconFlowStore = useSiliconFlowStore()
+const themeStore = useThemeStore()
+
+useScriptTag('http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js')
+
+function wxLogin() {
+  setTimeout(() => {
+    // @ts-expect-error WeChat SDK
+    // eslint-disable-next-line no-new
+    new window.WxLogin({
+      self_redirect: !1,
+      id: 'SF_wx_login_qr_code_f',
+      appid: 'wx637ec58e4e15a258',
+      scope: 'snsapi_login',
+      style: themeStore.isDark ? 'white' : 'black',
+      lang: locale.value === 'zh-CN' ? 'cn' : 'en',
+      // stylelite: 1,
+      // fast_login: 1,
+      redirect_uri: encodeURIComponent('https://account.siliconflow.cn/api/open/weixin'),
+    })
+  }, 500)
+}
 </script>
 
 <template>
@@ -17,11 +40,12 @@ const siliconFlowStore = useSiliconFlowStore()
         {{ t('siliconFlow.loginTitle') }}
       </CardTitle>
       <CardDescription class="text-sm">
-        {{ t('siliconFlow.loginDescription') }}
+        {{ siliconFlowStore.isEmailLogin ? t('siliconFlow.emailLoginDescription') : t('siliconFlow.loginDescription') }}
       </CardDescription>
     </CardHeader>
     <CardContent class="space-y-4">
-      <div class="flex rounded-md border border-input bg-background">
+      <!-- Phone Number Input -->
+      <div v-if="!siliconFlowStore.isEmailLogin" class="flex rounded-md border border-input bg-background">
         <div class="flex items-center px-3 border-r border-input bg-muted/50 rounded-l-md">
           <span class="text-sm font-medium text-muted-foreground">+86</span>
         </div>
@@ -30,21 +54,34 @@ const siliconFlowStore = useSiliconFlowStore()
           class="border-0 rounded-l-none focus-visible:ring-0 focus-visible:ring-offset-0 h-10"
         />
       </div>
+
+      <!-- Email Input -->
+      <div v-if="siliconFlowStore.isEmailLogin" class="flex rounded-md border border-input bg-background">
+        <Input
+          id="email" v-model="siliconFlowStore.email" :placeholder="t('siliconFlow.emailAddressPlaceholder')" type="email"
+          class="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-10"
+        />
+      </div>
+
+      <!-- SMS/Email Code Input -->
       <div class="flex rounded-md border border-input bg-background">
         <Input
-          id="sms" v-model="siliconFlowStore.smsCode" :placeholder="t('siliconFlow.smsCode')" type="text" maxlength="6"
+          id="sms" v-model="siliconFlowStore.smsCode"
+          :placeholder="siliconFlowStore.isEmailLogin ? t('siliconFlow.emailCode') : t('siliconFlow.smsCode')"
+          type="text" maxlength="6"
           class="w-fit flex-grow border-0 rounded-r-none focus-visible:ring-0 focus-visible:ring-offset-0 h-10"
         />
         <div class="border-l border-input">
           <Captcha
-            :enabled="siliconFlowStore.phoneNumber.length > 0" :config="siliconFlowStore.captchaConfig"
+            :enabled="siliconFlowStore.isEmailLogin ? siliconFlowStore.email.length > 0 : siliconFlowStore.phoneNumber.length > 0"
+            :config="siliconFlowStore.captchaConfig"
             class="h-10 px-4 bg-muted/50 rounded-r-md border-0 text-xs text-primary hover:bg-muted/70 transition-colors disabled:opacity-50"
             @next="siliconFlowStore.sendSMS"
           />
         </div>
       </div>
     </CardContent>
-    <CardFooter class="flex flex-col space-y-3 pt-3">
+    <CardFooter class="flex flex-col space-y-3 pt-3 items-start">
       <div class="flex items-center space-x-2 text-xs text-muted-foreground">
         <input id="agree" v-model="siliconFlowStore.agreed" type="checkbox" class="h-3 w-3 rounded border border-input">
         <label for="agree" class="flex items-center gap-1 cursor-pointer">
@@ -60,14 +97,33 @@ const siliconFlowStore = useSiliconFlowStore()
           >{{ t('siliconFlow.privacyPolicy') }}</a>
         </label>
       </div>
-      <Button class="w-full h-10" :disabled="!siliconFlowStore.canLogin" @click="siliconFlowStore.login">
+      <Button class="w-full h-10" :disabled="!siliconFlowStore.canLogin" @click="siliconFlowStore.login()">
         <span v-if="siliconFlowStore.isLoading">{{ t('siliconFlow.loggingIn') }}</span>
         <span v-else>{{ t('siliconFlow.registerLogin') }}</span>
       </Button>
-      <div class="flex items-center space-x-2 text-xs text-muted-foreground">
+      <div class="w-full grid grid-cols-2 gap-3">
+        <Dialog>
+          <DialogTrigger>
+            <Button variant="outline" class="w-full h-10" @click="wxLogin">
+              {{ t('siliconFlow.wechatLogin') }}
+            </Button>
+          </DialogTrigger>
+          <DialogContent class="max-w-sm">
+            <DialogHeader>
+              <DialogTitle>{{ t('siliconFlow.wechatLogin') }}</DialogTitle>
+              <DialogClose />
+            </DialogHeader>
+            <div id="SF_wx_login_qr_code_f" class="w-full flex justify-center" />
+          </DialogContent>
+        </Dialog>
+        <Button variant="outline" class="w-full h-10" @click="siliconFlowStore.isEmailLogin = !siliconFlowStore.isEmailLogin">
+          {{ siliconFlowStore.isEmailLogin ? t('siliconFlow.phoneLogin') : t('siliconFlow.emailLogin') }}
+        </Button>
+      </div>
+      <!-- <div class="flex items-center space-x-2 text-xs text-muted-foreground">
         <input id="keep" v-model="siliconFlowStore.keepLogin" type="checkbox" class="h-3 w-3 rounded border border-input" checked>
         <label for="keep" class="cursor-pointer">{{ t('siliconFlow.keepLoggedIn30Days') }}</label>
-      </div>
+      </div> -->
     </CardFooter>
   </Card>
 </template>

frontend/src/components/ui/tabs/Tabs.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TabsRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TabsRoot
+    data-slot="tabs"
+    v-bind="forwarded"
+    :class="cn('flex flex-col gap-2', props.class)"
+  >
+    <slot />
+  </TabsRoot>
+</template>

frontend/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TabsContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsContent } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

frontend/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TabsListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    v-bind="delegatedProps"
+    :class="cn(
+      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

frontend/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    v-bind="forwardedProps"
+    :class="cn(
+      `data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

frontend/src/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue"
+export { default as TabsContent } from "./TabsContent.vue"
+export { default as TabsList } from "./TabsList.vue"
+export { default as TabsTrigger } from "./TabsTrigger.vue"

frontend/src/locales/en-US.json

@@ -189,8 +189,10 @@
     "logout": "Logout",
     "loginTitle": "Login to SiliconFlow",
     "loginDescription": "Login using phone number and SMS verification code",
+    "emailLoginDescription": "Login using email address and verification code",
     "phoneNumber": "Your phone number",
     "smsCode": "SMS verification code",
+    "emailCode": "Email verification code",
     "agreeToTerms": "I agree to SiliconFlow's",
     "userAgreement": "User Agreement",
     "and": "and",
@@ -266,7 +268,12 @@
     "auth-success": "Verified",
     "not-authenticated": "Not verified",
     "realNameRequired": "Real-name verification required before recharge",
-    "accountRechargeDescription": "Recharge to your SiliconFlow account"
+    "accountRechargeDescription": "Recharge to your SiliconFlow account",
+    "wechatLogin": "WeChat",
+    "emailLogin": "Email Login",
+    "phoneLogin": "Phone Login",
+    "emailAddress": "Email Address",
+    "emailAddressPlaceholder": "Your email address"
   },
   "presets": {
     "preset": "Preset",

frontend/src/locales/zh-CN.json

@@ -189,8 +189,10 @@
     "logout": "退出登录",
     "loginTitle": "登录 硅基流动",
     "loginDescription": "使用手机号码和短信验证码登录",
+    "emailLoginDescription": "使用邮箱地址和验证码登录",
     "phoneNumber": "您的手机号",
     "smsCode": "短信验证码",
+    "emailCode": "邮箱验证码",
     "agreeToTerms": "我同意硅基流动的",
     "userAgreement": "用户协议",
     "and": "和",
@@ -266,7 +268,12 @@
     "auth-success": "已认证",
     "not-authenticated": "未认证",
     "realNameRequired": "实名认证后，才能充值",
-    "accountRechargeDescription": "向硅基流动账户充值"
+    "accountRechargeDescription": "向硅基流动账户充值",
+    "wechatLogin": "微信登录",
+    "emailLogin": "邮箱登录",
+    "phoneLogin": "短信登录",
+    "emailAddress": "邮箱地址",
+    "emailAddressPlaceholder": "您的邮箱地址"
   },
   "presets": {
     "preset": "预设",