From a8773d37125efa2f06225bb2226fa916d8026433 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Thu, 23 Feb 2023 17:01:54 +0800
Subject: [PATCH] feat: widget login with name and email

---
 public/widget.js                 |  2 +-
 src/app/services/auth.ts         |  3 +-
 src/types/user.ts                |  9 +++++
 src/widget/Popup/Login/index.tsx | 56 +++++++++++++++++++++++++++++---
 src/widget/WidgetContext.tsx     |  5 +--
 5 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/public/widget.js b/public/widget.js
index 168be6e3..59ee2624 100644
--- a/public/widget.js
+++ b/public/widget.js
@@ -20,7 +20,7 @@ const styles = {
 Object.assign(wrapper.style, styles);
 wrapper.src = `${new URL(_src).origin}/widget.html?host=${hostId}&themeColor=${encodeURIComponent(
   themeColor
-)}`;
+)}&from=${encodeURIComponent(location.host)}`;
 wrapper.width = closeWidth;
 wrapper.height = closeHeight;
 wrapper.frameborder = 0;
diff --git a/src/app/services/auth.ts b/src/app/services/auth.ts
index 7b10a19b..e888dca3 100644
--- a/src/app/services/auth.ts
+++ b/src/app/services/auth.ts
@@ -10,6 +10,7 @@ import {
   RenewTokenDTO,
   RenewTokenResponse
 } from "../../types/auth";
+import { UserRegDTO, UserRegResponse } from "../../types/user";
 
 const getDeviceId = () => {
   let d = localStorage.getItem(KEY_DEVICE_ID);
@@ -73,7 +74,7 @@ export const authApi = createApi({
         }
       }
     }),
-    register: builder.mutation<any, any>({
+    register: builder.mutation<UserRegResponse, UserRegDTO>({
       query: (data) => ({
         url: `user/register`,
         method: "POST",
diff --git a/src/types/user.ts b/src/types/user.ts
index 970a4b84..fbdcde40 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -1,3 +1,5 @@
+import { AuthToken } from "./auth";
+
 export type Gender = 0 | 1;
 
 export interface AutoDeleteMsgDTO {
@@ -46,3 +48,10 @@ export interface UserDTO extends Partial<Pick<User, "name" | "gender" | "languag
 export interface UserCreateDTO extends Pick<User, "name" | "gender" | "language" | "email" | "webhook_url" | "is_bot" | "is_admin"> {
   password: string;
 }
+export interface UserRegDTO extends Pick<User, "name" | "gender" | "language" | "email">, Pick<UserDevice, "device" | "device_token"> {
+  password: string;
+  magic_token?: string
+}
+export interface UserRegResponse extends AuthToken {
+  user: User
+}
diff --git a/src/widget/Popup/Login/index.tsx b/src/widget/Popup/Login/index.tsx
index 048ac291..cbd18ce1 100644
--- a/src/widget/Popup/Login/index.tsx
+++ b/src/widget/Popup/Login/index.tsx
@@ -1,18 +1,56 @@
 // import React from 'react'
+import clsx from 'clsx';
+import { FormEvent, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { useRegisterMutation } from '../../../app/services/auth';
 import { useGetLoginConfigQuery } from '../../../app/services/server';
+import { setAuthData } from '../../../app/slices/auth.data';
+import Divider from '../../../common/component/Divider';
 import GithubLoginButton from '../../../common/component/GithubLoginButton';
 import GoogleLoginButton from '../../../common/component/GoogleLoginButton';
+import StyledButton from '../../../common/component/styled/Button';
+import Input from '../../../common/component/styled/Input';
 import useGithubAuthConfig from '../../../common/hook/useGithubAuthConfig';
 import useGoogleAuthConfig from '../../../common/hook/useGoogleAuthConfig';
+import { useWidget } from '../../WidgetContext';
 
 // type Props = {}
 
 const Login = () => {
+    const dispatch = useDispatch();
+    const { color, fgColor, from } = useWidget();
     const { clientId } = useGoogleAuthConfig();
     const { config: githubAuthConfig } = useGithubAuthConfig();
-
+    const [register, { isLoading, isSuccess, data }] = useRegisterMutation();
     const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
-    if (!loginConfigSuccess) return <span className="text-xs text-gray-500">checking...</span>;
+    const handleSubmit = (evt: FormEvent<HTMLFormElement>) => {
+        evt.preventDefault();
+        const form = evt.currentTarget;
+        // 检查格式
+        if (!form?.checkValidity()) {
+            form?.reportValidity();
+            return;
+        }
+        const data = new FormData(form);
+        const name = data.get("username") as string;
+        const email = data.get("email") as string;
+        console.log("name,email", name, email);
+        register({
+            name: `${name}-[${from}]`,
+            email,
+            password: email,
+            gender: 0,
+            device: "unknown"
+        });
+        // const content = new FormData(form).get("prompt") as string;
+    };
+    useEffect(() => {
+        if (isSuccess && data) {
+            dispatch(setAuthData(data));
+        }
+    }, [isSuccess, data]);
+
+    if (!loginConfigSuccess) return null;
 
     const {
         github: enableGithubLogin,
@@ -20,9 +58,17 @@ const Login = () => {
     } = loginConfig;
     const googleLogin = enableGoogleLogin && clientId;
     return (
-        <div className="w-60 flex flex-col gap-2 mt-4">
-            {googleLogin && <GoogleLoginButton clientId={clientId} />}
-            {enableGithubLogin && <GithubLoginButton client_id={githubAuthConfig?.client_id} source="widget" />}
+        <div className="w-72 flex flex-col gap-2 mt-4 animate-[fadeInUp_.5s_.8s_ease-in-out_both]">
+            <div className="bg-white dark:bg-gray-700 border dark:border-gray-500 rounded-lg">
+                <form className="px-4 py-3 flex flex-col gap-2" onSubmit={handleSubmit}>
+                    <Input required placeholder="Name" name='username' />
+                    <Input required placeholder="Email" type="email" name='email' />
+                    <StyledButton disabled={isLoading} type="submit" className={clsx("small", `bg-[${color}] text-[${fgColor}]`)}>Start Chat</StyledButton>
+                    <Divider content='OR' />
+                    {googleLogin && <GoogleLoginButton clientId={clientId} />}
+                    {enableGithubLogin && <GithubLoginButton client_id={githubAuthConfig?.client_id} source="widget" />}
+                </form>
+            </div>
         </div>
     );
 };
diff --git a/src/widget/WidgetContext.tsx b/src/widget/WidgetContext.tsx
index 798d2407..15cceb09 100644
--- a/src/widget/WidgetContext.tsx
+++ b/src/widget/WidgetContext.tsx
@@ -2,15 +2,16 @@ import { createContext, useContext, ReactNode } from 'react';
 import { getContrastColor } from '../common/utils';
 
 const color = decodeURIComponent(new URLSearchParams(location.search).get("themeColor") || "#1fe1f9");
+const from = decodeURIComponent(new URLSearchParams(location.search).get("from") || "widget");
 const fgColor = getContrastColor(color);
 // 判断是否是iframe上下文
 const embed = window.location !== window.parent.location;
-const WidgetContext = createContext({ color, fgColor, embed });
+const WidgetContext = createContext({ color, fgColor, embed, from });
 
 
 function WidgetProvider({ children }: { children: ReactNode }) {
 
-    return <WidgetContext.Provider value={{ color, fgColor, embed }} >{children}</WidgetContext.Provider>;
+    return <WidgetContext.Provider value={{ color, fgColor, embed, from }} >{children}</WidgetContext.Provider>;
 }
 
 function useWidget() {