From 371354fd5a88910edb7e5771bd3894410805a5e5 Mon Sep 17 00:00:00 2001
From: Dinys <dinysmon2013>
Date: Fri, 6 Nov 2020 20:08:40 +1100
Subject: [PATCH 1/3] Add help coins balance for a user, add help coins when
 task completed

---
 react-app/src/App.js                           |  2 +-
 react-app/src/components/CardAvatar.js         |  4 ++--
 react-app/src/components/task-grid/TaskGrid.js | 16 +++++++++++++++-
 react-app/src/domain/User.js                   |  5 +++--
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/react-app/src/App.js b/react-app/src/App.js
index 892836b..49c8c9d 100644
--- a/react-app/src/App.js
+++ b/react-app/src/App.js
@@ -18,7 +18,7 @@ function App() {
 
 	return (
 		<Router>
-			<UserLoginContext.Provider value={{userLoggedIn, signUserOut }}>
+			<UserLoginContext.Provider value={{userLoggedIn, setUserLoggedIn, signUserOut }}>
 				<Switch>
 					<Route exact path="/">
 						{userLoggedIn ? (
diff --git a/react-app/src/components/CardAvatar.js b/react-app/src/components/CardAvatar.js
index e98856a..297b869 100644
--- a/react-app/src/components/CardAvatar.js
+++ b/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='help-point-btn'>{coins} HC</button>
                 </div>
             </div>
             <button className='leave-btn' onClick={onSignOut}>
diff --git a/react-app/src/components/task-grid/TaskGrid.js b/react-app/src/components/task-grid/TaskGrid.js
index 3eab192..21838f5 100644
--- a/react-app/src/components/task-grid/TaskGrid.js
+++ b/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) {
diff --git a/react-app/src/domain/User.js b/react-app/src/domain/User.js
index f6ab27b..1d04218 100644
--- a/react-app/src/domain/User.js
+++ b/react-app/src/domain/User.js
@@ -5,13 +5,14 @@ import JackImg from '../assets/users/Jack@x2.png'
 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
     }
 }
 

From 0de306921a9d2b635833d799a81379440960a7b2 Mon Sep 17 00:00:00 2001
From: Dinys <dinysmon2013@gmail.com>
Date: Fri, 6 Nov 2020 21:09:45 +1100
Subject: [PATCH 2/3] Add hand pointer to flippable card

---
 react-app/src/components/task-card/FlipTaskCard.js | 2 +-
 react-app/src/components/task-card/TaskCard.js     | 5 +++--
 react-app/src/index.css                            | 6 ++++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/react-app/src/components/task-card/FlipTaskCard.js b/react-app/src/components/task-card/FlipTaskCard.js
index 78fd7f1..edd22e0 100644
--- a/react-app/src/components/task-card/FlipTaskCard.js
+++ b/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}/>
                 ) : (
diff --git a/react-app/src/components/task-card/TaskCard.js b/react-app/src/components/task-card/TaskCard.js
index fead14c..e30ada1 100644
--- a/react-app/src/components/task-card/TaskCard.js
+++ b/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>
diff --git a/react-app/src/index.css b/react-app/src/index.css
index 2fc9c40..b17fcbc 100644
--- a/react-app/src/index.css
+++ b/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 {

From c1d85c7f74f33e744fb551b31a31bcb7671fb808 Mon Sep 17 00:00:00 2001
From: Dinys <dinysmon2013>
Date: Sat, 14 Nov 2020 10:22:14 +1100
Subject: [PATCH 3/3] Add user password login screen

---
 react-app/src/App.js                       |  3 +-
 react-app/src/assets/back-arrow.svg        |  3 +
 react-app/src/assets/show-password.svg     |  3 +
 react-app/src/components/CardAvatar.js     |  2 +-
 react-app/src/components/PasswordAvatar.js | 41 +++++++++++
 react-app/src/index.css                    | 84 ++++++++++++++++++++--
 react-app/src/pages/LoginPage.js           | 22 ++++--
 7 files changed, 145 insertions(+), 13 deletions(-)
 create mode 100644 react-app/src/assets/back-arrow.svg
 create mode 100644 react-app/src/assets/show-password.svg
 create mode 100644 react-app/src/components/PasswordAvatar.js

diff --git a/react-app/src/App.js b/react-app/src/App.js
index 49c8c9d..e9bc3d8 100644
--- a/react-app/src/App.js
+++ b/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)
 
@@ -31,7 +32,7 @@ function App() {
 						<LoginPage logUserIn={setUserLoggedIn}/>
 					</Route>
 					<Route path='/secure-login'>
-						<div>Password</div>
+						<PasswordAvatar />
 					</Route>
 				</Switch>
 			</UserLoginContext.Provider>
diff --git a/react-app/src/assets/back-arrow.svg b/react-app/src/assets/back-arrow.svg
new file mode 100644
index 0000000..8b5d734
--- /dev/null
+++ b/react-app/src/assets/back-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 10.5H5.745L14.13 2.115L12 0L0 12L12 24L14.115 21.885L5.745 13.5H24V10.5Z" fill="#555555"/>
+</svg>
diff --git a/react-app/src/assets/show-password.svg b/react-app/src/assets/show-password.svg
new file mode 100644
index 0000000..c588e90
--- /dev/null
+++ b/react-app/src/assets/show-password.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0.375C5.25 0.375 2.0475 2.7075 0.75 6C2.0475 9.2925 5.25 11.625 9 11.625C12.75 11.625 15.9525 9.2925 17.25 6C15.9525 2.7075 12.75 0.375 9 0.375ZM9 9.75C6.93 9.75 5.25 8.07 5.25 6C5.25 3.93 6.93 2.25 9 2.25C11.07 2.25 12.75 3.93 12.75 6C12.75 8.07 11.07 9.75 9 9.75ZM9 3.75C7.755 3.75 6.75 4.755 6.75 6C6.75 7.245 7.755 8.25 9 8.25C10.245 8.25 11.25 7.245 11.25 6C11.25 4.755 10.245 3.75 9 3.75Z" fill="#555555"/>
+</svg>
diff --git a/react-app/src/components/CardAvatar.js b/react-app/src/components/CardAvatar.js
index 297b869..474c5fc 100644
--- a/react-app/src/components/CardAvatar.js
+++ b/react-app/src/components/CardAvatar.js
@@ -9,7 +9,7 @@ function CardAvatar({ user, onSignOut }) {
                 <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'>{coins} HC</button>
+                    <button className='btn help-point-btn'>{coins} HC</button>
                 </div>
             </div>
             <button className='leave-btn' onClick={onSignOut}>
diff --git a/react-app/src/components/PasswordAvatar.js b/react-app/src/components/PasswordAvatar.js
new file mode 100644
index 0000000..e106b51
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/react-app/src/index.css b/react-app/src/index.css
index b17fcbc..5d1c869 100644
--- a/react-app/src/index.css
+++ b/react-app/src/index.css
@@ -233,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 {
@@ -274,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 {
diff --git a/react-app/src/pages/LoginPage.js b/react-app/src/pages/LoginPage.js
index fd309d4..9a43cc1 100644
--- a/react-app/src/pages/LoginPage.js
+++ b/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>