Merge pull request #35 from Callgent/confirm-email

feat: email registration

README.md

@@ -25,31 +25,30 @@ This is the portal website of [Callgent](https://callgent.com), gratefully forke
 1. "node": ">=18.17.0"
 2. checkout the repository:
 
-    ```bash
-    
-    ```
-    
+   ```bash
+
+   ```
+
 3. rename `.env.example` to `.env`
 4. Start the Service
 
-    - Development Environment
+   - Development Environment
 
-        ```bash
-        # Modify the API_SITE_URL on line 7 of your package.json file to set your development server.
-        npm i -g pnpm
-        pnpm install
-        pnpm run start
-        ```
+     ```bash
+     # Modify the API_SITE_URL on line 7 of your package.json file to set your development server.
+     npm i -g pnpm
+     pnpm install
+     pnpm run start
+     ```
 
-    - Production Environment
+   - Production Environment
 
-        ```bash
-        # Modify the API_SITE_URL in your .env file to set your production environment server.
-        pnpm install
-        pnpm run build
-        pnpm run serve
-        ```
-
+     ```bash
+     # Modify the API_SITE_URL in your .env file to set your production environment server.
+     pnpm install
+     pnpm run build
+     pnpm run serve
+     ```
 
 ## Contributing
 

docs/advanced-topics/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Advanced Topics",
-  "position": 3,
+  "position": 4,
   "link": {
     "type": "generated-index"
   }

docs/developers/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Developers Guide",
-  "position": 4,
+  "position": 5,
   "link": {
     "type": "generated-index",
     "description": "Service as a Callable Agent. Encapsulate every user and system service the same way as a Callgent, seamlessly integrate them anywhere."

docs/quick-start/call-the-callgent.mdx

@@ -7,7 +7,7 @@ tags: [Demo, Getting started]
 # Call the Callgent
 
 import App from "@site/docs/app"
-import CreateCallgent from "./components/CreateCallgent"
+import CreateCallgent from "./components/create-callgent"
 import Email from "./components/email"
 import RestApi from "./components/restApi"
 

docs/quick-start/components/CreateCallgent.tsx → docs/quick-start/components/create-callgent.tsx

@@ -53,7 +53,7 @@ const CreateCallgent = () => {
                 <div className={styles.modalContent} onClick={handleContentClick}>
                     <p>
                         Please&nbsp;
-                        <a href={siteConfig.url + "/en/signin?redirect=/docs/quick-start/create-a-new-callgent"}>Sign In</a>
+                        <a href={"/docs/quick-start/register-an-account"}>Sign up</a>
                         &nbsp;first.
                     </p>
                 </div>

docs/quick-start/components/email.tsx

@@ -4,7 +4,7 @@ import { DocType } from '@site/src/types/user';
 import React, { useEffect, useRef, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 const Email = () => {
-    // 打包之后必须使用@docusaurus/useIsBrowser来限制浏览器渲染
+
     const isBrowser = useIsBrowser();
     if (!isBrowser) {
         return null;
@@ -17,12 +17,11 @@ const Email = () => {
     useEffect(() => {
         // dispatch(setCallgent());
     }, [])
-    // 邮件操作
+    // Mail Operations
     const pushRouter = () => {
         if (callgent?.uuid) {
             window.location.href = `mailto:callgent+${callgent.uuid}@c.callgent.com`;
         } else {
-            // 元素在mdx中，无法使用ref
             const element = document.querySelector('#create-the-callgent');
             if (element instanceof HTMLElement) {
                 window.scrollTo({

docs/quick-start/components/index.module.css

@@ -1,11 +1,17 @@
 /* CreateCallgent */
-.form{
+.form {
     display: flex;
     flex-wrap: wrap;
 }
+
 @keyframes fadeInBackground {
-    from {opacity: 0;}
-    to {opacity: 1;}
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
 .modal {
@@ -16,62 +22,85 @@
     top: 0;
     width: 100%;
     height: 100%;
-    background-color: rgb(0,0,0);
-    background-color: rgba(0,0,0,0.4);
-    /* 添加动画 */
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
     animation: fadeInBackground 0.2s forwards;
 }
+
 @keyframes fadeIn {
-    from {opacity: 0;}
-    to {opacity: 1;}
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
+
 @keyframes shake {
-    0%, 100% {
+
+    0%,
+    100% {
         transform: translateX(0);
     }
+
     25% {
         transform: translateX(-5px);
     }
+
     75% {
         transform: translateX(5px);
     }
 }
-.please{
+
+.please {
     color: red;
     line-height: 50px;
     margin-left: 20px;
     animation: shake 0.3s ease-in-out 2;
 }
+
 .modalContent {
     width: 270px;
     height: 80px;
     line-height: 80px;
     border-radius: 10px;
     background-color: #fefefe;
     color: black;
-    margin: 200px auto; /* 位于页面中心 */
+    margin: 200px auto;
     border: 1px solid #888;
     text-align: center;
     user-select: none;
-    /* 添加动画 */
     animation: fadeIn 0.2s forwards;
 }
+
+.resForm {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 10px;
+}
+
 /* RestApi */
-.copy{
+.copy {
     color: green;
 }
-.pre{
+
+.pre {
     position: relative;
 }
-.copyButton{
+
+.copyButton {
     position: absolute;
     right: 15px;
     cursor: pointer;
 }
+
 /* email */
-.emailSvg{
+.emailSvg {
     margin-bottom: -5px;
 }
+
 .emailPush {
     color: #428555;
     cursor: pointer;

docs/quick-start/components/register.tsx

@@ -0,0 +1,47 @@
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import styles from './index.module.css';
+import { DocType } from '@site/src/types/user';
+import React, { useRef, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+const CreateCallgent = () => {
+    const isBrowser = useIsBrowser();
+    if (!isBrowser) {
+        return null;
+    }
+    const { sendConfirmEmail } = require('@site/src/store/thunk');
+    const [state, setState] = useState(null);
+    const dispatch = useDispatch();
+    const onEmailSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        const email = formData.get('email') as string;
+        dispatch(sendConfirmEmail({ email }))
+            .then((req) => {
+                if (req.payload !== "Failed to send confirmation email") {
+                    setState('success');
+                } else {
+                    setState('error');
+                }
+            });
+    };
+    return (
+        <>
+            <form onSubmit={(e) => onEmailSubmit(e)} className={styles.form}>
+                <input
+                    type="email"
+                    name="email"
+                    required
+                    placeholder="Enter your email to register"
+                    className='input col col--4 margin--sm table-of-contents'
+                />
+                <button className='button col col--3 margin--sm button--info button--secondary'>
+                    Send Email
+                </button>
+            </form>
+            {state === 'success' && <div className="text--success margin--sm">Please check your email to confirm registration!</div>}
+            {state === 'error' && <div className="text--danger margin--sm">Failed to send confirmation email. Please try again later.</div>}
+        </>
+    );
+};
+export default CreateCallgent;

docs/quick-start/create-a-new-callgent.mdx

@@ -7,7 +7,7 @@ tags: [Demo, Getting started]
 # Create a New Callgent
 
 import App from "@site/docs/app"
-import CreateCallgent from "./components/CreateCallgent"
+import CreateCallgent from "./components/create-callgent"
 
 Now you can create your own callgents, to encapsulate any of your system serivces, and embed them into any scenarios.
 

docs/quick-start/register-an-account.mdx

@@ -4,15 +4,10 @@ sidebar_position: 1
 
 # Register an Account
 
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import IconExternalLink from '@theme/Icon/ExternalLink';
-export const SignupLink = () => {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-      <a href={siteConfig.customFields.signupUrl} target='_blank'>sign-up page<IconExternalLink /></a>
-  );
-};
+import App from "@site/docs/app"
+import SignupLink from "./components/register"
 
-Firstly register an account from the <SignupLink />.
+Firstly register an Account 
+<pre> <App><SignupLink /></App></pre> 
 
 Once you have registered, you can go to [Create the First Callgent](create-a-new-callgent) page.

docs/user-as-a-service/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "User as a Service",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "Now, let's encapsulate a user as a REST-API service. By default, the user may respond to invocations by email. And user can respond from Slack channels and other scenarios easily."
+  }
+}

docs/user-as-a-service/define-user-api.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 1
+title: Define the user API
+description: Callgent is yet another AI programming tool besides Copilot, UI generator, and bug fixer, etc.
+keywords: [user as a service]
+---

docs/user-as-a-service/import-user-api-into-callgent.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 2
+title: Import API definition into Callgent
+description: .
+keywords: [user as a service]
+---

docs/user-as-a-service/invoke-user-callgent-by-rest-api.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 3
+title: Invoke the User Callgent by REST API
+description: .
+keywords: [user as a service]
+---

docs/user-as-a-service/user-responds-through-other-channels.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 4
+title: User responds through other channels
+description: .
+keywords: [user as a service]
+---

src/store/slices/userSlice.ts

@@ -9,7 +9,7 @@ const userSlice = createSlice({
     userData: {},
     callgent: {},
     status: {},
-    token: getCookie('jwt'),
+    token: getCookie('x-callgent-jwt'),
     fetchState: {},
   } as userSliceType,
   reducers: {
@@ -26,22 +26,17 @@ const userSlice = createSlice({
     },
   },
   extraReducers: (builder) => {
-    // 注册接口
     builder.addCase(fetchCreateCallgent.fulfilled, (state, action) => {
-      // console.log(action.payload.data);
-
       state.callgent = action.payload.data
     });
     builder.addCase(fetchCreateCallgent.pending, (state, action) => {
       // state.loading = true;
     });
-    // 用户详情
     builder.addCase(fetchUserInfo.fulfilled, (state, action) => {
-      // console.log('用户详情', action);
 
     });
   },
 });
 
-export const { setStatus, setCallgent,setFetchState } = userSlice.actions;
+export const { setStatus, setCallgent, setFetchState } = userSlice.actions;
 export default userSlice.reducer;