dscnsec · lecopro123 · Dec 27, 2020
diff --git a/.eslintcache b/.eslintcache
@@ -1 +1 @@
-[{"D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\index.tsx":"1","D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\WTMEditor.tsx":"2","D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\DSCEditor.tsx":"3","D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\GDGEditor.tsx":"4","D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\App.tsx":"5","D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\MainToolBar.tsx":"6","D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\theme.tsx":"7","D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\serviceWorker.tsx":"8"},{"size":571,"mtime":1608232233079,"results":"9","hashOfConfig":"10"},{"size":6887,"mtime":1608307954219,"results":"11","hashOfConfig":"10"},{"size":12162,"mtime":1608357488403,"results":"12","hashOfConfig":"10"},{"size":6617,"mtime":1608358420536,"results":"13","hashOfConfig":"10"},{"size":2776,"mtime":1608307050213,"results":"14","hashOfConfig":"10"},{"size":1576,"mtime":1608231487285,"results":"15","hashOfConfig":"10"},{"size":389,"mtime":1608213436186,"results":"16","hashOfConfig":"10"},{"size":5579,"mtime":1608232218909,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"1nuab4z",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\index.tsx",[],[],"D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\WTMEditor.tsx",[],"D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\DSCEditor.tsx",[],"D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\GDGEditor.tsx",[],"D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\App.tsx",[],"D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\MainToolBar.tsx",[],"D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\theme.tsx",[],"D:\\OPEN SOURCE CONTRIBUTIONS\\logo-generator\\src\\serviceWorker.tsx",[]]
+[{"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\index.tsx":"1","C:\\Users\\PRO\\newlogo\\logo-generator\\src\\App.tsx":"2","C:\\Users\\PRO\\newlogo\\logo-generator\\src\\theme.tsx":"3","C:\\Users\\PRO\\newlogo\\logo-generator\\src\\serviceWorker.tsx":"4","C:\\Users\\PRO\\newlogo\\logo-generator\\src\\GDGEditor.tsx":"5","C:\\Users\\PRO\\newlogo\\logo-generator\\src\\DSCEditor.tsx":"6","C:\\Users\\PRO\\newlogo\\logo-generator\\src\\WTMEditor.tsx":"7","C:\\Users\\PRO\\newlogo\\logo-generator\\src\\MainToolBar.tsx":"8","C:\\Users\\PRO\\newlogo\\logo-generator\\src\\config\\fire.tsx":"9","C:\\Users\\PRO\\newlogo\\logo-generator\\src\\logsign.tsx":"10"},{"size":619,"mtime":1609002613207,"results":"11","hashOfConfig":"12"},{"size":3544,"mtime":1609070449837,"results":"13","hashOfConfig":"12"},{"size":389,"mtime":1609001033434,"results":"14","hashOfConfig":"12"},{"size":5579,"mtime":1609001033433,"results":"15","hashOfConfig":"12"},{"size":6601,"mtime":1609001033431,"results":"16","hashOfConfig":"12"},{"size":12128,"mtime":1609001033430,"results":"17","hashOfConfig":"12"},{"size":6887,"mtime":1609001033432,"results":"18","hashOfConfig":"12"},{"size":1576,"mtime":1609001033431,"results":"19","hashOfConfig":"12"},{"size":519,"mtime":1609062478099,"results":"20","hashOfConfig":"12"},{"size":7840,"mtime":1609074239063,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"971wkm",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\index.tsx",[],[],"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\App.tsx",[],"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\theme.tsx",[],"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\serviceWorker.tsx",[],"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\GDGEditor.tsx",[],"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\DSCEditor.tsx",[],"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\WTMEditor.tsx",[],"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\MainToolBar.tsx",[],"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\config\\fire.tsx",[],"C:\\Users\\PRO\\newlogo\\logo-generator\\src\\logsign.tsx",[]]
diff --git a/package.json b/package.json
@@ -20,13 +20,16 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/webfontloader": "^1.6.32",
+    "bootstrap": "^4.5.3",
     "clsx": "latest",
+    "firebase": "^8.2.1",
     "node-sass": "^4.14.1",
     "react": "latest",
     "react-dom": "latest",
     "react-github-btn": "^1.2.0",
     "react-responsive-canvas": "^1.0.2",
     "react-scripts": "latest",
+    "reactstrap": "^8.8.0",
     "typescript": "^4.1.3",
     "webfontloader": "^1.6.28"
   },

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,10 @@
+.logb{
+    margin-left: 100px;
+    background: linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%);
+    border: 0;
+    border-radius: 3;
+    box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3);
+    color: white;
+    height: 48px;
+    padding: 0 30px;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,19 +1,22 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import GDGEditor from './GDGEditor'
 import DSCEditor from './DSCEditor'
 import WTMEditor from './WTMEditor'
 import { AppBar, BottomNavigation, Box, Container, Link, Tabs, Tab, Typography } from '@material-ui/core';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import GitHubButton from 'react-github-btn';
+import MCard from './logsign';
+import fire from './config/fire';
+import './App.css';
 
-interface Props{
+interface Props {
 	props: any,
-	index:number,
-	mode:any
+	index: number,
+	mode: any
 }
 
-function TabPanel(props:any) {
+function TabPanel(props: any) {
 	const { children, value, index, ...other } = props;
 
 	return (
@@ -41,7 +44,7 @@ TabPanel.propTypes = {
 	value: PropTypes.any.isRequired,
 };
 
-function a11yProps(index:number) {
+function a11yProps(index: number) {
 	return {
 		id: `scrollable-auto-tab-${index}`,
 		'aria-controls': `scrollable-auto-tabpanel-${index}`,
@@ -64,11 +67,32 @@ const useStyles = makeStyles((theme) => ({
 export default function ScrollableTabsButtonAuto() {
 	const classes = useStyles();
 	const [value, setValue] = React.useState(0);
+	const [user, setuser] = React.useState(false);
 
-	const handleChange = (event:any, newValue:any) => {
+
+	useEffect(() => {
+		fire.auth().onAuthStateChanged((user) => {
+			console.log(user);
+			if (user) {
+				setuser(true);
+			}
+			else {
+				setuser(false);
+			}
+		});
+	}, [])
+
+	const handleChange = (event: any, newValue: any) => {
 		setValue(newValue);
 	};
 
+	const Logout = () => {
+		if (user === true) {
+			console.log(Object.keys(user).length)
+			fire.auth().signOut();
+		}
+	};
+
 	return (
 		<div className={classes.root}>
 			<AppBar position="static" color="default">
@@ -79,30 +103,29 @@ export default function ScrollableTabsButtonAuto() {
 					textColor="primary"
 					variant="scrollable"
 				>
-					<Tab label="GDG" {...a11yProps(0)} />
-					<Tab label="DSC" {...a11yProps(1)} />
-					<Tab label="WTM" {...a11yProps(2)} />
+					<Tab label="login/signup" {...a11yProps(0)} />
+					<Tab label="GDG" {...a11yProps(1)} hidden={!user} />
+					<Tab label="DSC" {...a11yProps(2)} hidden={!user} />
+					<Tab label="WTM" {...a11yProps(3)} hidden={!user} />
+					<button className="logb" onClick={Logout}>Log OUt</button>
 				</Tabs>
+
 			</AppBar>
-			<TabPanel value={value} index={0}>
-				<GDGEditor />
-			</TabPanel>
-			<TabPanel value={value} index={1}>
-				<DSCEditor />
-			</TabPanel>
-			<TabPanel value={value} index={2}>
-				<WTMEditor />
-			</TabPanel>
+			{!user ? <TabPanel value={value} index={0}><MCard /></TabPanel> :
+				<><TabPanel value={value} index={0}><MCard /></TabPanel>
+					<TabPanel value={value} index={1}><GDGEditor /></TabPanel>
+					<TabPanel value={value} index={2}><DSCEditor /></TabPanel>
+					<TabPanel value={value} index={3}><WTMEditor /></TabPanel></>}
 			<br></br>
 			<br></br>
 			<br></br>
 			<br></br>
 			<br></br>
 			<BottomNavigation className={classes.stickToBottom}>
-			<GitHubButton href="https://github.com/dscnsec/logo-generator" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star dscnsec/logo-generator on GitHub">Star</GitHubButton>
-				
+				<GitHubButton href="https://github.com/dscnsec/logo-generator" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star dscnsec/logo-generator on GitHub">Star</GitHubButton>
+
 				<Typography>
-				&nbsp;&middot;&nbsp;Created by&nbsp;
+					&nbsp;&middot;&nbsp;Created by&nbsp;
 					<Link href="https://xprilion.com" target="_blank">
 						@xprilion
 					</Link>

diff --git a/src/config/fire.tsx b/src/config/fire.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import firebase from 'firebase';
+
+
+var firebaseConfig = {
+  apiKey: 'AIzaSyBDHSYlKSb2fyTGNGMIn1xci0AzCblPGcI',
+  authDomain: 'logo-generator-50fc4.firebaseapp.com',
+  projectId: "logo-generator-50fc4",
+  storageBucket: "logo-generator-50fc4.appspot.com",
+  messagingSenderId: "769267366287",
+  appId: "1:769267366287:web:f6f91abdac7d11705873fa",
+  measurementId: "G-MDYJL47LF4"
+};
+// Initialize Firebase
+const fire = firebase.initializeApp(firebaseConfig);
+export default fire;
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';
 import App from './App';

diff --git a/src/login.css b/src/login.css
@@ -0,0 +1,38 @@
+.m20{
+    margin-top: 20px;
+  }
+  .m10{
+    margin-top: 10px;
+  }
+  .m100r{
+    margin-top: 100px;
+    position: absolute;
+    left: 60%;
+  }
+  .m100l{
+    margin-top: 100px;
+    position: absolute;
+  }
+.p10{
+      padding-top: 10px;
+  }
+  input[type=email]{
+    width: 100%;
+    padding: 12px 20px;
+    margin: 0px 0;
+    box-sizing: border-box;
+    border: none;
+    border-bottom: 1px solid black;
+  }
+  input[type=password]{
+    width: 100%;
+    padding: 12px 20px;
+    margin: 0px 0;
+    box-sizing: border-box;
+    border: none;
+    border-bottom: 1px solid black;
+  }
+  .bmar{
+      margin-left: 120px;
+  }
+
diff --git a/src/logsign.tsx b/src/logsign.tsx
@@ -0,0 +1,181 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import Typography from '@material-ui/core/Typography';
+import { FormGroup, Label, Input, Col, Button } from 'reactstrap';
+import './login.css';
+import { Alert } from 'reactstrap';
+import fire from './config/fire';
+
+const useStyles = makeStyles({
+    root: {
+        maxWidth: 370,
+        height: 270,
+        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)'
+    },
+    eroot: {
+        maxWidth: 370,
+        height: 310,
+        boxShadow: '0 3px 5px 2px rgba(255, 30, 145, .3)'
+    },
+    signup: {
+        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+        border: 0,
+        borderRadius: 3,
+        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+        color: 'white',
+        height: 48,
+        padding: '0 30px',
+
+    },
+    login: {
+        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+        border: 0,
+        borderRadius: 3,
+        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+        color: 'white',
+        height: 48,
+        padding: '0 30px',
+
+    },
+});
+
+export default function MCard() {
+    const [password, setpassword] = useState<string>('');
+    const [email, setemail] = useState<string>('');
+    const [pass, setpass] = useState<string>('');
+    const [status, setstatus] = useState<string>('');
+    const [col, setcol] = useState<string>('');
+    const [Lpassword, setLpassword] = useState<string>('');
+    const [Lemail, setLemail] = useState<string>('');
+    const [stat, setstat] = useState<string>('');
+    const [co, setco] = useState<string>('');
+
+
+    const classes = useStyles();
+    const handleChange = (e: any) => {
+        e.preventDefault();
+        if (password !== '' && email !== '' && pass !== '') {
+            console.log('in1')
+            if (password.length > 6) {
+                console.log('in')
+                if (pass !== password) {
+                    setstatus("Your passwords do not match");
+                    setcol("danger");
+                }
+                else {
+                    fire.auth().createUserWithEmailAndPassword(email, password).then((u) => {
+                    }).then((u) => {
+                        console.log(u)
+                        setstatus("Your submission have been confirmed");
+                        setcol("success");
+                    })
+                        .catch((error) => {
+                            console.log(error);
+                            setstatus(error.message);
+                            setcol("danger");
+                        })
+                }
+            }
+            else {
+                setstatus("Please provide a stronger password with minimum length of password being 7");
+                setcol("danger");
+            }
+        }
+        else {
+            setstatus("Please fill all the details in the form");
+            setcol("danger");
+        }
+    }
+    const handleLog = (e: any) => {
+        e.preventDefault();
+        if (Lpassword !== '' && Lemail !== '') {
+            fire.auth().signInWithEmailAndPassword(Lemail, Lpassword)
+                .then((u) => {
+                    console.log(u);
+                    // setstat(u);
+                    //setco("success");
+                })
+                .catch((error) => {
+                    console.log(error);
+                    setstat(error.message);
+                    setco("danger");
+                });
+        }
+        else {
+            setstat("Please fill all the credentials");
+            setco("danger");
+        }
+    }
+    return (
+        <>
+            <div className="m100r">
+                <Card className={classes.root}>
+                    <div className="container">
+                        <div className="row justify-content-center">
+                            <h3><strong><div className="p10">Log In</div></strong></h3>
+                        </div>
+                        <div className="row p-2 m20">
+                            <div className="col-12">
+                                <FormGroup row>
+                                    <Label md={4} htmlFor="email">Email</Label>
+                                    <Col md={8}>
+                                        <Input type="email" id="emailL" name="emailL" placeholder="Email" value={Lemail} onChange={(e) => { setLemail(e.target.value) }} />
+                                    </Col>
+                                </FormGroup>
+                                <FormGroup row>
+                                    <Label md={4} htmlFor="password">Password</Label>
+                                    <Col md={8}>
+                                        <Input type="password" id="passwordL" name="passwordL" placeholder="Password" value={Lpassword} onChange={(e) => { setLpassword(e.target.value) }} />
+                                    </Col>
+                                </FormGroup>
+                                <div className="bmar m20"><Button className={classes.login} onClick={handleLog} >Log In</Button></div>
+                            </div>
+                        </div>
+                    </div>
+                </Card>
+                <br />
+                {stat !== "" ? <Alert color={co} fade={true}>
+                    {stat}
+                </Alert> : null}
+            </div>
+
+            <div className="m100l">
+                <Card className={classes.eroot}>
+                    <div className="container">
+                        <div className="row justify-content-center">
+                            <h3><strong><div className="p10">Sign Up</div></strong></h3>
+                        </div>
+                        <div className="row p-2 m10">
+                            <div className="col-12">
+                                <FormGroup row>
+                                    <Label md={4} htmlFor="email">Email</Label>
+                                    <Col md={8}>
+                                        <Input type="email" id="emailS" name="emailS" placeholder="Email" value={email} onChange={(e) => { setemail(e.target.value) }} />
+                                    </Col>
+                                </FormGroup>
+                                <FormGroup row>
+                                    <Label md={4} htmlFor="password">Password</Label>
+                                    <Col md={8}>
+                                        <Input type="password" id="passwordS" name="passwordS" placeholder="Password" value={password} onChange={(e) => { setpassword(e.target.value) }} />
+                                    </Col>
+                                </FormGroup>
+                                <FormGroup row>
+                                    <Label md={4} htmlFor="password">Confirm Password</Label>
+                                    <Col md={8}>
+                                        <Input type="password" id="passwordC" name="passwordC" placeholder="Confirm Password" value={pass} onChange={(e) => { setpass(e.target.value) }} />
+                                    </Col>
+                                </FormGroup>
+                                <div className="bmar"><Button className={classes.signup} onClick={handleChange} >Sign Up</Button></div>
+                            </div>
+                        </div>
+                    </div>
+                </Card>
+                <br />
+                {status !== "" ? <Alert color={col} fade={true}>
+                    {status}
+                </Alert> : null}
+            </div>
+        </>
+    )
+}