franpcode/Open-Telegram-to-Notion-Website
1
0
Fork 0
mirror of https://github.com/FranP-code/Open-Telegram-to-Notion-Website.git synced 2025-10-13 00:42:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Auth page done

Browse Source
This commit is contained in:
Francisco Pessano
2022-04-25 17:47:24 -03:00
parent 32404d1104
commit bf31475316
17 changed files with 453 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/Pages/Auth.jsx
View File

@@ -1,83 +0,0 @@
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>
)
}
export default Auth

103
src/Pages/Auth/Auth.jsx Normal file
View File

@@ -0,0 +1,103 @@
import React, {useState} from "react"
import axios from 'axios'
import Loading from "../../components/Loading/Loading"
import authImage from './auth_copy.svg'
import './auth-style.css'
import Notification from "../../components/Notification/Notification"
function Auth() {
const [loading, setLoading] = useState(true)
const [permanentCode, setPermanentCode] = useState(false)
const [notification, setNotification] = useState(false)
const getPermanentCode = () => {
const temporalCode = new URLSearchParams(window.location.search).get("code")
if (!temporalCode) {
setPermanentCode("empty")
setLoading(false)
return
}
let requestUrl
if (process.env.REACT_APP_ENV_MODE === "production") {
requestUrl = "http://localhost:5050/api/v1/auth"
} else {
requestUrl = "https://telegram-to-notion-backend.herokuapp.com/api/v1/auth"
}
axios({
method: "POST",
url: requestUrl,
headers: {'Content-Type': 'application/json'},
data: {code: temporalCode}
})
.then(res => {
console.log(res)
setPermanentCode(res ? res.data : null)
})
.catch(err => {
console.log(err.response)
setPermanentCode(false)
})
.finally(() => {
setLoading(false)
})
}
React.useEffect(() => {
getPermanentCode()
}, [])
return (
<div className="auth fullscreen">
{
loading ?
<Loading />
:
<>
{
permanentCode && permanentCode !== "empty" ?
<>
<h2>Copy the following code on Telegram chat</h2>
<div className="success">
<img src={authImage} alt="Copy text" />
<code
className="code-selection"
onClick={() => {
navigator.clipboard.writeText(permanentCode)
setNotification("Text copied to clipboard!")
}}
>
{permanentCode}
</code>
</div>
</>
:
<>
{
permanentCode === "empty" ?
<div className="error">
<h3>There is no temporal code. Please try again later.</h3>
</div>
:
<div className="error">
<h3>There has been an error getting the code. Please try again later.</h3>
</div>
}
</>
}
</>
}
<Notification notification={notification} setNotification={setNotification}/>
</div>
)
}
export default Auth

27
src/Pages/Auth/auth-style.css Normal file
View File

@@ -0,0 +1,27 @@
.auth {
padding: 1vh 3vw;
}
.auth h2, .auth h3 {
margin-top: 5vh;
}
.auth .success {
display: flex;
align-items: center;
background-color: #ffebcd;
padding: 5vh 2vw;
margin-top: 5vh;
border-radius: 20px;
}
.auth .success img {
width: 75px;
height: 75px;
margin-right: 3vw;
}
.auth .success .code-selection {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
overflow-wrap: anywhere;
color: rgb(73, 70, 50);
font-size: 1.2em;
}/*# sourceMappingURL=auth-style.css.map */

1
src/Pages/Auth/auth-style.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["auth-style.scss","auth-style.css"],"names":[],"mappings":"AAAA;EACI,gBAAA;ACCJ;ADCI;EACI,eAAA;ACCR;ADEI;EAEI,aAAA;EACA,mBAAA;EAEA,yBAAA;EAEA,gBAAA;EAEA,eAAA;EAEA,mBAAA;ACLR;ADOQ;EACI,WAAA;EACA,YAAA;EAEA,iBAAA;ACNZ;ADSQ;EACI,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,uBAAA;EAEA,sBAAA;EACA,gBAAA;ACRZ","file":"auth-style.css"}

37
src/Pages/Auth/auth-style.scss Normal file
View File

@@ -0,0 +1,37 @@
.auth {
padding: 1vh 3vw;
h2, h3 {
margin-top: 5vh;
}
.success {
display: flex;
align-items: center;
background-color: #ffebcd;
padding: 5vh 2vw;
margin-top: 5vh;
border-radius: 20px;
img {
width: 75px;
height: 75px;
margin-right: 3vw;
}
.code-selection {
user-select: all;
overflow-wrap: anywhere;
color: rgb(73, 70, 50);
font-size: 1.2em;
}
}
}

1
src/Pages/Auth/auth_copy.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#b6a894" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 348 B