Auth page done

src/App.jsx

@@ -1,8 +1,7 @@
 import {
   BrowserRouter as Router,
   Routes,
-  Route,
-  Link
+  Route
 } 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>
                     ))
                 }