Merge pull request #1 from naresh97/feature/telegramLogin

Implement Telegram Login

.env.template

@@ -1 +1,2 @@
-REACT_APP_API_URL=
+REACT_APP_API_URL=
+REACT_APP_TELEGRAM_BOT_NAME=

.gitignore

@@ -24,3 +24,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .env.production
+.env.development

package.json

@@ -21,6 +21,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": {

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';
@@ -19,9 +18,6 @@ function App() {
         <Route path="/login">
           <Login />
         </Route>
-        <Route path="/create">
-          <Create />
-        </Route>
         <Route path="/success">
           <Success />
         </Route>

src/screens/CreateScreen.js

@@ -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 (
-    <Flex
-      height="100vh"
-      background="teal.100"
-      alignItems="center"
-      justifyContent="center"
-    >
-      <Flex direction="column" background="white" p={12} rounded={6}>
-        <Heading mb={6}>Create Account</Heading>
-        <Button onClick={()=>{history.push("/login");}} mb={6}>I already have an account!</Button>
-        <Divider mb={6} />
-        <form onSubmit={handleSubmit}>
-          <FormControl mb={6}>
-            <FormLabel>Telegram Username:</FormLabel>
-            <Input onChange={e => setTelegram(e.target.value)} />
-          </FormControl>
-          <FormControl mb={6}>
-            <FormLabel>Password:</FormLabel>
-            <Input
-              type="password"
-              onChange={e => setPassword(e.target.value)}
-            />
-          </FormControl>
-          <Button type="submit">Create!</Button>
-        </form>
-      </Flex>
-    </Flex>
-  );
-}
-
-export default Create;

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 <Redirect to="/home" />;
 
-  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() {
         <Heading size="lg" mb={4}>
           Login
         </Heading>
-        <form onSubmit={handleSubmit}>
-          <FormControl mb={6}>
-            <FormLabel>Telegram Username:</FormLabel>
-            <Input
-              colorScheme="teal"
-              onChange={event => setTelegram(event.target.value)}
-            />
-          </FormControl>
-          <FormControl mb={6}>
-            <FormLabel>Password:</FormLabel>
-            <Input
-              type="password"
-              colorScheme="teal"
-              onChange={event => setPassword(event.target.value)}
-            />
-          </FormControl>
-          <Button mb={6} type="submit">
-            Login!
-          </Button>
-        </form>
+        <TelegramLoginButton dataOnauth={handleTelegramResponse} botName={process.env.REACT_APP_TELEGRAM_BOT_NAME} />
       </Flex>
     </Flex>
   );

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

yarn.lock

@@ -10079,6 +10079,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"