Skip to content

Signin addition #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
devd-99 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Signin addition #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77eba74
signin functionality added. todo: not render page if auth not set
devd-99 Jul 27, 2022
95173e9
signup additions done.
devd-99 Jul 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 39 additions & 1 deletion src/components/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,49 @@ import { HashLink } from 'react-router-hash-link';
import NOTIFICATIONS_DATA from "../data/notifications";
import Profile3 from "../assets/img/team/profile-picture-3.jpg";

//auth imports
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { collection, query, where,getDocs } from "firebase/firestore";
import db from '../firebase.config';

export default (props) => {
const [notifications, setNotifications] = useState(NOTIFICATIONS_DATA);
const areNotificationsRead = notifications.reduce((acc, notif) => acc && notif.read, true);

var loadPage = false;

const auth = getAuth();
var userName = "";
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
const uid = user.uid;
console.log(uid, "loadPage now true in navbar");
loadPage = true;
// var doc = fetchUser(uid)
fetchUser(uid)
console.log(userName)
// ...
} else {
// User is signed out
// ...
}
});

const fetchUser=async(uid)=>{
const q = query(collection(db, "users"), where("uid", "==", uid));
const querySnapshot = await getDocs(q);
console.log(querySnapshot)
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data().username);
userName = doc.data().username
console.log(userName)
document.getElementById("username_display").innerHTML = userName
});
}

const markNotificationsAsRead = () => {
setTimeout(() => {
setNotifications(notifications.map(n => ({ ...n, read: true })));
Expand Down Expand Up @@ -92,7 +130,7 @@ export default (props) => {
<div className="media d-flex align-items-center">
<Image src={Profile3} className="user-avatar md-avatar rounded-circle" />
<div className="media-body ms-2 text-dark align-items-center d-none d-lg-block">
<span className="mb-0 font-small fw-bold">Bonnie Green</span>
<span className="mb-0 font-small fw-bold" id="username_display"></span>{userName}
</div>
</div>
</Dropdown.Toggle>
Expand Down
59 changes: 49 additions & 10 deletions src/pages/Mobile/Signin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faEnvelope, faUnlockAlt } from "@fortawesome/free-solid-svg-icons";
import { faFacebookF, faGithub, faTwitter } from "@fortawesome/free-brands-svg-icons";
import { Col, Row, Form, Card, Button, FormCheck, Container, InputGroup } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { useHistory, Link } from 'react-router-dom';
import { Routes } from "../../routes";
import BgImage from "../../assets/img/illustrations/signin.svg";

Expand All @@ -12,17 +12,23 @@ import db from '../../firebase.config';
import { doc, onSnapshot, collection, query, where,getDocs } from "firebase/firestore";
import {useState,useEffect} from 'react';

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";



const initialFormData = Object.freeze({
password: "",
email: ""
});

export default () => {

const auth = getAuth();
const q = query(collection(db, "users"));

const [formData, updateFormData] = useState(initialFormData);
const history = useHistory();
const [users,setUsers]=useState([])

useEffect(() => {
fetchUsers();
// fetchUsers();
}, [])
const fetchUsers=async()=>{
const querySnapshot = await getDocs(q);
Expand All @@ -34,6 +40,35 @@ export default () => {
}


const handleChange = (e) => {
console.log("handleChange called")
updateFormData({
...formData,

// Trimming any whitespace
[e.target.name]: e.target.value.trim()
});

};
const logInWithEmailAndPassword = async () => {
var res = null
// console.log(formData)
try {
const email = String(formData.email)
const password = String(formData.password)
console.log(email, password)
res = await signInWithEmailAndPassword(auth, email, password);
} catch (err) {
console.error(err);
alert(err.message);
}
finally {
const user = res.user;
console.log(user)
history.push("/dashboard/overview");
}
};

return (
<main>
<section className="d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
Expand All @@ -56,7 +91,7 @@ export default () => {
<InputGroup.Text>
<FontAwesomeIcon icon={faEnvelope} />
</InputGroup.Text>
<Form.Control autoFocus required type="email" placeholder="example@company.com" />
<Form.Control autoFocus required name="email" type="email" onChange={handleChange} placeholder="example@company.com" />
</InputGroup>
</Form.Group>
<Form.Group>
Expand All @@ -66,7 +101,7 @@ export default () => {
<InputGroup.Text>
<FontAwesomeIcon icon={faUnlockAlt} />
</InputGroup.Text>
<Form.Control required type="password" placeholder="Password" />
<Form.Control required name="password" type="password" onChange={handleChange} placeholder="Password" />
</InputGroup>
</Form.Group>
<div className="d-flex justify-content-between align-items-center mb-4">
Expand All @@ -80,12 +115,15 @@ export default () => {
{/* <Button variant="primary" type="submit" className="w-100">
Sign in
</Button> */}
<Button variant="primary" as={Link} to={Routes.DashboardOverview.path} className="w-100">
{/* <Button variant="primary" as={Link} to={Routes.DashboardOverview.path} className="w-100">
Login
</Button> */}
<Button variant="primary" onClick={logInWithEmailAndPassword} className="w-100">
Login
</Button>
</Form>

<div className="mt-3 mb-4 text-center">
{/* <div className="mt-3 mb-4 text-center">
<span className="fw-normal">or login with</span>
</div>
<div className="d-flex justify-content-center my-4">
Expand All @@ -98,7 +136,8 @@ export default () => {
<Button variant="outline-light" className="btn-icon-only btn-pil text-dark">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</div> */}

<div className="d-flex justify-content-center align-items-center mt-4">
<span className="fw-normal">

Expand Down
Loading