Moderator (#88)

* remove obsolete files
* made Login as configurable component
* externalize auth
* moderator

CHANGELOG.md

@@ -4,6 +4,8 @@
 - login
 - recognize moderator
 - introducing configurable components
+- get user groups
+- moderator user
 
 ## 0.2.2 (2018-11-05)
 - fix map iOS

firestore.rules

@@ -1,6 +1,14 @@
 service cloud.firestore {
   match /databases/{database}/documents {
 
+    function isAdmin() {
+    	return get(/databases/$(database)/documents/users/$(request.auth.uid)).data.isAdmin == true
+    }
+
+    function isOwner(uid) {
+    	return request.auth.uid == uid
+    }
+
     // anybody can read the photos but only admin can write
     match /photos/{photo} {
       allow read: if true;
@@ -9,6 +17,12 @@ service cloud.firestore {
       allow write: if get(/databases/$(database)/documents/users/$(request.auth.uid)).data.admin == true
     }
 
+    // data written by admin
+    match /users/{uid} {
+    	allow read: if isAdmin() || isOwner(uid);
+      allow write: if isAdmin();
+    }
+
     // only logged in users can add
     // owners can update
     // admin can  do anything

src/App.js

@@ -6,7 +6,7 @@ import PhotoPage from './Components/PhotoPage';
 import LandingPage from './Components/LandingPage';
 import Map from './Components/Map';
 import Loading from './Components/Loading';
-import Db from './services/Db.js';
+import config from "./services/config";
 
 class App extends Component {
   constructor(props){
@@ -92,7 +92,7 @@ class App extends Component {
   componentDidMount(){
     this.getLocation();
 
-    this.unregisterAuthObserver = Db.onAuthStateChanged((user) => {
+    this.unregisterAuthObserver = config.authModule.onAuthStateChanged((user) => {
       this.setState({isSignedIn: !!user});
     });
   }

src/Components/LandingPage.js

@@ -11,7 +11,6 @@ import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import CustomPhotoDialog from './CustomPhotoDialog';
 
-import Db from '../services/Db';
 import config from '../services/config';
 import './LandingPage.scss';
 import Login from './Login';
@@ -75,7 +74,7 @@ class LandingPage extends Component {
     let loginLogoutDialogOpen = true;
 
     if (this.props.isSignedIn) {
-      Db.signOut();
+      config.authModule.signOut();
       loginLogoutDialogOpen = false;
     }
 
@@ -154,7 +153,10 @@ class LandingPage extends Component {
                     <MenuItem onClick={this.openPage1}>Page 1</MenuItem>
                     <MenuItem onClick={this.openPage2}>Page 2</MenuItem>
                     <MenuItem onClick={this.openPage3}>Page 3</MenuItem>
-                    <MenuItem onClick={this.handleClickLoginLogout}>{this.props.isSignedIn ? "Sign Out " + Db.currentUser().displayName : "Sign In"}</MenuItem>
+                    <MenuItem onClick={this.handleClickLoginLogout}>{this.props.isSignedIn ? "Sign Out " + config.authModule.getCurrentUser().isModerator + " " + config.authModule.getCurrentUser().displayName : "Sign In"}</MenuItem>
+                    {config.authModule.getCurrentUser().isModerator ?
+                    <MenuItem onClick={this.openPage1}>{"Moderator"}</MenuItem> : null}
+
                   </MenuList>
                 </ClickAwayListener>
               </Paper>
@@ -187,7 +189,7 @@ class LandingPage extends Component {
         <Login
           open={this.state.loginLogoutDialogOpen && this.props.isSignedIn !== undefined && !this.state.isSignedIn}
           handleClose={this.handleLoginClose}
-          loginName={config.loginComponentName}
+          loginComponent={config.loginComponent}
         />
 
       </div>

src/Components/Login.js

@@ -12,19 +12,17 @@ class Login extends React.Component {
     this.state = {
       open: false
     };
-
-    this.Component = require("../services/" + this.props.loginName + ".js").default;
-  }
+    }
 
   handleClose = () => {
     this.props.handleClose();
     return true;
   };
 
   render() {
-    const Component = this.Component;
+    const Component = this.props.loginComponent;
     return (
-      <Component key={this.props.loginName} {...this.props}/>
+      <Component key={""} {...this.props}/>
     );
   }
 }

src/Components/Map.js

@@ -3,8 +3,8 @@ import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import Button from '@material-ui/core/Button';
 import backButton from '../images/left-arrow.svg';
-import Db from '../services/Db.js';
 import './Map.scss';
+import config from "../services/config";
 
 const CENTER = [-0.1019313, 51.524311];
 const ZOOM = 10;
@@ -21,7 +21,7 @@ class Map extends Component {
   };
 
   async componentDidMount(){
-    const photos = Db.fetchPhotos();
+    const photos = config.dbModule.fetchPhotos();
 
     mapboxgl.accessToken = ''; // you can add a Mapbox access token here
     this.map = new mapboxgl.Map({

src/services/LoginFirebase.js

@@ -7,7 +7,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import withMobileDialog from '@material-ui/core/withMobileDialog'
 
-import {firebaseApp} from './firebaseInit.js';
+import firebaseApp from './firebaseInit.js';
 import firebase from 'firebase/app';
 
 import 'firebase/auth';

src/services/authFirebase.js

@@ -0,0 +1,31 @@
+import User from "../types/User";
+import firebaseApp from "./firebaseInit";
+import dbFirebase from "./dbFirebase";
+
+let currentUser;
+
+/**
+ * When the user login call fn
+ * @param fn
+ */
+const onAuthStateChanged = async (fn) => {
+  const firebaseStatusChange = async (user) => {
+    currentUser = user;
+    if (currentUser) {
+      const fbUser = await dbFirebase.getUser(user.uid);
+
+      currentUser = new User(currentUser.uid, currentUser.displayName, fbUser.isModerator, currentUser.email, currentUser.emailVerified, currentUser.isAnonymous, currentUser.phoneNumber, currentUser.photoURL);
+    }
+    fn(currentUser);
+  };
+
+  return firebaseApp.auth().onAuthStateChanged(firebaseStatusChange);
+};
+
+const signOut = () => {
+  firebaseApp.auth().signOut();
+};
+
+const getCurrentUser = () => currentUser;
+
+export default { onAuthStateChanged, signOut, getCurrentUser }

src/services/config.js

@@ -1,7 +1,11 @@
 import React from 'react';
 
+import authFirebase from './authFirebase'
+
 //change the logo file to upload your own Logo
 import imgHeader from '../images/logo.svg';
+import LoginFirebase from "./LoginFirebase";
+import dbFirebase from "./dbFirebase";
 
 // change function request to add a real server to upload a photo
 // instead of a mockup with timeout
@@ -44,5 +48,7 @@ const headerstyles = {
 export default {
   Header,
   request,
-  loginComponentName: "LoginFirebase"
+  loginComponent: LoginFirebase,
+  authModule: authFirebase,
+  dbModule: dbFirebase
 }

src/services/Db.js → src/services/dbFirebase.js

@@ -1,12 +1,14 @@
-import {firebaseApp} from './firebaseInit.js';
+import firebaseApp from './firebaseInit.js';
+
+const db = firebaseApp.firestore();
 
 async function fetchPhotos() {
   const geojson = {
     "type": "FeatureCollection",
     "features": []
   };
 
-  const querySnapshot = await firebaseApp.firestore().collection("photos").get();
+  const querySnapshot = await db.collection("photos").get();
 
   querySnapshot.forEach( doc => {
       console.log(`${doc.id} =>`, doc.data());
@@ -33,20 +35,10 @@ async function fetchPhotos() {
   return geojson;
 }
 
-/**
- * When the user login call fn
- * @param fn
- */
-const onAuthStateChanged = (fn) => {
-  return firebaseApp.auth().onAuthStateChanged(fn);
-};
-
-const signOut = () => {
-  firebaseApp.auth().signOut();
-};
-
-const currentUser = () => {
-  return firebaseApp.auth().currentUser;
-};
+async function getUser(id) {
+  const fbUser = await db.collection("users").doc(id).get();
+debugger
+  return fbUser.exists ? fbUser.data() : null;
+}
 
-export default {fetchPhotos, onAuthStateChanged, signOut, currentUser};
+export default {fetchPhotos, getUser};

src/services/firebaseInit.js

@@ -21,8 +21,4 @@ const firestore = firebaseApp.firestore();
 const settings = { timestampsInSnapshots: true };
 firestore.settings(settings);
 
-const auth= firebaseApp.auth;
-export {
-  firebaseApp,
-  auth
-}
+export default firebaseApp;

src/types/User.js

@@ -0,0 +1,14 @@
+class User {
+  constructor(id, displayName, isModerator, email, emailVerified, isAnonymous, phoneNumber, photoURL) {
+    this.id = id;
+    this.displayName = displayName;
+    this.isModerator = isModerator;
+    this.email = email;
+    this.emailVerified = emailVerified;
+    this.isAnonymous = isAnonymous;
+    this.phoneNumber = phoneNumber;
+    this.photoURL = photoURL;
+  }
+}
+
+export default User;