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
-
-
-
-
-
- );
-}
-
-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
-
+
);
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"