Feature/admin login 1

react-app/src/App.js

@@ -2,6 +2,7 @@ import React, { useState, useContext } from 'react';
 import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'
 import LoginPage from './pages/LoginPage';
 import DashboardPage from './pages/DashboardPage';
+import PasswordAvatar from './components/PasswordAvatar';
 
 const UserLoginContext = React.createContext(null)
 
@@ -18,7 +19,7 @@ function App() {
 
 	return (
 		<Router>
-			<UserLoginContext.Provider value={{userLoggedIn, signUserOut }}>
+			<UserLoginContext.Provider value={{userLoggedIn, setUserLoggedIn, signUserOut }}>
 				<Switch>
 					<Route exact path="/">
 						{userLoggedIn ? (
@@ -31,7 +32,7 @@ function App() {
 						<LoginPage logUserIn={setUserLoggedIn}/>
 					</Route>
 					<Route path='/secure-login'>
-						<div>Password</div>
+						<PasswordAvatar />
 					</Route>
 				</Switch>
 			</UserLoginContext.Provider>

react-app/src/components/CardAvatar.js

@@ -2,14 +2,14 @@ import React from 'react'
 import SignOutIcon from '../assets/sign-out.svg'
 
 function CardAvatar({ user, onSignOut }) {
-    const {name, image} = user
+    const {name, image, coins} = user
     return (
         <div className='card-avatar-wrapper'>
             <div className='card-avatar'>
                 <img src={image} alt={`${name} avatar`} />
                 <div className='card-avatar-info-container'>
                     <div className='card-avatar-title'>Hello, {name}!</div>
-                    <button className='help-point-btn'>{425} HC</button>
+                    <button className='btn help-point-btn'>{coins} HC</button>
                 </div>
             </div>
             <button className='leave-btn' onClick={onSignOut}>

react-app/src/components/PasswordAvatar.js

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react'
+import RoundedAvatar from './RoundedAvatar'
+import BackArrowImg from '../assets/back-arrow.svg'
+import ShowPasswordImg from '../assets/show-password.svg'
+
+function PasswordAvatar({ user, onBack }) {
+    const [password, setPassword] = useState('')
+    const [showPassword, setShowPassword] = useState(false)
+
+    function authenticateUser(event) {
+        event.preventDefault()
+    }
+
+    function onPasswordChange(event) {
+        setPassword(event.target.value)
+    }
+
+    return (
+        <div className='password-avatar-container'>
+            <button type='button' className='default-btn back-arrow-btn' onClick={onBack}>
+                <img  src={BackArrowImg} alt='back arrow'/>
+            </button>
+            <div>
+                <RoundedAvatar user={user} />
+                <form className='password-form' onSubmit={authenticateUser}>
+                    <div className='sign-in-container'>
+                        <div className='password-textbox-container'>
+                            <input className='textbox password-textbox' type={(showPassword) ? 'password' : 'text'} name='password' onChange={onPasswordChange} required/>
+                            <button type='button' className={`default-btn show-password-btn ${(showPassword) ? 'visible' : ''}`} onMouseDown={() => setShowPassword(!showPassword)}>
+                                <img  src={ShowPasswordImg} alt='show password'/>
+                            </button>
+                        </div>
+                        <button type='button' className='btn'>Sign In</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default PasswordAvatar

react-app/src/components/task-card/FlipTaskCard.js

@@ -36,7 +36,7 @@ function FlipTaskCard({ task, completeTask, flippable = true }) {
     return (
         <CSSTransition in={task.isComplete} timeout={REMOVE_TASK_DELAY} classNames="remove-fade">
             <ReactCardFlip isFlipped={isFlip} flipDirection='horizontal' infinite={true}>
-                <TaskCard key='front' task={task} onClick={handleCardClick}/>
+                <TaskCard key='front' task={task} isFlippable={flippable} onClick={handleCardClick}/>
                 {(task.isComplete) ? (
                     <CompletionCard key='back' points={task.rewardPoints} onClick={handleCardClick}/>
                 ) : (

react-app/src/components/task-card/TaskCard.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import Card from './Card'
 
-function TaskCard({ task, ...rest }) {
+function TaskCard({ task, isFlippable, ...rest }) {
     const { title, rewardPoints, colour } = task
+
     return (
-        <Card colour={colour} {...rest}>
+        <Card colour={colour} className={(isFlippable) ? 'pointer': ''} {...rest}>
             <div className='reward'><span className='reward-points'>{rewardPoints}</span></div>
             <div className='task-title'>{title}</div>
         </Card>

react-app/src/components/task-grid/TaskGrid.js

@@ -7,7 +7,7 @@ import firebase from '../../firebase'
 export const REMOVE_TASK_DELAY = 2000
 
 function TaskGrid({ tasks = [], flippableTask = true, className = '' }) {
-    const { userLoggedIn } = useUserLogged()
+    const { userLoggedIn, setUserLoggedIn } = useUserLogged()
     const [taskGridtasks, setTaskGridTasks] = useState([])
     const [completedTask, setCompletedTask] = useState(null)
 
@@ -32,11 +32,25 @@ function TaskGrid({ tasks = [], flippableTask = true, className = '' }) {
                     completedBy: task.completedBy,
                     completedDate: firebase.firestore.FieldValue.serverTimestamp()
                 })
+            const totalHelpCoins = userLoggedIn.coins + task.rewardPoints
+            updateHelpCoins(totalHelpCoins)
+
         } catch (err) {
             console.log(err)
         }
     }
 
+    function updateHelpCoins(amount) {
+        firebase
+            .firestore()
+            .collection('users')
+            .doc(userLoggedIn.id)
+            .update({
+                coins: amount
+            })
+        setUserLoggedIn({ ...userLoggedIn, coins: amount})
+    }
+
     function completeTask(task) {
         setCompletedTask(task)
         const newTasks = taskGridtasks.map(function completeSingleTask(t) {

react-app/src/domain/User.js

@@ -5,13 +5,14 @@ import JackImg from '../assets/users/[email protected]'
 export const ADMIN_USER = 'admin'
 export const REGULAR_USER = 'regular'
 
-export function createUser({id, name, age, role}) {
+export function createUser({id, name, age, role, coins}) {
     return {
         id,
         name,
         age,
         role,
-        image: getUserImage(name)
+        image: getUserImage(name),
+        coins
     }
 }
 

react-app/src/index.css

@@ -59,6 +59,10 @@ body {
   padding: 0 0.5rem;
 }
 
+.pointer {
+  cursor: pointer;
+}
+
 .task-option-btn {
   display: flex;
   flex-direction: column;
@@ -70,6 +74,8 @@ body {
   background: none;
   border: none;
   padding: 0;
+
+  cursor: pointer;
 }
 
 .task-option-btn.cross-option {
@@ -227,6 +233,77 @@ body {
   color: #555555;
 }
 
+/* Password Avatar */
+.password-avatar-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.default-btn {
+  padding: 0;
+  border: 0;
+  background: none;
+}
+
+.back-arrow-btn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-top: -3.5rem;
+  margin-left: -1rem;
+  cursor: pointer;
+}
+
+.password-form {
+  margin-top: 1rem;
+}
+
+.textbox {
+  width: 16rem;
+  height: 2.25rem;
+  border: 2px solid #555555;
+}
+
+.password-textbox {
+  padding: 0 1rem;
+  padding-right: 2rem;
+  letter-spacing: 0.2em;
+  font-size: 0.75rem;
+}
+
+.sign-in-container {
+  display: flex;
+  align-items: center;
+  margin-top: 3rem;
+}
+
+.sign-in-container .btn{
+  margin-left: 1rem;
+}
+
+.password-textbox-container {
+  position: relative;
+}
+
+.show-password-btn { 
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin-top: 0.75rem;
+  margin-right: 0.5rem;
+  opacity: 0.6;
+}
+
+.show-password-btn:hover { 
+  opacity: 1;
+}
+
+.show-password-btn .visible { 
+  opacity: 1;
+}
+
 /* Sidebar */
 
 .sidebar {
@@ -268,14 +345,17 @@ body {
   font-weight: 300;
 }
 
-.help-point-btn {
-  margin-top: 0.25rem;
-  padding: 0.5rem 0.5rem;
-  color: white;
+.btn {
+  height: 2.25rem;
   font-size: inherit;
-  font-weight: 600;
   background-color: #FF8933;
   border: none;
+  color: white;
+}
+
+.help-point-btn {
+  margin-top: 0.25rem;
+  font-weight: 600;
 }
 
 .leave-btn {

react-app/src/pages/LoginPage.js

@@ -4,11 +4,13 @@ import { createUser, ADMIN_USER } from '../domain/User'
 import RoundedAvatar from '../components/RoundedAvatar'
 import LoadingAnimation from '../components/LoadingAnimation'
 import firebase from 'firebase'
+import PasswordAvatar from '../components/PasswordAvatar';
 
 function LoginPage({ logUserIn }) {
     const history = useHistory()
     const [users, setUsers] = useState([])
     const [isLoading, setIsLoading] = useState(true)
+    const [adminUser, setAdminUser] = useState(null)
 
     useEffect(() => {
         function fetchUsers() {
@@ -29,10 +31,14 @@ function LoginPage({ logUserIn }) {
 
     function onAvatarImgClick(user) {
         if (user.role === ADMIN_USER) {
-            history.push('/secure-login')
+            setAdminUser(user)
         } else {
-            history.replace('/')
+            logUser(user)
         }
+    }
+
+    function logUser(user) {
+        history.replace('/')
         logUserIn(user)
     }
 
@@ -42,10 +48,14 @@ function LoginPage({ logUserIn }) {
                 {isLoading ? (
                     <LoadingAnimation />
                 ): (
-                    <div className='users-container'>
-                        {users && users.map((user) =>
-                            (<RoundedAvatar key={user.id} user={user} onImgClick={() => onAvatarImgClick(user)}/>))}
-                    </div>
+                    (adminUser) ? (
+						<PasswordAvatar user={adminUser} onBack={() => setAdminUser(null)}/>
+                    ) : (
+                        <div className='users-container'>
+                            {users && users.map((user) =>
+                                (<RoundedAvatar key={user.id} user={user} onImgClick={() => onAvatarImgClick(user)}/>))}
+                        </div>
+                    )
                 )}
             </div>
             <div className='login-side-img'></div>