From 00cf569d4cec375530830e9f0780e8182858a9d4 Mon Sep 17 00:00:00 2001
From: sandygudie <goodnewssandy@gmail.com>
Date: Sun, 14 Jan 2024 19:32:24 +0100
Subject: [PATCH] update profile view

---
 client/src/components/LinkItem.vue       | 36 +++++++++++++-----------
 client/src/components/Preview.vue        |  2 +-
 client/src/components/Profile.vue        | 21 +++++++++++---
 client/src/components/icons/LogoFull.vue |  6 ++--
 client/src/utilis/api/auth.ts            |  4 +++
 client/src/utilis/api/index.ts           |  2 +-
 client/src/utilis/index.ts               |  6 ++++
 client/src/views/HomeView.vue            |  7 ++---
 8 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/client/src/components/LinkItem.vue b/client/src/components/LinkItem.vue
index a11c584..ccfb9b9 100644
--- a/client/src/components/LinkItem.vue
+++ b/client/src/components/LinkItem.vue
@@ -13,11 +13,11 @@ defineProps<{
 </script>
 
 <template>
-  <div>
+  <div class="overflow-y-scroll md:h-[70vh] md:pr-6">
     <div>
       <h1 class="font-extrabold text-2xl text-gray-200">Customize your links</h1>
-      <p class="text-xs text-gray-200">
-        Add/edit/remove links below and then share all your profiles with the world
+      <p class="text-sm text-gray-200">
+        Add/edit/remove links below and then share all your profiles with the world.
       </p>
     </div>
     <button
@@ -28,7 +28,7 @@ defineProps<{
         propitems.devLinks.length >= 5
           ? 'text-purple-300/20 border-purple-300/20'
           : 'text-purple-300 border-purple-300'
-      } my-8 border rounded-lg w-full py-1.5 hover:bg-hover-purle`"
+      } my-6 border rounded-lg w-full py-1.5 hover:bg-hover-purle`"
     >
       Add new link
     </button>
@@ -57,17 +57,19 @@ defineProps<{
     </div>
   </div>
 
-  <div class="mt-8 bg-white">
-            <hr class="w-full border-gray-400" />
-            <div class="text-right my-2 mx-6">
-              <input
-                value="Save"
-                type="submit"
-                :disabled="propitems.devLinks.length <= 0 || propitems.devLinks.length >= 5"
-                :class="`${
-               propitems.devLinks.length < 5 &&  propitems.devLinks.length >0? 'bg-purple-300' : 'bg-purple-300/20'
-                }  px-4 py-2 text-sm text-bold cursor-pointer text-white rounded-lg`"
-              />
-            </div>
-          </div>
+  <div class="mt-4 bg-white">
+    <hr class="w-full border-gray-400" />
+    <div class="text-right my-2 mx-6">
+      <input
+        value="Save"
+        type="submit"
+        :disabled="propitems.devLinks.length <= 0 || propitems.devLinks.length >= 5"
+        :class="`${
+          propitems.devLinks.length < 5 && propitems.devLinks.length > 0
+            ? 'bg-purple-300'
+            : 'bg-purple-300/20'
+        }  px-4 py-2 text-sm text-bold cursor-pointer text-white rounded-lg`"
+      />
+    </div>
+  </div>
 </template>
diff --git a/client/src/components/Preview.vue b/client/src/components/Preview.vue
index 4c1f2d0..b4be41b 100644
--- a/client/src/components/Preview.vue
+++ b/client/src/components/Preview.vue
@@ -86,7 +86,7 @@ async function copyTextToClipboard() {
           <img
             v-if="updatedLinks.profilepic"
             :src="updatedLinks.profilepic"
-            class="w-20 mx-auto h-20 rounded-full"
+            class="w-20 mx-auto h-20 rounded-full border-[1px] border-solid border-gray-400"
             alt="profile-upload"
           />
           <div v-else class="bg-gray-400 rounded-full w-20 mx-auto h-20"></div>
diff --git a/client/src/components/Profile.vue b/client/src/components/Profile.vue
index 5db0c72..ff7e3c9 100644
--- a/client/src/components/Profile.vue
+++ b/client/src/components/Profile.vue
@@ -1,18 +1,23 @@
 <script setup lang="ts">
+import {logOut} from '@/utilis'
 defineProps<{
   handleFirstNameChange: (e: any) => void
   handleLastNameChange: (e: any) => void
   uploadProfileImage: (e: any) => void
   profileLinks: {} | any
 }>()
+
+const logoutCurentUser=() =>{
+  logOut()
+}
 </script>
 
 <template>
   <div class="text-gray-200">
-    <div class="">
+    <div>
       <h1 class="font-extraBold text-xl">Profile Details</h1>
       <p class="text-sm text-gray-200">
-        Add your details to create a personal touch to your profile
+        Add your details to create a personal touch to your profile.
       </p>
     </div>
     <div
@@ -23,7 +28,7 @@ defineProps<{
           <img
             v-if="profileLinks.profilepic"
             :src="profileLinks.profilepic"
-            class="w-full h-36 object-fit rounded-full"
+            class="w-full h-36 object-fit rounded-full border-[1px] border-solid border-gray-400"
             alt="profile-upload"
           />
           <img
@@ -78,7 +83,7 @@ defineProps<{
           required
           :value="profileLinks.lastname"
           type="text"
-          class="focus:border-purple-300  border border-solid border-[1px] outline-none rounded-lg px-4 py-3 max-w-48 w-full md:w-10/12"
+          class="focus:border-purple-300 border border-solid border-[1px] outline-none rounded-lg px-4 py-3 max-w-48 w-full md:w-10/12"
         />
       </div>
       <div class="md:flex justify-between items-center">
@@ -91,5 +96,13 @@ defineProps<{
         />
       </div>
     </div>
+    <div class="my-6 w-11/12">
+      <button
+        :onclick="logoutCurentUser"
+        class="bg-red/80 hover:bg-red text-white font-medium rounded-lg py-2 px-6"
+      >
+        Log out
+      </button>
+    </div>
   </div>
 </template>
diff --git a/client/src/components/icons/LogoFull.vue b/client/src/components/icons/LogoFull.vue
index f4d03cd..a551e1b 100644
--- a/client/src/components/icons/LogoFull.vue
+++ b/client/src/components/icons/LogoFull.vue
@@ -1,9 +1,9 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 150 40"
-    width="180"
-    height="30"
+    viewBox="0 0 220 40"
+    width="170"
+    height="40"
     fill="currentColor"
     xmlns:v="https://vecta.io/nano"
   >
diff --git a/client/src/utilis/api/auth.ts b/client/src/utilis/api/auth.ts
index 5abec91..2c80384 100644
--- a/client/src/utilis/api/auth.ts
+++ b/client/src/utilis/api/auth.ts
@@ -4,3 +4,7 @@ export async function googleLogin(payload: any) {
   const response = await makeApiCall('/auth/google', 'post', payload)
   return response
 }
+
+
+
+
diff --git a/client/src/utilis/api/index.ts b/client/src/utilis/api/index.ts
index 54197b1..30c4d3e 100644
--- a/client/src/utilis/api/index.ts
+++ b/client/src/utilis/api/index.ts
@@ -33,7 +33,7 @@ async function makeApiCall<T = any>(
     return data
   } catch (error: any) {
     if (error.response) {
-      console.log(error.response)
+
       if (error.response.status === 403 || error.response.status === 401) {
         localStorage.removeItem(TOKEN_KEY)
         localStorage.removeItem(USERID)
diff --git a/client/src/utilis/index.ts b/client/src/utilis/index.ts
index c932a02..0767b4e 100644
--- a/client/src/utilis/index.ts
+++ b/client/src/utilis/index.ts
@@ -25,3 +25,9 @@ export function setToken(token: string) {
 export function removeDuplicates(arr: number[]) {
   return arr.filter((item, index) => arr.indexOf(item) === index)
 }
+
+export async function logOut() {
+  localStorage.removeItem(TOKEN_KEY)
+  localStorage.removeItem(USERID)
+  window.location.replace('/login')
+}
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
index 80e016f..f049adf 100644
--- a/client/src/views/HomeView.vue
+++ b/client/src/views/HomeView.vue
@@ -164,7 +164,7 @@ const handleLinkChange = (event: any, index: number) => {
   </span>
 
   <div v-else class="h-full md:fixed w-full">
-    <div class="h-full md:p-6 bg-gray-100" v-if="isDisplay === 'editor'">
+    <div class="h-full bg-gray-100" v-if="isDisplay === 'editor'">
       <Header :toggledisplay="toggledisplay" :toggleActive="toggleActive" :isActive="isActive" />
       <main class="lg:flex justify-between gap-6 mt-6 h-[90vh]">
         <div
@@ -197,7 +197,6 @@ const handleLinkChange = (event: any, index: number) => {
                       class="w-3"
                       :src="`/assets/icons/icon-link-boxes/icon-${item.name.toLowerCase()}-link-box.svg`"
                     />
-
                     <p class="text-sm">{{ item.name }}</p>
                   </span>
                   <span><ArrowIcon class="text-sm fill-white" /></span>
@@ -221,7 +220,7 @@ const handleLinkChange = (event: any, index: number) => {
         </div>
         <form
           @submit.prevent="handleSubmit"
-          class="w-full lg:w-7/12 relative bg-white rounded-lg px-4 md:px-6 pt-6 pb-24 overflow-y-scroll"
+          class="w-full lg:w-7/12 relative bg-white rounded-lg px-4 md:pl-6 pt-6 pb-6 overflow-y-scroll"
         >
           <Links
             v-if="isActive === 'links'"
@@ -245,7 +244,7 @@ const handleLinkChange = (event: any, index: number) => {
       </main>
     </div>
     <Preview
-    :shareId="shareId"
+      :shareId="shareId"
       :toggledisplay="toggledisplay"
       :updatedLinks="updatedLinks"
       v-else-if="isDisplay === 'preview'"