Merge pull request #42 from ZFGCCP/development

Development

env.development.local

@@ -0,0 +1 @@
+REACT_APP_API_URL=http://localhost:8080/forum

package.json

@@ -3,22 +3,32 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.20.0",
     "bootstrap": "^4.5.3",
+    "dotenv-cli": "^4.0.0",
+    "jstz": "^2.1.1",
     "node-sass": "^4.14.1",
     "react": "^16.14.0",
     "react-bootstrap": "^1.3.0",
+    "react-datepicker": "^3.3.0",
     "react-dom": "^16.14.0",
     "react-facebook-login": "^4.1.1",
+    "react-google-recaptcha": "^2.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "build-dev-local": "dotenv -e .env.development.local react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.js

@@ -2,12 +2,16 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.scss';
 import ZfgcHeader from './components/zfgc-header/zfgc-header.component.js';
+import ZfgcFooter from './components/zfgc-header/zfgc-footer.component.js';
 import {
   BrowserRouter as Router,
   Switch,
   Route, Link
 } from "react-router-dom";
 import SignIn from './components/sign-in/sign-in.component.js';
+import NewUserRoute from './routing/new-user.route.js';
+import ViewMembers from './routing/members/view-members.route.js';
+import ProfileRoute from './routing/profile/profile.route.js';
 
 function App() {
   document.body.classList.add('theme-midnight');
@@ -22,7 +26,24 @@ function App() {
         <Route path="/signin">
           <SignIn/>
         </Route>
+        <Route path="/registration">
+          <NewUserRoute/>
+        </Route>
+
+        //top nav
+        <Route path="/members">
+          <ViewMembers/>
+        </Route>
+
+
+        //user profile
+        <Route path="/profile/profileinfo" component={ProfileRoute}/>
       </Switch>
+
+
+      <div className="zfgc-bottom">
+        <ZfgcFooter></ZfgcFooter>
+      </div>
     </Router>
   );
 }

src/App.scss

@@ -1,7 +1,16 @@
 @import 'assets/style/variables.scss';
-@import "~bootstrap/scss/bootstrap";
+
+@import 'assets/style/collapsible.scss';
+@import 'assets/style/footer.scss';
+@import 'assets/style/forms.scss';
 @import 'assets/style/header.scss';
+@import 'assets/style/paginator.scss';
+@import 'assets/style/profile.scss';
+@import 'assets/style/registration.scss';
 @import 'assets/style/sign-in.scss';
+@import 'assets/style/users.scss';
+
+@import "../node_modules/react-datepicker/dist/react-datepicker.css";
 
 html {
   height: 100%;
@@ -11,3 +20,5 @@ body {
   font-size: 1em;
   font-family: Verdana, Helvetica, sans-serif;
 }
+
+@import "~bootstrap/scss/bootstrap";

src/assets/style/collapsible.scss

@@ -0,0 +1,20 @@
+.accordion {
+    background-color: $msecondary;
+    border: $border-stroke solid;
+    border-radius: $border-radius;
+    margin-top: 2em;
+    box-shadow: 0.3em 1em 1em black;
+
+    &.zfgc-collapsible{
+        padding: 0;
+    }
+
+    .card {
+        background-color: $msecondary;
+
+        .card-body {
+            padding: 0px;
+            background-color: $msecondary;
+        }
+    }
+}

src/assets/style/footer.scss

@@ -0,0 +1,19 @@
+.zfgc-bottom{
+	bottom: 0;
+    position: absolute;
+    width: 100%;
+
+	.zfgc-footer{
+	    border-top: .2em solid black;
+	    box-shadow: 0 -.1em 0.3em black;
+
+
+	    .nav-heading {
+		 	.nav-tab{
+		 	 	.nav-icon{
+		 	 		font-size: 2em;
+		 	 	}
+	    	}
+		}
+	}
+}

src/assets/style/forms.scss

@@ -0,0 +1,78 @@
+.zfgc-form{
+	label {
+		font-weight: 600;
+	}
+
+	&.was-validated {
+		.form-control, .custom-select{
+			border: .15em solid;
+		}
+	} 
+
+	.react-datepicker-wrapper{
+		display: block;
+	}
+
+	input {
+		border: .1em solid black;
+	}
+
+	select {
+		border: .1em solid black;
+	}
+
+	input[type="checkbox"], input[type="radio"]{
+		appearance: none;
+		background-color: #ffffff;
+	    padding: .445em;
+	    display: inline-flex;
+	    position: relative;
+	    margin-right: .4em;
+
+	    &:checked:after{
+		    font-size: 1em;
+		    font-weight: 600;
+		    position: absolute;
+	    }
+	}
+
+	input[type="checkbox"]{
+		border-radius: .2em;
+	    &:checked:after{
+	    	content: '\2714';
+		    top: -.3em;
+    		left: -.05em;
+	    }
+	}
+
+	input[type="radio"]{
+		border-radius: .5em;
+	    &:checked:after{
+    	    content: '\25CF';
+		    top: -.35em;
+    		left: .14em;
+	    }
+	}
+
+	.btn {
+		&:disabled{
+			background-color: transparent !important;
+    		border: .1em solid black;
+    		cursor: not-allowed;
+		}
+
+		margin-right: 1em;
+
+		&.btn-primary {
+    		box-shadow: 0.2em 0.2em 0.4em 0 black;
+    		border: .13em solid black;
+    		font-weight: 600;
+		}
+
+		&.btn-danger{
+			box-shadow: 0.2em 0.2em 0.4em 0 black;
+    		border: .13em solid black;
+    		font-weight: 600;
+		}
+	}
+}

src/assets/style/header.scss

@@ -1,8 +1,55 @@
 .zfgc-header{
-	border-bottom: .2em solid black;
-	padding: 1em;
+    border-bottom: .2em solid black;
+    padding: 1em;
+    display: flex;
+    justify-content: space-between;
+    box-shadow: 0 0.1em 0.3em black;
 
 	.user-heading{
 		font-weight: bold;
+
+		.logged-in-wrapper{
+			display: flex;
+
+			img {
+				width: 4.5em;
+    			border: .1em solid;
+    			margin-right: 1em;
+			}
+
+			.logout-button{
+				cursor: pointer;
+			}
+		}
+	}
+
+	.nav-heading{
+		.nav-tab{
+		    width: 5em;
+		    border-left: 1px solid #122140;
+		    border-right: 1px solid #122140;
+		    border-top: 1px solid #122140;
+		    border-top-left-radius: .5em;
+		    border-top-right-radius: .5em;
+		    background-color: #25334e;
+		    position: relative;
+		    top: 3em;
+		    height: 3em;
+		    display: flex;
+		    box-shadow: 0 0 0.3em 0 black;
+		    justify-content: center;
+		    padding-top: .7em;
+		    cursor: pointer;
+
+    		.nav-icon{
+    			font-size: 1.7em;
+    		}
+		}
+	}
+
+	.title-heading {
+		img {
+			height: 5em;
+		}
 	}
 }

src/assets/style/paginator.scss

@@ -0,0 +1,21 @@
+.paginator{
+	.left{
+		font-size: 2.5em;
+		padding-right: .1em;
+		cursor: pointer;
+
+		&.disabled{
+			cursor: not-allowed !important;
+		}
+	}
+
+	.right{
+		font-size: 2.5em;
+		padding-left: .1em;
+		cursor: pointer;
+
+		&.disabled{
+			cursor: not-allowed !important;
+		}
+	}
+}

src/assets/style/profile.scss

@@ -0,0 +1,50 @@
+.profile-wrapper{
+	label{
+		font-weight: bold;
+	}
+
+	.basic-details{
+		.avatar-wrapper{
+			img{
+				border-radius: .5em;
+    			border: .1em solid;
+    			width: 8em;
+    			height: 8em;
+			}
+		}
+
+		.personal-text-wrapper{
+			width: 128px;
+			font-size: .8em;
+		}
+	}
+
+	.utility-details{
+		.quick-comm-wrapper{
+			font-size: 1.5em;
+		}
+	}
+
+	.nav-wrapper{
+		.nav-item{
+			border-left: .1em solid;
+    		border-right: .1em solid;
+		    padding: 0 .3em;
+		    cursor: pointer;
+
+		    &.selected, &:hover {
+		    	box-shadow: 0 0 1em 0.5em black;
+		    	clip-path: inset(.1em -1em .1em -1em);
+
+		    }
+		}
+
+	}
+
+	.profile-summary{
+		.signature-wrapper{
+			white-space: nowrap;
+			overflow-x: auto;
+		}
+	}
+}

src/assets/style/registration.scss

@@ -0,0 +1,13 @@
+.tos-container {
+	display: inline-block;
+    padding: .5em;
+    height: 10em;
+    margin: 1em 0;
+    max-width: 45em;
+    overflow-y: auto;
+    background-color: #132241;
+    border-top: .1em solid;
+    border-left: .1em solid;
+    border-bottom: .2em solid black;
+    box-shadow: 0 0.1em 0.2em black;
+}

src/assets/style/sign-in.scss

@@ -1,11 +1,6 @@
 .sign-in-form{
 
 	form{
-		background-color: $msecondary;
 	    padding: 2em;
-	    border: $border-stroke solid;
-	    border-radius: $border-radius;
-	    margin-top: 2em;
-	    box-shadow: 0.3em 1em 1em black;
 	}
 }