[#164973542 Feature] add user logout and profile update

timi-codes · Mar 28, 2019 · 20ae31e · 20ae31e
1 parent da08e83
commit 20ae31e
Show file tree

Hide file tree

Showing 9 changed files with 335 additions and 6 deletions.
diff --git a/UI/admin/customer.html b/UI/admin/customer.html
@@ -17,11 +17,15 @@
       <header>
         <div class="top">
           <a href="../index.html"><img src="../img/banka-blue-logo.svg"/></a>
-          <div class="current-user web-user">
+          <div class="current-user web-user dropdown">
             <img class="avatar" src="../img/emeka [email protected]" />
             <h4>Tejumola Peter</h4>
             <span>(admin)</span>
             <img class="arrow-down" src="../img/arrow-drop-down.svg" />
+            <div class="dropdown-content">
+              <a href="#" id="profile-button">Profile</a>
+              <a href="../index.html">Logout</a>
+            </div>
           </div>
         </div>
       </header>
@@ -162,6 +166,51 @@ <h3>Create admin or user account</h3>
           <button class="signup">Create</button>
         </div>
       </div>
+
+      <div id="profileModal" class="modal">
+        <div class="onboarding-modal">
+          <img class="avatar" src="../img/emeka [email protected]" />
+          <input
+            type="text"
+            id="fname"
+            name="fname"
+            value="Timi"
+            placeholder="First Name"
+            disabled
+          />
+          <input
+            type="text"
+            id="lname"
+            name="lname"
+            value="Tejumola"
+            placeholder="Last Name"
+            disabled
+          />
+          <input
+            type="text"
+            id="email"
+            name="email"
+            value="[email protected]"
+            placeholder="Email Address"
+            disabled
+          />
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Password"
+          />
+
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Confirm Password"
+          />
+
+          <button class="update">Update</button>
+        </div>
+      </div>
     </div>
   </body>
 

diff --git a/UI/admin/dashboard.html b/UI/admin/dashboard.html
@@ -17,11 +17,15 @@
       <header>
         <div class="top">
           <a href="../index.html"><img src="../img/banka-blue-logo.svg"/></a>
-          <div class="current-user web-user">
+          <div class="current-user web-user dropdown">
             <img class="avatar" src="../img/emeka [email protected]" />
             <h4>Tejumola Peter</h4>
             <span>(admin)</span>
             <img class="arrow-down" src="../img/arrow-drop-down.svg" />
+            <div class="dropdown-content">
+              <a href="#" id="profile-button">Profile</a>
+              <a href="../index.html">Logout</a>
+            </div>
           </div>
         </div>
       </header>
@@ -172,6 +176,51 @@ <h3>Create admin or user account</h3>
           <button class="signup">Create</button>
         </div>
       </div>
+
+      <div id="profileModal" class="modal">
+        <div class="onboarding-modal">
+          <img class="avatar" src="../img/emeka [email protected]" />
+          <input
+            type="text"
+            id="fname"
+            name="fname"
+            value="Peter"
+            placeholder="First Name"
+            disabled
+          />
+          <input
+            type="text"
+            id="lname"
+            name="lname"
+            value="Tejumola"
+            placeholder="Last Name"
+            disabled
+          />
+          <input
+            type="text"
+            id="email"
+            name="email"
+            value="[email protected]"
+            placeholder="Email Address"
+            disabled
+          />
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Password"
+          />
+
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Confirm Password"
+          />
+
+          <button class="update">Update</button>
+        </div>
+      </div>
     </div>
   </body>
 

diff --git a/UI/cashier/customer.html b/UI/cashier/customer.html
@@ -17,11 +17,15 @@
       <header>
         <div class="top">
           <a href="../index.html"><img src="../img/banka-blue-logo.svg"/></a>
-          <div class="current-user web-user">
+          <div class="current-user web-user dropdown">
             <img class="avatar" src="../img/emeka [email protected]" />
             <h4>Tejumola Peter</h4>
             <span>(cashier)</span>
             <img class="arrow-down" src="../img/arrow-drop-down.svg" />
+            <div class="dropdown-content">
+              <a href="#" id="profile-button">Profile</a>
+              <a href="../index.html">Logout</a>
+            </div>
           </div>
         </div>
       </header>
@@ -156,6 +160,51 @@ <h3>Credit/Debit Account</h3>
           <button class="submit">Submit</button>
         </div>
       </div>
+
+      <div id="profileModal" class="modal">
+        <div class="onboarding-modal">
+          <img class="avatar" src="../img/emeka [email protected]" />
+          <input
+            type="text"
+            id="fname"
+            name="fname"
+            value="Peter"
+            placeholder="First Name"
+            disabled
+          />
+          <input
+            type="text"
+            id="lname"
+            name="lname"
+            value="Tejumola"
+            placeholder="Last Name"
+            disabled
+          />
+          <input
+            type="text"
+            id="email"
+            name="email"
+            value="[email protected]"
+            placeholder="Email Address"
+            disabled
+          />
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Password"
+          />
+
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Confirm Password"
+          />
+
+          <button class="update">Update</button>
+        </div>
+      </div>
     </div>
   </body>
 

diff --git a/UI/cashier/dashboard.html b/UI/cashier/dashboard.html
@@ -17,14 +17,19 @@
       <header>
         <div class="top">
           <a href="../index.html"><img src="../img/banka-blue-logo.svg"/></a>
-          <div class="current-user web-user">
+          <div class="current-user web-user dropdown">
             <img class="avatar" src="../img/emeka [email protected]" />
             <h4>Tejumola Peter</h4>
-            <span>(staff)</span>
+            <span>(cashier)</span>
             <img class="arrow-down" src="../img/arrow-drop-down.svg" />
+            <div class="dropdown-content">
+              <a href="#" id="profile-button">Profile</a>
+              <a href="../index.html">Logout</a>
+            </div>
           </div>
         </div>
       </header>
+
       <div class="banner">
         <div class="balance">
           <p>Created Accounts</p>
@@ -146,6 +151,51 @@ <h3>1,000,000</h3>
           </tr>
         </table>
       </div>
+
+      <div id="profileModal" class="modal">
+        <div class="onboarding-modal">
+          <img class="avatar" src="../img/emeka [email protected]" />
+          <input
+            type="text"
+            id="fname"
+            name="fname"
+            value="Peter"
+            placeholder="First Name"
+            disabled
+          />
+          <input
+            type="text"
+            id="lname"
+            name="lname"
+            value="Tejumola"
+            placeholder="Last Name"
+            disabled
+          />
+          <input
+            type="text"
+            id="email"
+            name="email"
+            value="[email protected]"
+            placeholder="Email Address"
+            disabled
+          />
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Password"
+          />
+
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Confirm Password"
+          />
+
+          <button class="update">Update</button>
+        </div>
+      </div>
     </div>
   </body>
 

diff --git a/UI/css/customer.css b/UI/css/customer.css
@@ -411,3 +411,32 @@ input[type="password"] {
   height: 100%;
   overflow: hidden;
 }
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 130px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  margin-top: 130px;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content a:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown:hover .dropbtn {
+  background-color: #3e8e41;
+}
diff --git a/UI/css/dashboard.css b/UI/css/dashboard.css
@@ -360,3 +360,32 @@ input[type="password"] {
   height: 100%;
   overflow: hidden;
 }
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 130px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  margin-top: 130px;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content a:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown:hover .dropbtn {
+  background-color: #3e8e41;
+}