Fixed customer app with API calls

Committed by Robin Johannesson in development branch

customer-app/src/main.js

@@ -1,23 +1,25 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import { createAuth0 } from '@auth0/auth0-vue'
+// import { createPinia } from 'pinia'
+// import { createAuth0 } from '@auth0/auth0-vue'
 import App from './App.vue'
 import router from './router'
 import './assets/tailwind.css'
 
 const app = createApp(App)
 
-app.use(createPinia())
+// app.use(createPinia())
 app.use(router)
 
-app.use(
-    createAuth0({
-        domain: "dev-yl46b5m8hfqpht5q.us.auth0.com",
-        clientId: "sD3sE4NcrhKampbYzR0wzpf3spojmDx5",
-        authorizationParams: {
-            redirect_uri: "http://localhost:1339/authCallback"
-        }
-    })
-)
+// app.use(
+//     createAuth0({
+//         domain: "dev-yl46b5m8hfqpht5q.us.auth0.com",
+//         clientId: "sD3sE4NcrhKampbYzR0wzpf3spojmDx5",
+//         authorizationParams: {
+//             redirect_uri: "http://localhost:1339/authCallback"
+//         }
+//     })
+// )
 
 app.mount('#app')
+
+// localStorage.clear()

customer-app/src/utils.js

@@ -1,5 +1,5 @@
-const BASE_URL = "http://localhost:1337";
-const API_KEY = "n7fov6opbjzqllsd53aduh1k1xcgx0mtqbi0"
+const BASE_URL = `${location.protocol}//${location.hostname}:1337`
+const API_KEY = "p6jzni39z780u50kd3p0d14sh7uekpby5qpz"
 
 export class utils {
     /**
@@ -9,18 +9,31 @@ export class utils {
      */
     static async getUser(email) {
         try {
-            const response = await fetch(`${this.backend}/v1/user/${email}`, {
+            const response = await fetch(`${BASE_URL}/v1/user/email/${email}`, {
                 headers: {
                     'Content-Type': 'application/json',
                     'x-api-key': API_KEY,
                 },
             })
 
             const result = await response.json()
-            console.log("Result: ", result)
+            return result[0]
 
-            return result
+        } catch (err) {
+            console.error(err)
+        }
+    }
 
+    /**
+     * Tries to login the specific user
+     * @param email The user's email
+     * @param password The user's password
+     * @return A boolean, whether the user was logged in successfully.
+     */
+    static async loginUser(email, password) {
+        try {
+            const user = await this.getUser(email)
+            return user.Password == password
         } catch (err) {
             console.error(err)
         }
@@ -36,20 +49,21 @@ export class utils {
      * @param role The user's email
      * @return A message
      */
-    static async updateUser(firstName, lastName, password, email, paymentType, role) {
+    static async updateUser(user) {
         try {
             const data = {
-                'FirstName': firstName,
-                'LastName': lastName,
-                'Password': password,
-                'Email': email,
-                'PaymentType': paymentType,
-                'Role': role,
+                'FirstName': user.FirstName,
+                'LastName': user.LastName,
+                'Password': user.Password,
+                'Email': user.Email,
+                'AccountBalance': user.AccountBalance,
+                'PaymentType': user.PaymentType,
+                'Role': user.Role,
             }
 
-            const response = await fetch(`${BASE_URL}/v1/rental-log`,
+            const response = await fetch(`${BASE_URL}/v1/user/${user.UserID}`,
             {
-                method: 'POST',
+                method: 'PUT',
                 headers: {
                     'Content-Type': 'application/json',
                     'x-api-key': API_KEY,
@@ -97,7 +111,8 @@ export class utils {
                 }
             })
 
-            return await response.json()
+            const res = await response.json()
+            return res[0]
         } catch (err) {
             console.error(err)
         }
@@ -151,13 +166,8 @@ export class utils {
         const data = {
             "ScooterID": scooterId,
             "UserID": userId,
-            "StartTime": new Date().toUTCString(),
-            // "EndTime": "2023-01-01T09:30:00",
             "StartStation": stationId,
-            // "EndStation": 2,
-            // "Cost": 10.00,
-            // "Paid": true
-        };
+        }
 
         const response = await fetch(`${BASE_URL}/v1/rental-log`,
         {
@@ -167,7 +177,7 @@ export class utils {
                 'x-api-key': API_KEY,
             },
             body: JSON.stringify(data),
-        });
+        })
 
         return response.json()
     }
@@ -178,7 +188,7 @@ export class utils {
      * @param endStation The end station's id (optional).
      * @return A message
      */
-    static async getScooterRent(scooterId) {
+    static async getRentDetails(scooterId) {
         const response = await fetch(`${BASE_URL}/v1/rental-log/${scooterId}`,
         {
             method: 'GET',
@@ -197,7 +207,7 @@ export class utils {
      * @param endStation The end station's id (optional).
      * @return A message
      */
-    static async stopScooterRent(scooterId, endStation = null) {
+    static async stopRent(scooterId, endStation) {
         const data = {
             'EndStation': endStation,
         }

customer-app/src/views/AccountView.vue

@@ -9,44 +9,78 @@
 
     <form @submit.prevent="updateAccount">
 
-      <div class="flex flex-col gap-4">
-        <div>
-          <div class="mb-4">
+      <div class="flex flex-col gap-8">
+        <div class="flex flex-col gap-4">
+          <div class="">
             <label for="firstName" class="block mb-2 text-lg font-bold text-dark-bg-alt dark:text-light-bg-alt font-Karla">
               <span>First Name</span>
-              <input type="text" id="firstName" v-model="firstName" class="w-full p-2 bg-transparent border-2 border-gray-300 rounded-md shadow-lg outline-none focus:border-blue-300 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:border-gray-500" autocomplete="given-name">
+              <input placeholder="Enter your first name" type="text" id="firstName" v-model="firstName" class="w-full p-2 bg-transparent border-2 border-gray-300 rounded-md shadow-lg outline-none focus:border-blue-300 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:border-gray-500" autocomplete="given-name">
             </label>
           </div>
 
-          <div class="mb-4">
+          <div class="">
             <label for="lastName" class="block mb-2 text-lg font-bold text-dark-bg-alt dark:text-light-bg-alt font-Karla">
               <span>Last Name</span>
-              <input type="text" id="lastName" v-model="lastName" class="w-full p-2 bg-transparent border-2 border-gray-300 rounded-md shadow-lg outline-none focus:border-blue-300 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:border-gray-500" autocomplete="family-name">
+              <input placeholder="Enter your last name" type="text" id="lastName" v-model="lastName" class="w-full p-2 bg-transparent border-2 border-gray-300 rounded-md shadow-lg outline-none focus:border-blue-300 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:border-gray-500" autocomplete="family-name">
             </label>
           </div>
 
-          <div class="mb-4">
+          <div class="">
             <label for="email" class="block mb-2 text-lg font-bold text-dark-bg-alt dark:text-light-bg-alt font-Karla">
               <span>Email</span>
-              <input type="email" id="email" v-model="email" class="w-full p-2 bg-transparent border-2 border-gray-300 rounded-md shadow-lg outline-none focus:border-blue-300 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:border-gray-500" autocomplete="email">
+              <input placeholder="Enter your email address" type="email" id="email" v-model="email" class="w-full p-2 bg-transparent border-2 border-gray-300 rounded-md shadow-lg outline-none focus:border-blue-300 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:border-gray-500" autocomplete="email">
             </label>
           </div>
 
-          <div class="mb-4">
+          <div class="">
             <label for="password" class="block mb-2 text-lg font-bold text-dark-bg-alt dark:text-light-bg-alt font-Karla">
               <span>Password</span>
-              <input type="password" id="password" v-model="password" class="w-full p-2 bg-transparent border-2 border-gray-300 rounded-md shadow-lg outline-none focus:border-blue-300 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:border-gray-500" autocomplete="current-password">
+              <div class="relative">
+                <input placeholder="Enter your password" :type="showPassword ? 'text' : 'password'" id="password" v-model="password" class="block w-full p-2 bg-transparent border-2 border-gray-300 rounded-md shadow-lg outline-none focus:border-blue-300 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:border-gray-500" autocomplete="current-password">
+
+                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+                  <button
+                    type="button"
+                    @click="showPassword = !showPassword"
+                    :class="{'hidden': !showPassword, 'block':showPassword }"
+                  >
+                    <i
+                      class='text-2xl bx bxs-lock-open'
+                    ></i>
+                  </button>
+
+                  <button
+                    type="button"
+                    @click="showPassword = !showPassword"
+                    :class="{'block': !showPassword, 'hidden':showPassword }"
+                  >
+                    <i
+                      class='text-2xl bx bxs-lock'
+                    ></i>
+                  </button>
+                </div>
+
+              </div>
+
             </label>
           </div>
 
-          <div class="mb-4">
+          <div class="">
             <label for="accountBalance" class="block mb-2 text-lg font-bold text-dark-bg-alt dark:text-light-bg-alt font-Karla">
               <span>Account Balance</span>
-              <input type="number" id="accountBalance" v-model="accountBalance" class="w-full p-2 bg-gray-200 rounded-md outline-none dark:bg-gray-700 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:border-gray-500" readonly>
+
+              <div class="relative">
+                <input type="number" id="accountBalance" v-model="accountBalance" class="w-full p-2 bg-gray-200 rounded-md outline-none dark:bg-gray-700 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:border-gray-500" readonly>
+
+                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+                  <span>SEK</span>
+                </div>
+              </div>
+
             </label>
           </div>
 
-          <div class="mb-4">
+          <div class="">
             <label for="paymentType" class="block mb-2 text-lg font-bold text-dark-bg-alt dark:text-light-bg-alt font-Karla">
               <span>Payment Type</span>
               <select id="paymentType" v-model="paymentType" class="w-full p-2 bg-transparent border-2 border-gray-300 rounded-md shadow-lg outline-none dark:border-gray-500 focus:border-blue-300 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:bg-dark-bg-alt">
@@ -56,7 +90,7 @@
             </label>
           </div>
 
-          <div class="mb-4">
+          <div class="">
             <label for="role" class="block mb-2 text-lg font-bold text-dark-bg-alt dark:text-light-bg-alt font-Karla">
               <span>Role</span>
               <select id="role" v-model="role" class="w-full p-2 bg-transparent border-2 border-gray-300 rounded-md shadow-lg outline-none focus:border-blue-300 text-dark-bg-alt dark:text-light-bg-alt font-PlexMono dark:bg-dark-bg-alt dark:border-gray-500">
@@ -76,20 +110,17 @@
             <i class='text-2xl bx bx-upload' style='color:#ffffff' ></i>
           </button>
 
-            <router-link
-              :to="{ name: 'home' }"
-              v-slot="{href, navigate}"
-              >
-                <button
-                  :href="href"
-                  @click="navigate"
-                  class="flex items-center gap-4 px-4 py-2 transition duration-200 bg-blue-600 rounded-lg shadow-lg max-w-max ease-out-expo text-slate-50 active:bg-blue-700 active:scale-90"
-                >
-                  <span class="text-xl font-Roboto">Go back</span>
-                  <i class='text-2xl bx bx-left-top-arrow-circle'></i>
-                </button>
-            </router-link>
+          <button
+            type="button"
+            @click="signOut()"
+            class="flex items-center self-center gap-4 px-4 py-2 transition duration-200 bg-orange-600 rounded-lg shadow-lg max-w-max ease-out-expo text-slate-50 active:bg-orange-700 active:scale-90"
+          >
+            <span class="text-xl font-Roboto">Sign Out</span>
+            <i class='text-2xl bx bxs-exit' style='color:#ffffff' ></i>
+          </button>
+
         </div>
+
       </div>
 
     </form>
@@ -102,7 +133,9 @@
 import { ref, onMounted } from 'vue'
 import { utils } from '../utils.js'
 import SiteNavigation from '../components/SiteNavigation.vue'
+import router from '../router'
 
+const showPassword = ref(false)
 const firstName = ref("")
 const lastName = ref("")
 const email = ref("")
@@ -111,21 +144,48 @@ const accountBalance = ref(0)
 const paymentType = ref("1")
 const role = ref("Customer")
 
-onMounted(async() => {
-  if (localStorage.user) {
-    firstName.value = localStorage.user.FirstName
-    lastName.value = localStorage.user.LastName
-    password.value = localStorage.user.Password
-    email.value = localStorage.user.Email
-    accountBalance.value = localStorage.user.AccountBalance
-    paymentType.value = localStorage.user.PaymentType
-    role.value = localStorage.user.Role
+onMounted(() => {
+  if (!localStorage.user) {
+    router.push({ name: 'login' })
+    return
   }
+
+  const user = JSON.parse(localStorage.user)
+
+  firstName.value = user.FirstName
+  lastName.value = user.LastName
+  password.value = user.Password
+  email.value = user.Email
+  accountBalance.value = user.AccountBalance
+  paymentType.value = user.PaymentType
+  role.value = user.Role
 })
 
 const updateAccount = async () => {
-  await utils.updateAccount(firstName.value, lastName.value, password.value, email.value, paymentType.value, role.value)
+  const user = JSON.parse(localStorage.user)
+
+  user.FirstName = firstName.value
+  user.LastName = lastName.value
+  user.Password = password.value
+  user.Email = email.value
+  user.AccountBalance = accountBalance.value
+  user.PaymentType = paymentType.value
+  user.Role = role.value
+
+  const wasSuccessful = await utils.updateUser(user)
+
+  if (!wasSuccessful) {
+    alert("Could not update your account! Please try again in a few minutes.")
+    return
+  }
+
+  localStorage.user = JSON.stringify(user)
 };
+
+const signOut = () => {
+  localStorage.removeItem('user')
+  location.reload()
+}
 </script>
 
 <style lang="css" scoped></style>