Auth page done

.gitignore

@@ -1,8 +1,10 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
 node_modules
 
 package-lock.json
 
-.env# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.env
 
 # dependencies
 /node_modules

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#3399ff",
+        "activityBar.activeBorder": "#bf0060",
+        "activityBar.background": "#3399ff",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#bf0060",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "sash.hoverBorder": "#3399ff",
+        "statusBar.background": "#007fff",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#3399ff",
+        "statusBarItem.remoteBackground": "#007fff",
+        "statusBarItem.remoteForeground": "#e7e7e7",
+        "titleBar.activeBackground": "#007fff",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#007fff99",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "#007fff"
+}

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/App.jsx

@@ -1,8 +1,7 @@
 import {
   BrowserRouter as Router,
   Routes,
-  Route,
+  Route
-  Link
 } from "react-router-dom";
 
 import Header from './components/Header/Header'

src/Pages/Auth.jsx

@@ -1,7 +1,81 @@
+import React, {useState} from "react"
+import axios from 'axios'
+
 function Auth() {
 
+    const [loading, setLoading] = useState(true)
+    const [permanentCode, setPermanentCode] = useState(false)
+
+    React.useEffect(() => {
+
+        async function getPermanentCode() {
+
+            const temporalCode = new URLSearchParams(window.location.search).get("code")
+            console.log(temporalCode);
+            
+            if (!temporalCode) {
+                console.log("No temporal code")
+                return
+            }
+
+            let requestUrl
+
+            if (process.env.REACT_APP_ENV_MODE === "production") {
+                requestUrl = "https://telegram-to-notion-backend.herokuapp.com/api/v1/auth"
+            } else {
+                requestUrl = "http://localhost:5050/api/v1/auth"
+            }
+
+            axios({
+                method: "POST",
+                url: requestUrl,
+                headers: {
+                    code: temporalCode,
+                }
+            })
+            .then(res => {
+                console.log(res)
+                setPermanentCode(res ? res.data : null)
+            })
+            .catch(err => {
+                console.log(err.response)
+                setPermanentCode(false)
+            })
+            .finally(() => {
+                setLoading(false)
+            })
+
+        }
+        
+        getPermanentCode()
+    })
+
+    
     return (
         <div className="auth">
+            {
+                loading ?
+                    // <Loading />
+                    <h1>Loading</h1>
+                :
+                <>
+                    {
+                        permanentCode ?
+                        <>
+                            <h3>Copy the following code on the Telegram chat</h3>
+                            <div className="success">
+                                <code className="code-selection">
+                                    {permanentCode}
+                                </code>
+                            </div>
+                        </>
+                        :
+                        <div className="error">
+                                <h3>There has been an error getting the code. Please try again later.</h3>
+                        </div>
+                    }
+                </>
+            }
         </div>
     )
 }

src/Pages/Index/Index.jsx

@@ -51,7 +51,6 @@ function Index() {
                     
                     color: #999;
 
-                    margin-left: 1vw;
                     margin-top: 5px;
                     
                     align-self: center;
@@ -68,7 +67,7 @@ function Index() {
 
             border-radius: 5px;
 
-            margin-top: 6vh;
+            margin-top: 3vh;
             margin-left: 1vw;
             padding: 3vh 6vw;
 
@@ -99,7 +98,7 @@ function Index() {
                     listData.map((obj, index) => (
                         <li key={index}>
                             {obj.link ? <a href={obj.link} target="_blank" children={<h2>› {obj.text}</h2>} rel="noreferrer"/> : <h2>› {obj.text}</h2>}
-                            {obj.secondaryText ? <span>{obj.secondaryText}</span> : null}
+                            {obj.secondaryText ? <span>&nbsp;{obj.secondaryText}</span> : null}
                         </li>
                     ))
                 }