update: settings design

codescalersinternships · Aug 25, 2024 · fbf08b5 · fbf08b5
1 parent 1e74104
commit fbf08b5
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 55 deletions.
diff --git a/client/src/api/clients.ts → client/src/api/axios.ts b/client/src/api/clients.ts → client/src/api/axios.ts
diff --git a/client/src/api/userService.ts b/client/src/api/userService.ts
@@ -1,5 +1,5 @@
 import { UserProfile } from '../types/types'
-import { AuthClient } from './clients'
+import { AuthClient } from './axios'
 
 export async function putSettings (settings :Partial<UserProfile>) {
   return AuthClient.put('/auth/settings/', settings)

diff --git a/client/src/components/settings/ProfileInformationForm.vue b/client/src/components/settings/ProfileInformationForm.vue
@@ -34,16 +34,19 @@
       :rules="phoneNumberRules"
     />
 
-    <v-btn
-      block
-      class="me-4"
-      :disabled="!form?.isValid || loading"
-      :loading="loading"
-      text="Submit"
-      type="submit"
+    <v-col class="text-right">
+      <v-btn
+        class="me-4"
+        color="blue"
+        :disabled="!form?.isValid || loading"
+        :loading="loading"
+        size="large"
+        text="Submit"
+        type="submit"
 
-      @click="updateProfileSettings"
-    />
+        @click="updateProfileSettings"
+      />
+    </v-col>
   </v-form>
 </template>
 

diff --git a/client/src/components/settings/SecurityForm.vue b/client/src/components/settings/SecurityForm.vue
@@ -34,16 +34,20 @@
       @click:append-inner="showConfirm = !showConfirm"
     />
 
-    <v-btn
-      block
-      class="me-4"
-      :disabled="!form?.isValid || loading"
-      :loading="loading"
-      text="Change Password"
-      type="submit"
+    <v-col class="text-right">
+      <v-btn
 
-      @click="updateProfileSettings"
-    />
+        class="me-4"
+        color="blue"
+        :disabled="!form?.isValid || loading"
+        :loading="loading"
+        size="large"
+        text="Change Password"
+        type="submit"
+
+        @click="updateProfileSettings"
+      />
+    </v-col>
   </v-form>
 </template>
 

diff --git a/client/src/layouts/NavigationBar.vue b/client/src/layouts/NavigationBar.vue
@@ -6,12 +6,16 @@
   >
     <div class="app-component mx-9 d-flex">
       <div class="left-nav-bar">
-        <v-img
-          alt="Test Tracker Logo"
-          contain
-          src="/navbarlogo.png"
-          style="width: 188.5px; height: 50px;"
-        />
+        <RouterLink
+          :to="{ name: 'dashboard' }"
+        >
+          <v-img
+            alt="Test Tracker Logo"
+            contain
+            src="/navbarlogo.png"
+            style="width: 188.5px; height: 50px;"
+          />
+        </RouterLink>
       </div>
 
       <div class="right-nav-bar">

diff --git a/client/src/pages/settings/SettingsView.vue b/client/src/pages/settings/SettingsView.vue
@@ -1,36 +1,50 @@
 <template>
-  <v-card
-    class="mx-auto my-6 py-6"
-    variant="outlined"
-    width="70%"
+  <div
+    class="settings"
   >
-    <v-card-title
-      class="mx-6 px-6 justify-lg-center align-md-center"
+    <v-card
+      class="mx-auto py-6"
+      variant="outlined"
+      width="70%"
     >
-      <h1>Settings</h1>
-    </v-card-title>
-    <v-card-subtitle
-      class="d-flex justify-lg-center align-md-center"
-    >
-      <v-btn-toggle
-        base-color="black"
-        color="blue"
-        divided
-        size="x-large"
-        variant="outlined"
+      <v-card-title
+        class="mx-6 px-6 justify-lg-center align-md-center"
+      >
+        <h1>Settings</h1>
+      </v-card-title>
+      <v-card-subtitle
+        class="d-flex justify-lg-center align-md-center"
       >
-        <v-btn @click="profile = true">Profile Information</v-btn>
+        <v-tabs
+          v-model="tab"
+          base-color="black"
+          color="blue"
+          size="x-large"
+          variant="outlined"
+        >
+          <v-tab text="Profile Information" value="profile" />
 
-        <v-btn @click="profile = false">Security Information</v-btn>
-      </v-btn-toggle>
-    </v-card-subtitle>
-    <v-card-item
-      class="mx-6 px-6"
-    >
-      <ProfileInformationForm v-if="profile" />
-      <SecurityForm v-else />
-    </v-card-item>
-  </v-card>
+          <v-tab text="Security Information" value="security" />
+        </v-tabs>
+      </v-card-subtitle>
+      <v-tabs-window v-model="tab">
+        <v-tabs-window-item value="profile">
+          <v-card-item
+            class="mx-6 px-6"
+          >
+            <ProfileInformationForm />
+          </v-card-item>
+        </v-tabs-window-item>
+        <v-tabs-window-item value="security">
+          <v-card-item
+            class="mx-6 px-6"
+          >
+            <SecurityForm />
+          </v-card-item>
+        </v-tabs-window-item>
+      </v-tabs-window>
+    </v-card>
+  </div>
 </template>
 
 <script lang="ts">
@@ -46,12 +60,12 @@
       SecurityForm,
     },
     setup () {
-      const profile = ref<boolean>(true)
+      const tab = ref('profile')
 
       return {
         ProfileInformationForm,
         SecurityForm,
-        profile,
+        tab,
       }
     },
   }
@@ -63,4 +77,11 @@ h1 {
   font-size: 1.7rem;
 }
 
+.settings {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
 </style>
diff --git a/client/src/utilities/validators.ts b/client/src/utilities/validators.ts
@@ -80,6 +80,10 @@ export const phoneNumberRules = [
 
     return 'You must enter a phone number.'
   },
+  (value: string) => {
+    if (value?.length > 10) return true
+    return 'Phone number must be at least 11 digits.'
+  },
   (value: string) => {
     if (value?.length < 19) return true
     return 'Phone number must be at most 20 digits.'