From b8cba89c391c7f4b3b030f7d856941d3869efc07 Mon Sep 17 00:00:00 2001 From: Nareshkumar Rao <_accounts@nareshkumarrao.com> Date: Wed, 28 Jul 2021 14:02:12 +0200 Subject: [PATCH] implemented telegram login --- .env.template | 3 +- .gitignore | 1 + package.json | 1 + src/App.js | 4 -- src/screens/CreateScreen.js | 107 ------------------------------------ src/screens/LoginScreen.js | 59 ++------------------ src/screens/VerifyScreen.js | 2 +- yarn.lock | 16 ++++++ 8 files changed, 27 insertions(+), 166 deletions(-) delete mode 100644 src/screens/CreateScreen.js diff --git a/.env.template b/.env.template index 4452883..e122053 100644 --- a/.env.template +++ b/.env.template @@ -1 +1,2 @@ -REACT_APP_API_URL= \ No newline at end of file +REACT_APP_API_URL= +REACT_APP_TELEGRAM_BOT_NAME= \ No newline at end of file diff --git a/.gitignore b/.gitignore index 89fb9f3..a6d314b 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* .env.production +.env.development diff --git a/package.json b/package.json index e7988ab..5a234b6 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "react-telegram-login": "^1.1.2", "web-vitals": "^0.2.2" }, "scripts": { diff --git a/src/App.js b/src/App.js index 2083f8e..55086cf 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,6 @@ import { React } from 'react'; import { Redirect, Route, Switch } from 'react-router-dom'; import Home from './screens/HomeScreen'; import Login from './screens/LoginScreen'; -import Create from './screens/CreateScreen'; import Success from './screens/SuccessScreen'; import './App.css'; import Verify from './screens/VerifyScreen'; @@ -18,9 +17,6 @@ function App() { - - - diff --git a/src/screens/CreateScreen.js b/src/screens/CreateScreen.js deleted file mode 100644 index c2fad81..0000000 --- a/src/screens/CreateScreen.js +++ /dev/null @@ -1,107 +0,0 @@ -import { - Button, - Divider, - Flex, - FormControl, - FormLabel, - Heading, - Input, useToast -} from '@chakra-ui/react'; -import axios from 'axios'; -import { useState } from 'react'; -import { useDispatch } from 'react-redux'; -import { useHistory } from 'react-router-dom'; -import { authLogin } from '../features/auth/authSlice'; - -function Create() { - const dispatch = useDispatch(); - const toast = useToast(); - const history = useHistory(); - - const [telegram, setTelegram] = useState(null); - const [password, setPassword] = useState(null); - - const handleSubmit = e => { - e.preventDefault(); - - if (!telegram | !password) { - toast({ - title: 'Problem!', - description: 'Please fill in all the fields', - status: 'error', - duration: 2000, - isClosable: true, - }); - return; - } - - axios - .post( - `${process.env.REACT_APP_API_URL}/create`, - { - telegram: telegram, - password: password, - }, - { - withCredentials: true, - } - ) - .then(response => { - if (response.data.success) { - dispatch(authLogin()); - history.push('/success'); - } else { - toast({ - title: 'An error occurred', - description: response.data.message, - status: 'error', - duration: 5000, - isClosable: true, - }); - } - }) - .catch(e => { - if (e.response.status === 401) { - toast({ - title: 'Verification Error', - description: - "You couldn't be verified. Please try scanning the verification QR Code again.", - status: 'error', - duration: 9000, - isClosable: true, - }); - } - }); - }; - - return ( - - - Create Account - - -
- - Telegram Username: - setTelegram(e.target.value)} /> - - - Password: - setPassword(e.target.value)} - /> - - -
- - - ); -} - -export default Create; diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js index a844cae..ed2f428 100644 --- a/src/screens/LoginScreen.js +++ b/src/screens/LoginScreen.js @@ -1,21 +1,14 @@ import { - Button, - Flex, - FormControl, - FormLabel, - Heading, - Input, - useToast + Flex, Heading, useToast } from '@chakra-ui/react'; import axios from 'axios'; -import { React, useState } from 'react'; +import { React } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Redirect, useHistory } from 'react-router-dom'; +import TelegramLoginButton from 'react-telegram-login'; import { authLogin, authLogout } from '../features/auth/authSlice'; function Login() { - const [telegram, setTelegram] = useState(null); - const [password, setPassword] = useState(null); const toast = useToast(); const history = useHistory(); const dispatch = useDispatch(); @@ -23,31 +16,12 @@ function Login() { const isAuthenticated = useSelector(state => state.auth.isAuthenticated); if (isAuthenticated) return ; - const handleSubmit = e => { - if (!telegram | !password) { - toast({ - title: 'Invalid Login', - description: 'Please fill in Telegram Username and password', - status: 'error', - duration: 9000, - isClosable: true, - }); - return; - } - - toast({ - title: 'Loading', - status: 'info', - duration: 9000, - isClosable: true, - }); - + const handleTelegramResponse = (response) => { axios .post( `${process.env.REACT_APP_API_URL}/login`, { - telegram: telegram, - password: password, + telegramResponse: response, }, { withCredentials: true, @@ -96,8 +70,6 @@ function Login() { } }); - - e.preventDefault(); }; return ( @@ -114,26 +86,7 @@ function Login() { Login -
- - Telegram Username: - setTelegram(event.target.value)} - /> - - - Password: - setPassword(event.target.value)} - /> - - -
+ ); diff --git a/src/screens/VerifyScreen.js b/src/screens/VerifyScreen.js index 199a2de..2953983 100644 --- a/src/screens/VerifyScreen.js +++ b/src/screens/VerifyScreen.js @@ -22,7 +22,7 @@ function Verify(props) { if (response.data.loggedIn) { history.push("/success"); } else { - history.push("/create"); + history.push("/login"); } } }) diff --git a/yarn.lock b/yarn.lock index 4830fb3..67fada9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10065,6 +10065,22 @@ react-style-singleton@^2.1.0: invariant "^2.2.4" tslib "^1.0.0" +react-telegram-login@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/react-telegram-login/-/react-telegram-login-1.1.2.tgz#28b9bdd68bb2710afca19354ac1f9428092836f0" + integrity sha512-pDP+bvfaklWgnK5O6yvZnIwgky0nnYUU6Zhk0EjdMSkPsLQoOzZRsXIoZnbxyBXhi7346bsxMH+EwwJPTxClDw== + dependencies: + react "^16.13.1" + +react@^16.13.1: + version "16.14.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" + integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.2" + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"