add subscribe request (#100)

Co-authored-by: HEREYUA <1240335630@qq.com>
Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/100
Reviewed-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: liuyu <liuyu@noreply.gitea.com>
Co-committed-by: liuyu <liuyu@noreply.gitea.com>

package.json

@@ -19,7 +19,10 @@
     "@docusaurus/core": "^3.0.0",
     "@docusaurus/preset-classic": "^3.0.0",
     "@easyops-cn/docusaurus-search-local": "^0.38.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^3.0.0",
+    "@mui/material": "^5.15.2",
     "docusaurus-plugin-plausible": "^0.0.5",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",

src/components/Subscribe/index.js

@@ -3,17 +3,53 @@ import Input from "../Input"
 import Button from "../Button"
 import style from "./style.module.css"
 import clsx from "clsx"
-
+import Alert from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
 const Spinner = () => <span className={style.loader} />
-
 const Subscribe = ({placeholder, submitButtonText, className, classNameInputs}) => {
   const [loading, setLoading] = useState(false)
+  const [inputValue,setInputValue]=useState('')
+  const [toastVisible,setToastVisible]=useState(false)
+   function onSubmit() {
+    setLoading(true)
+    fetch('https://api.hsforms.com/submissions/v3/integration/submit/44783791/7314ddd3-9767-4c71-8071-4d43ac5ae5e8',{
+      method:'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        submittedAt: new Date().getTime(),
+        fields: [
+          {
+            objectTypeId: "0-1",
+            name: "email",
+            value: inputValue
+          }
+        ],
+        context: {
+          // hutk: "hutk",
+          pageUri: window.location.href,
+          pageName: document.title
+        }
+      })
+    })
+     .then(res =>res.json())
+     .then((data) => {
+       setLoading(false)
+       setToastVisible(true)
+       setInputValue('')
+     }) 
+  }
+  function handleInputChange(event) {
+    const value = event.target.value;
+    setInputValue(value)
+}
+  function handleClose  (event, reason)  {
+    setToastVisible(false)
+  };
 
   return (
-    <form method="post" action="https://list.gitea.com/subscription/form" className={clsx(style.root, className)} onSubmit={() => {setLoading(true)}}>
       <div className={clsx(style.inputs, classNameInputs)}>
-        <Input type="hidden" name="nonce" />
-        <input className={style.checkbox} id="2aae7" type="checkbox" name="l" value="2aae7a49-b6b9-4aa3-b35a-32c9aeace57b" checked readOnly />
         <Input
           className={style.input}
           name="email"
@@ -22,17 +58,24 @@ const Subscribe = ({placeholder, submitButtonText, className, classNameInputs})
           placeholder={placeholder}
           required
           autoComplete="off"
+          onChange={handleInputChange}
+          value={inputValue}
         />
 
         <Button
           variant={"tertiary"}
           type="submit"
           className={style.subscribeSubmit}
+          onClick={onSubmit}
         >
           {loading ? <Spinner /> : submitButtonText}
         </Button>
+        <Snackbar anchorOrigin={{  vertical: 'top',horizontal: 'center' }} autoHideDuration={3000} open={toastVisible}  onClose={handleClose}>
+          <Alert onClose={handleClose} severity="success">
+          success!
+          </Alert>
+        </Snackbar>
       </div>
-    </form>
   )
 }
 

src/components/Subscribe/style.module.css

@@ -65,6 +65,7 @@
   font-weight: var(--ifm-font-weight-bold);
 }
 
+
 @keyframes loader {
   0% {
     transform: rotate(0deg);