From 05ad1ab361f19284f07fe759ae9d8c36e8a1c777 Mon Sep 17 00:00:00 2001 From: promugdha bhattacharya Date: Sun, 27 Dec 2020 18:40:55 +0530 Subject: [PATCH] login signup --- .eslintcache | 2 +- package.json | 3 + src/App.css | 10 +++ src/App.tsx | 67 ++++++++++------ src/config/fire.tsx | 16 ++++ src/index.tsx | 1 + src/login.css | 38 ++++++++++ src/logsign.tsx | 181 ++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 295 insertions(+), 23 deletions(-) create mode 100644 src/App.css create mode 100644 src/config/fire.tsx create mode 100644 src/login.css create mode 100644 src/logsign.tsx diff --git a/.eslintcache b/.eslintcache index 11b65fb..e4ce412 100644 --- 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",[]] \ No newline at end of file +[{"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",[]] \ No newline at end of file diff --git a/package.json b/package.json index f1244d3..29ff9af 100644 --- 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 new file mode 100644 index 0000000..5852e40 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 51c5905..07b3f05 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import GDGEditor from './GDGEditor' import DSCEditor from './DSCEditor' import WTMEditor from './WTMEditor' @@ -6,14 +6,17 @@ import { AppBar, BottomNavigation, Box, Container, Link, Tabs, Tab, Typography } 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 (
@@ -79,30 +103,29 @@ export default function ScrollableTabsButtonAuto() { textColor="primary" variant="scrollable" > - - - + + - - - - - - - - - + {!user ? : + <> + + + }









- Star - + Star + -  · Created by  +  · Created by  @xprilion diff --git a/src/config/fire.tsx b/src/config/fire.tsx new file mode 100644 index 0000000..9f64a4b --- /dev/null +++ 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; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 3ad9bd1..281ca9d 100644 --- 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 new file mode 100644 index 0000000..6257d57 --- /dev/null +++ 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; + } + \ No newline at end of file diff --git a/src/logsign.tsx b/src/logsign.tsx new file mode 100644 index 0000000..ec5af15 --- /dev/null +++ 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(''); + const [email, setemail] = useState(''); + const [pass, setpass] = useState(''); + const [status, setstatus] = useState(''); + const [col, setcol] = useState(''); + const [Lpassword, setLpassword] = useState(''); + const [Lemail, setLemail] = useState(''); + const [stat, setstat] = useState(''); + const [co, setco] = useState(''); + + + 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 ( + <> +
+ +
+
+

Log In

+
+
+
+ + + + { setLemail(e.target.value) }} /> + + + + + + { setLpassword(e.target.value) }} /> + + +
+
+
+
+ +
+ {stat !== "" ? + {stat} + : null} +
+ +
+ +
+
+

Sign Up

+
+
+
+ + + + { setemail(e.target.value) }} /> + + + + + + { setpassword(e.target.value) }} /> + + + + + + { setpass(e.target.value) }} /> + + +
+
+
+
+ +
+ {status !== "" ? + {status} + : null} +
+ + ) +} \ No newline at end of file