From 660e788110ea3f7202d1c994790a8698182214f7 Mon Sep 17 00:00:00 2001
From: Nareshkumar Rao <_accounts@nareshkumarrao.com>
Date: Fri, 30 Jul 2021 13:33:37 +0200
Subject: [PATCH] -added privacy notice -added donate option -css tweaks

---
 .env.template              |  4 +++-
 src/App.css                | 13 ++++++++++++-
 src/screens/HomeScreen.js  | 20 ++++++++++++++++----
 src/screens/LoginScreen.js | 21 ++++++++++++++++-----
 4 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/.env.template b/.env.template
index e122053..37c1000 100644
--- a/.env.template
+++ b/.env.template
@@ -1,2 +1,4 @@
 REACT_APP_API_URL=
-REACT_APP_TELEGRAM_BOT_NAME=
\ No newline at end of file
+REACT_APP_TELEGRAM_BOT_NAME=
+
+# REACT_APP_DONATE_LINK=
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 78cc313..12a1b69 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,9 +1,20 @@
+:root {
+  background: var(--chakra-colors-teal-100);
+}
+
 #QRFlex {
   width: 30%;
 }
 
-@media only screen and (max-width: 600px) {
+#contentFlex {
+  width: 30%;
+}
+
+@media only screen and (max-width: 800px) {
   #QRFlex {
     width: 90%;
   }
+  #contentFlex {
+    width: 90%;
+  }
 }
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
index 161f1fa..cd6f61d 100644
--- a/src/screens/HomeScreen.js
+++ b/src/screens/HomeScreen.js
@@ -1,6 +1,6 @@
-import { Button, Divider, Flex, Image, Spinner, Text } from '@chakra-ui/react';
+import { Button, Divider, Flex, Image, Link, Spinner, Text } from '@chakra-ui/react';
 import axios from 'axios';
-import { React, useEffect, useState } from 'react';
+import { Fragment, React, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Redirect, useHistory } from 'react-router-dom';
 import { authLogout } from '../features/auth/authSlice';
@@ -66,8 +66,20 @@ function Home() {
         </Text>
         <Divider mb={6} />
         <Button mb={6} onClick={()=>{history.push("/scanner");}}>Scan a QR Code</Button>
-        <Divider mb={10} />
-        <Button mb={6} onClick={handleLogout}>Log Out!</Button>
+        {
+          process.env.REACT_APP_DONATE_LINK && 
+          <Fragment>
+          <Divider mb={6} />
+          <Link href={process.env.REACT_APP_DONATE_LINK} ><Button style={{width: "100%  "}} mb={6} colorScheme="blue">Donate!</Button></Link>
+          <Text mb={6}>
+            Servers require money to run, and apps require labor to develop and maintain.
+            You can show your support by donating what you can. Every cent counts, buy me
+            my next coffee, or help pay for a month of server usage!
+          </Text>
+        </Fragment>
+        }
+        <Divider mb={6} />
+        <Button colorScheme="red" mb={6} onClick={handleLogout}>Log Out!</Button>
       </Flex>
     </Flex>
   );
diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js
index 86f2273..16eda2b 100644
--- a/src/screens/LoginScreen.js
+++ b/src/screens/LoginScreen.js
@@ -1,6 +1,4 @@
-import {
-  Flex, Heading, useToast
-} from '@chakra-ui/react';
+import { Divider, Flex, Heading, Link, Text, useToast } from '@chakra-ui/react';
 import axios from 'axios';
 import { React } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -83,12 +81,12 @@ function Login() {
 
   return (
     <Flex
-      height="100vh"
+      height="100%"
       background="teal.100"
       alignItems="center"
       justifyContent="center"
     >
-      <Flex direction="column" background="white" p={12} rounded={6}>
+      <Flex direction="column" mt={5} mb={5} background="white" p={12} rounded={6} id="contentFlex">
         <Heading size="xl" mb={6}>
           SSR Covid Tracing
         </Heading>
@@ -96,6 +94,19 @@ function Login() {
           Login
         </Heading>
         <TelegramLoginButton dataOnauth={handleTelegramResponse} botName={process.env.REACT_APP_TELEGRAM_BOT_NAME} />
+        <Divider mb={6} mt={6}/>
+        <Text fontSize="sm">
+          <b>Privacy notes:</b> <br/>
+          Telegram Login allows us to verify your identity, without
+          collecting any of your data. Telegram does NOT give us your
+          phone number. The only piece of information stored on our server
+          is your Telegram ID, this is an internal ID Number Telegram uses
+          that is SEPARATE from your Telegram Username.
+          <br/><br/>
+          All the code for this project is <Link color="teal.500" href="https://github.com/naresh97/ssr-tracing" isExternal>Open Source</Link>, that means anyone,
+          including you can audit and verify that your information is being
+          handled securely.
+        </Text>
       </Flex>
     </Flex>
   );