🦄 refactor: global code update

package.json

@@ -13,40 +13,39 @@
     "update": "ncu -i --format group"
   },
   "devDependencies": {
+    "@bufbuild/buf": "^1.28.1",
     "@protobuf-ts/plugin": "^2.9.3",
-    "@vitejs/plugin-vue": "^5.0.0",
+    "@types/nprogress": "^0.2.3",
+    "@vitejs/plugin-vue": "^5.0.3",
     "@vue/cli-plugin-typescript": "^5.0.8",
-    "@vueuse/core": "^10.7.1",
-    "autoprefixer": "^10.4.16",
-    "axios": "^1.6.3",
+    "@vueuse/core": "^10.7.2",
+    "autoprefixer": "^10.4.17",
+    "axios": "^1.6.5",
     "click-outside-vue3": "^4.0.1",
-    "cssnano": "^6.0.2",
+    "cssnano": "^6.0.3",
     "ip-address": "^9.0.5",
     "ipaddr.js": "^2.1.0",
     "less": "^4.2.0",
-    "less-loader": "^11.1.4",
+    "less-loader": "^12.1.0",
     "notiwind": "^2.0.2",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.32",
-    "postcss-import": "^15.1.0",
+    "postcss": "^8.4.33",
+    "postcss-import": "^16.0.0",
     "postcss-nesting": "^12.0.2",
-    "prettier": "^3.1.1",
-    "prettier-plugin-tailwindcss": "^0.5.9",
-    "sass": "^1.69.5",
+    "prettier": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "sass": "^1.70.0",
     "tailwind-config-viewer": "^1.7.3",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.1",
     "ts-protoc-gen": "^0.15.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10",
+    "vite": "^5.0.12",
     "vite-plugin-pages": "^0.32.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vue": "^3.3.13",
+    "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.27"
-  },
-  "dependencies": {
-    "@bufbuild/buf": "^1.28.1"
   }
 }

src/api/auth/index.ts

@@ -5,25 +5,17 @@ enum URL {
   auth = "auth",
 }
 
-// Define a function called signIn that takes in a parameter called data of type SignIn_Request
 const signIn = async (data: SignIn_Request): Promise<void> =>
   http("POST", `${URL.auth}/signin`, { data });
 
-// This is a function that logs out the user from the server.
 const logout = async (): Promise<void> => http("POST", `${URL.auth}/logout`);
 
-// This function is used to refresh the access token.
-// The `data` parameter contains the data needed to generate a new access token, which includes the user's refresh token.
 const refresh = async (data: RefreshTokenRequest): Promise<void> =>
   http("POST", `${URL.auth}/refresh`, { data });
 
-// This function initiates the password reset process for the user.
-// This is step 1 of the password reset process in which an email is sent to the user's email address with instructions on how to reset their password.
 const sendEmail = async (email: string): Promise<void> =>
   http("POST", `${URL.auth}/password_reset`, { data: { email } });
 
-// This function checks the validity of the reset token generated by the server in response to the password reset request made by the user.
-// This is step 2 of the password reset process, in which the validity of the reset token is checked with the server.
 const checkResetToken = async (token: string): Promise<void> =>
   http("POST", `${URL.auth}/password_reset/${token}`, {});
 

src/api/index.ts

@@ -1,6 +1,4 @@
 import axios from "axios";
-
-// @ts-ignore
 import * as NProgress from "nprogress";
 
 import { getStorage } from "@/utils/storage";
@@ -9,40 +7,27 @@ import { useAuthStore, useErrorStore } from "@/store";
 axios.defaults.baseURL = import.meta.env.VITE_API_URL;
 axios.defaults.timeout = 15000;
 
-// This code intercepts responses from Axios requests and performs certain actions based on the response.
 axios.interceptors.response.use(
-  // If the response is successful, hide the progress bar and return the response.
   (response) => {
     NProgress.done();
     return response;
   },
-  // If there is an error in the response, hide the progress bar and perform further actions based on
-  // the status code and other parts of the error response.
+
   async (error) => {
     NProgress.done();
-
     const { status, config, data } = error.response;
-
-    // If the status code is 401 (unauthorized) and this request hasn't already been retried,
-    // attempt to refresh the token and retry the request with the new token.
     if (status === 401 && !config.__isRetryRequest) {
       try {
         config.__isRetryRequest = true;
         await useAuthStore().refreshToken();
         config.headers.Authorization = `Bearer ${getStorage("access_token")}`;
         return axios(config);
       } catch (error) {
-        // If there's an error while attempting to refresh the token, reject the promise.
-        // The error will be handled by the caller of the original request.
         return Promise.reject(error);
       }
-    }
-    // If the status code is 400 or 500, extract the error message and any validation errors
-    // from the error response and store them in the appropriate stores using the `useErrorStore` hook.
-    else if (status === 400 || status === 404 || status === 500) {
+    } else if (status === 400 || status === 404 || status === 500) {
       const { message, result } = data;
       const errorStore = useErrorStore();
-
       if (typeof result === "string") {
         errorStore.resetStore();
         errorStore.setErrorMessage(result);
@@ -53,17 +38,11 @@ axios.interceptors.response.use(
         }
       }
     }
-
-    // In all cases, reject the promise with the original error.
-    // The error will be handled by the caller of the original request.
     return Promise.reject(error);
   },
 );
 
-// This code intercepts requests from Axios and adds an authentication header to them,
-// as well as displaying a progress bar.
 axios.interceptors.request.use(
-  // If the request is successful, show the progress bar and add the authorization header
   (config) => {
     NProgress.start();
     const token = getStorage("access_token");
@@ -72,16 +51,13 @@ axios.interceptors.request.use(
     }
     return config;
   },
-  // If there's an error in the request, hide the progress bar and reject the promise with the error.
   (error) => {
     NProgress.done();
     return Promise.reject(error);
   },
 );
 
 type Method = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
-
-// This function is a generic http request helper that can be used to call any Rest API endpoint.
 export function http<T = any>(method: Method, route: string, options = {}): Promise<T> {
   const config = {
     method,

src/components/Drawer/index.vue

@@ -25,7 +25,6 @@
 
 <script lang="ts" setup>
 import { ref, watch, getCurrentInstance } from "vue";
-// @ts-ignore
 import { directive as vClickOutside } from "click-outside-vue3";
 
 const isVisible = ref(false);

src/pages/profile/keys/index.vue

@@ -19,9 +19,9 @@
             <div>{{ item.fingerprint }}</div>
           </td>
           <td class="adaptive-md">
-            <div><span class="font-bold">Added on:</span> {{ toDate(item.created, "lite") }}</div>
-            <div v-if="item.last_update.seconds > 0">
-              <span class="font-bold">Last used:</span> {{ toDate(item.last_update, "lite") }}
+            <div><span class="font-bold">Added on:</span> {{ toDate(item.created_at, "lite") }}</div>
+            <div v-if="item.updated_at.seconds > 0">
+              <span class="font-bold">Last used:</span> {{ toDate(item.updated_at, "lite") }}
             </div>
             <div v-else class="text-gray-400">
               <span class="font-bold">Last used:</span> no used

src/pages/projects/_projectId/members/add.vue

@@ -9,12 +9,10 @@
     <div class="artboard-content">
       <form @submit.prevent>
         <div class="flex flex-row">
-          <FormInput name="Name" v-model.trim="data.name" :error="proxy.$errorStore.errors['name']" :disabled="loading" class="mr-5 flex-grow" />
-          <FormInput name="Surname" v-model.trim="data.surname" :error="proxy.$errorStore.errors['surname']" :disabled="loading" class="flex-grow" />
+          <FormInput name="Name" v-model.trim="data.name" :error="proxy.$errorStore.errors['user_name']" :disabled="loading" class="mr-5 flex-grow" />
+          <FormInput name="Surname" v-model.trim="data.surname" :error="proxy.$errorStore.errors['user_surname']" :disabled="loading" class="flex-grow" />
         </div>
-
         <FormInput name="Email" v-model.trim="data.email" :error="proxy.$errorStore.errors['email']" :disabled="loading" class="flex-grow" />
-
         <div class="my-6">
           <button type="submit" class="btn" @click="onSendInvite" :disabled="loading">
             <div v-if="loading">
@@ -50,8 +48,6 @@ const props = defineProps({
 });
 
 const onSendInvite = async () => {
-  console.log(data.value);
-
   await postProjectMemberInvite(<AddMemberInvite_Request>{
     owner_id: proxy.$authStore.hasUserID,
     project_id: props.projectId,
@@ -60,7 +56,7 @@ const onSendInvite = async () => {
     email: data.value.email,
   })
     .then((res) => {
-      showMessage(res.data.message);
+      showMessage(res.data.result);
       proxy.$errorStore.$reset();
       router.push({
         name: "projects-projectId-members-invites",

src/pages/projects/_projectId/members/invites.vue

@@ -25,21 +25,20 @@
         <tr v-for="(item, index) in data.invites" :key="index">
           <td>{{ item.name }} {{ item.surname }}</td>
           <td>{{ item.email }}</td>
-          <td>{{ toDate(item.created) }}</td>
+          <td>{{ toDate(item.created_at) }}</td>
           <td>
             <Badge v-if="item.status == 'activated'" :name="item.status" color="green" />
             <Badge v-if="item.status == 'send'" :name="item.status" color="yellow" />
           </td>
           <td>
-
             <SvgIcon v-if="item.status == 'send'" name="delete" class="cursor-pointer text-red-500" @click="openModal(index)" />
           </td>
         </tr>
       </tbody>
     </table>
     <div v-else class="desc">Empty</div>
 
-    <div class="artboard-content">
+    <div class="artboard-content" v-if="data.total">
       <Pagination :total="data.total" @selectPage="onSelectPage" />
     </div>
   </div>

src/pages/projects/_projectId/servers/_serverId/members/index.vue

@@ -33,7 +33,7 @@
           </td>
           <td>{{ item.user_name }} {{ item.user_surname }}</td>
           <td>{{ item.user_login }}</td>
-          <td>{{ item.last_update.seconds > 0 ? toDate(item.last_update) : "" }}</td>
+          <td>{{ item.updated_at.seconds > 0 ? toDate(item.updated_at) : "" }}</td>
           <td>
             <div class="flex items-center">
               <Toggle v-model="item.active" :id="index" @change="changeMemberActive(index, item.active)" />

src/pages/projects/_projectId/servers/index.vue

@@ -117,14 +117,14 @@
     </table>
     <div v-else class="desc">Empty</div>
 
-    <div class="artboard-content">
+    <div class="artboard-content" v-if="data.total">
       <Pagination :total="data.total" @selectPage="onSelectPage" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, getCurrentInstance } from "vue";
+import { ref, onMounted, getCurrentInstance, reactive } from "vue";
 import { useRoute } from "vue-router";
 import { SvgIcon, Pagination, Toggle, Badge } from "@/components";
 import { showMessage } from "@/utils/message";
@@ -135,7 +135,7 @@ import { ServerScheme, UpdateServer_Request } from "@proto/server";
 
 const { proxy } = getCurrentInstance() as any;
 
-const addressType = ref("");
+const addressType = reactive(null);
 const route = useRoute();
 const data: any = ref({});
 const props = defineProps({

src/pages/projects/index.vue

@@ -35,7 +35,7 @@
           <td>{{ item.login }}</td>
           <td>{{ item.members_count }}</td>
           <td>{{ item.servers_count }}</td>
-          <td>{{ toDate(item.created, "lite") }}</td>
+          <td>{{ toDate(item.created_at, "lite") }}</td>
           <td>
             <router-link active-class="current" :to="{
               name: 'projects-projectId-setting',

src/proto/account.ts

@@ -215,13 +215,13 @@ export interface Account_Response {
      */
     connection_login: string;
     /**
-     * @generated from protobuf field: google.protobuf.Timestamp last_update = 8;
+     * @generated from protobuf field: google.protobuf.Timestamp updated_at = 8;
      */
-    last_update?: Timestamp;
+    updated_at?: Timestamp;
     /**
-     * @generated from protobuf field: google.protobuf.Timestamp created = 9;
+     * @generated from protobuf field: google.protobuf.Timestamp created_at = 9;
      */
-    created?: Timestamp;
+    created_at?: Timestamp;
 }
 /**
  * rpc AddAccount
@@ -591,8 +591,8 @@ class Account_Response$Type extends MessageType<Account_Response> {
             { no: 4, name: "name", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
             { no: 5, name: "surname", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
             { no: 7, name: "connection_login", kind: "scalar", localName: "connection_login", T: 9 /*ScalarType.STRING*/ },
-            { no: 8, name: "last_update", kind: "message", localName: "last_update", T: () => Timestamp },
-            { no: 9, name: "created", kind: "message", T: () => Timestamp }
+            { no: 8, name: "updated_at", kind: "message", localName: "updated_at", T: () => Timestamp },
+            { no: 9, name: "created_at", kind: "message", localName: "created_at", T: () => Timestamp }
         ]);
     }
 }

src/proto/audit.ts

@@ -55,13 +55,13 @@ export interface Audit_Request {
  */
 export interface Audit_Response {
     /**
-     * @generated from protobuf field: google.protobuf.Timestamp last_update = 1;
+     * @generated from protobuf field: google.protobuf.Timestamp updated_at = 1;
      */
-    last_update?: Timestamp;
+    updated_at?: Timestamp;
     /**
-     * @generated from protobuf field: google.protobuf.Timestamp created = 2;
+     * @generated from protobuf field: google.protobuf.Timestamp created_at = 2;
      */
-    created?: Timestamp;
+    created_at?: Timestamp;
 }
 /**
  * rpc rpc AddAudit
@@ -332,8 +332,8 @@ export const Audit_Request = new Audit_Request$Type();
 class Audit_Response$Type extends MessageType<Audit_Response> {
     constructor() {
         super("audit.Audit.Response", [
-            { no: 1, name: "last_update", kind: "message", localName: "last_update", T: () => Timestamp },
-            { no: 2, name: "created", kind: "message", T: () => Timestamp }
+            { no: 1, name: "updated_at", kind: "message", localName: "updated_at", T: () => Timestamp },
+            { no: 2, name: "created_at", kind: "message", localName: "created_at", T: () => Timestamp }
         ]);
     }
 }

src/proto/event.ts

@@ -139,9 +139,9 @@ export interface Event_Response {
      */
     meta_data: Uint8Array;
     /**
-     * @generated from protobuf field: google.protobuf.Timestamp created = 7;
+     * @generated from protobuf field: google.protobuf.Timestamp created_at = 7;
      */
-    created?: Timestamp;
+    created_at?: Timestamp;
 }
 /**
  * rpc AddEvent
@@ -325,7 +325,7 @@ class Event_Response$Type extends MessageType<Event_Response> {
             { no: 4, name: "ip", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
             { no: 5, name: "event", kind: "enum", T: () => ["event.Type", Type] },
             { no: 6, name: "meta_data", kind: "scalar", localName: "meta_data", T: 12 /*ScalarType.BYTES*/ },
-            { no: 7, name: "created", kind: "message", T: () => Timestamp }
+            { no: 7, name: "created_at", kind: "message", localName: "created_at", T: () => Timestamp }
         ]);
     }
 }