Merge pull request #114 from weaponsforge/dev

v2.0.0

client/README.md

@@ -32,6 +32,8 @@ The following dependecies are used for this project. Feel free to experiment usi
 
 ## Installation
 
+### General Set-up and Configuration
+
 1. Install dependencies.<br>
 `npm install`
 
@@ -53,11 +55,42 @@ The following dependecies are used for this project. Feel free to experiment usi
  | NEXT_PUBLIC_MEDIA_BG1 | Firebase storage download URL of the hi-resolution asset file "loginBgResized.jpg" |
  | NEXT_PUBLIC_RANDOM_JOKE_API | Access URL to the JokeAPI, a REST API that serves uniformly and well formatted jokes. |
 
-4. Deploy the Firestore Security Rules defined in the "firestore.rules" file using the Firebase CLI.<br>
+## Firebase Setup and Configuration
+
+The following steps and instructions requires login to Firebase CLI. Read on the [Firebase CLI Quick Usage Reference](#firebase-cli-quick-usage-reference) section for more information on common Firebase CLI usage and examples.
+
+### Firestore Database
+
+1. Create and initialize a Firestore Database in the [Firebase Web console](https://firebase.google.com/).
+2. Deploy the Firestore Security Rules defined in the `"firestore.rules"` file using the Firebase CLI.<br>
 `firebase deploy --only firestore:rules`
 
-5. Deploy the Firebase Storage Security Rules defined in the "storage.rules" file using the Firebase CLI.<br>
+### Firebase Storage
+
+1. Create and initialize a Firestore Storage in the [Firebase Web console](https://firebase.google.com/).
+2. Deploy the Firebase Storage Security Rules defined in the `"storage.rules"` file using the Firebase CLI.<br>
 `firebase deploy --only storage:dev`
+3. Allow CORS on Firebase Storage using Google Cloud Shell
+ - Go to your Firebase project’s google cloud console on http://console.cloud.google.com/home.
+ - Activate the cloud shell by clicking the **Activate Cloud Shell** button on the upper right menu.
+ - Create a cors.json file on the cloud shell using any of it's cloud-based text editors. Copy and paste the following contents to the JSON file:<br>
+
+ ```
+ [
+ {
+ "origin": ["*"],
+ "method": ["GET"],
+ "maxAgeSeconds": 3600
+ }
+ ]
+ ```
+ - Put whitelisted domains in the cors.json file's `"origin"` field value as needed. For example:<br>
+`"origin": ["https://weaponsforge.github.io"]`
+ - Run the command on cloud shell. Replace `BUCKET_NAME` with your Firebase Storage bucket name:
+ - `gsutil cors set cors.json gs://BUCKET_NAME`
+ - `gsutil cors set cors.json gs://mybucket.appspot.com` (Example)
+ - View the current cors configuration of a bucket:
+ - `gsutil cors get gs://BUCKET_NAME`
 
 ## Usage
 
@@ -68,6 +101,21 @@ The following dependecies are used for this project. Feel free to experiment usi
 
 3. Run the `"npm run lint"` script to check for lint errors before committing to the repository.
 
+## Firebase CLI Quick Usage Reference
+
+- Install Firebase CLI (using NodeJS), run:<br>
+`npm install -g firebase-tools`
+
+- Login/logout to your Firebase account using the Firebase CLI.
+ - `firebase login` (login)
+ - `firebase logout` (logout)
+- Generate a Firebase CI token.
+ - `firebase login:ci`
+ - Copy the resulting token on the command line.
+- Switch/use another firebase project.
+ - `firebase use --add`
+ - Select a firebase project from the list.
+
 
 ## Available Scripts
 

client/firestore.rules

@@ -45,14 +45,15 @@ service cloud.firestore {
  (!('last_name' in requestData.keys()) || requestData.last_name.size() < 50) &&
  (!('middle_name' in requestData.keys()) || requestData.middle_name.size() < 50) &&
  (!('phone_number' in requestData.keys()) || requestData.phone_number.size() < 20) &&
- (!('profile_picture_url' in requestData.keys()) || requestData.profile_picture_url.size() < 600) &&
+ (!('profile_picture_url' in requestData.keys()) || requestData.profile_picture_url.size() < 100) &&
  (!('sorting' in requestData.keys()) || requestData.phone_number.size() < 200);
  }
 
  // Check if Contact fields satisfies other requirements
  function validContactField (requestData) {
  return
- (!('email_address' in requestData.keys()) || requestData.email_address.matches('.*@.*[.].*'))
+ (!('email_address' in requestData.keys()) || requestData.email_address.matches('.*@.*[.].*')) &&
+ (!('profile_picture_url' in requestData.keys()) || !requestData.profile_picture_url.matches('http.*'));
  }
 
  // New Contact documents should contain only the specified keys

client/package.json

@@ -29,6 +29,6 @@
  "next": "13.2.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",
- "use-sync-v": "^2.0.1"
+ "use-sync-v": "^2.0.16"
  }
 }

client/src/common/layout/footer/index.js

@@ -8,7 +8,7 @@ function Footer() {
  <>
  {!mobile && (
  <Paper
- elevation={1}
+ elevation={10}
  sx={{
  width: '100%',
  minHeight: (theme) => theme.spacing(4),

client/src/common/layout/header/index.js

@@ -22,7 +22,7 @@ const loggedInSettings = [
  },
  {
  name: 'Account',
- route: '/',
+ route: '/settings',
  },
  {
  name: 'Logout',
@@ -32,15 +32,15 @@ const loggedInSettings = [
 const loggedOutSettings = [
  {
  name: 'Register',
- route: 'register',
+ route: '/register',
  },
  {
  name: 'Login',
- route: 'login',
+ route: '/login',
  },
  {
  name: 'Recover Password',
- route: 'recoverPassword',
+ route: '/recoverPassword',
  },
 ]
 
@@ -84,7 +84,7 @@ function Header() {
 
  return (
  <Paper
- elevation={1}
+ elevation={10}
  sx={{
  position: 'relative',
  zIndex: 100,
@@ -95,14 +95,31 @@ function Header() {
  alignItems: 'center',
  gap: '10px',
  borderRadius: 0,
- width:'100%'
+ width: '100%',
  }}
  >
- {authUser && isMobile && (
+ {authUser && (
  <IconButton onClick={toggleSidebar}>
  <MenuIcon />
  </IconButton>
  )}
+ {!isMobile && (
+ <Typography
+ variant="h5"
+ sx={{
+ display: 'flex',
+ fontFamily: 'monospace',
+ fontWeight: 'bold',
+ // letterSpacing: ".1rem",
+ textDecoration: 'none',
+ width: '270px',
+ color: (theme) => theme.palette.text.primary,
+ userSelect: 'none',
+ }}
+ >
+ myPhonebook
+ </Typography>
+ )}
  <Box
  sx={{
  display: 'flex',

client/src/common/layout/header/searchField/index.js

@@ -6,11 +6,6 @@ export const SearchFieldComponent = () => {
  const searchFieldHandler = (e) => {
  e.stopPropagation()
  updateSyncV('ui.search.searchKeyword', e.target.value)
- updateSyncV('ui.phase', (p) => ({
- ...p,
- createContact: false,
- editContact: false,
- }))
  if (e.target.value === '') {
  updateSyncV('ui.phase.search', false)
  } else {

client/src/common/layout/page/index.js

@@ -1,12 +1,11 @@
 import Box from '@mui/material/Box'
-
-import Footer from '@/common/layout/footer'
 import Header from '@/common/layout/header'
 import Section from '@/common/layout/section'
 import { useSyncLocalStorage } from '@/lib/hooks/useSync'
 import { Sidebar } from '../sidebar'
-import { useSyncV } from 'use-sync-v'
-import { useMediaQuery } from '@mui/material'
+import { updateSyncV, useSyncV } from 'use-sync-v'
+import { Divider, useMediaQuery } from '@mui/material'
+import { useEffect } from 'react'
 
 const Background = () => {
  const activeTheme = useSyncLocalStorage('activeTheme')
@@ -69,10 +68,17 @@ const Background = () => {
 }
 
 function Page({ children }) {
+ const auth = useSyncV('auth')
  const animate = useSyncLocalStorage('animate')
  const showSidebar = useSyncV('show.sidebar')
  const isMobile = useMediaQuery('(max-width:900px)')
-
+ useEffect(() => {
+ if (isMobile) {
+ updateSyncV('show.sidebar', false)
+ } else {
+ updateSyncV('show.sidebar', true)
+ }
+ }, [isMobile])
  return (
  <>
  {animate && <Background />}
@@ -84,19 +90,21 @@ function Page({ children }) {
  bottom: '0',
  right: '0',
  display: 'flex',
+ flexDirection: 'column',
  }}
  >
- {(showSidebar || !isMobile) && <Sidebar />}
+ <Header />
  <Box
  sx={{
+ flex: 1,
  display: 'flex',
- flexDirection: 'column',
- width:`${isMobile ? '100%' : 'calc(100vw - 200px)'}`
+ overflowY:'scroll'
  }}
  >
- <Header />
+ {showSidebar && auth.authStatus === 'signedIn' && <Sidebar />}
+ <Divider orientation="vertical" variant="middle" flexItem />
+
  <Section>{children}</Section>
- <Footer />
  </Box>
  </Box>
  </>

client/src/common/layout/section/styles.js

@@ -4,7 +4,7 @@ const styles = {
  display: 'flex',
  flexDirection: 'column',
  overflow:'scroll',
- width:'100vw'
+ width:'100%'
  }
 }