@plutonhq/core-frontend 0.0.1

package/src/services/settings.ts

@@ -0,0 +1,163 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { API_URL } from '../utils/constants';
+
+// Get Settings
+export async function getSettings() {
+   const url = new URL(`${API_URL}/settings`);
+   const res = await fetch(url.toString(), {
+      method: 'GET',
+      credentials: 'include',
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useGetSettings() {
+   return useQuery({
+      queryKey: ['settings'],
+      queryFn: () => getSettings(),
+      refetchOnMount: true,
+      retry: false,
+      staleTime: 0,
+   });
+}
+
+export async function updateSettings(updatePayload: { id: string; settings: Record<string, string | boolean | number> }) {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/settings/${updatePayload.id}`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: header,
+      body: JSON.stringify(updatePayload),
+   });
+   const data = await res.json();
+   console.log('data :', data);
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useUpdateSettings() {
+   const queryClient = useQueryClient();
+   return useMutation({
+      mutationFn: updateSettings,
+      onSuccess: (res) => {
+         // TODO: Should Display a Notification Bubble.
+         console.log('# Settings Updated! :', res);
+         queryClient.invalidateQueries({ queryKey: ['settings'] });
+      },
+   });
+}
+
+// Get App Logs
+export async function getAppLogs(settingsID: string) {
+   const url = new URL(`${API_URL}/settings/${settingsID}/logs`);
+
+   const res = await fetch(url.toString(), {
+      method: 'GET',
+      credentials: 'include',
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useGetAppLogs(settingsID: string) {
+   return useQuery({
+      queryKey: ['appLogs', settingsID],
+      queryFn: () => getAppLogs(settingsID),
+      refetchOnMount: true,
+      retry: false,
+   });
+}
+
+// Download Plan Logs
+export async function downloadAppLogs(settingsID: string) {
+   const res = await fetch(`${API_URL}/settings/${settingsID}/logs/download`, {
+      method: 'GET',
+      credentials: 'include',
+      // headers: header,
+   });
+   // Check if response is ok
+   if (!res.ok) {
+      const data = await res.json();
+      throw new Error(data.error);
+   }
+
+   const filename = res.headers.get('content-disposition')?.split('filename=')[1] || `app.log`;
+
+   // Use streams API
+   const reader = res.body?.getReader();
+   const stream = new ReadableStream({
+      async start(controller) {
+         while (true) {
+            const { done, value } = await reader!.read();
+            if (done) break;
+            controller.enqueue(value);
+         }
+         controller.close();
+         reader!.releaseLock();
+      },
+   });
+
+   // Create download from stream
+   const blob = await new Response(stream).blob();
+   const url = window.URL.createObjectURL(blob);
+   const link = document.createElement('a');
+   link.href = url;
+   link.download = filename;
+   document.body.appendChild(link);
+   link.click();
+   link.remove();
+   window.URL.revokeObjectURL(url);
+}
+
+export function useGetDownloadAppLogs() {
+   return useMutation({
+      mutationFn: downloadAppLogs,
+      onSuccess: (res) => {
+         console.log('# Logs Downloaded! :', res);
+      },
+      onError: (res) => {
+         console.log('# Logs Download Failed! :', res);
+      },
+   });
+}
+
+export async function validateIntegration(updatePayload: {
+   settingsID: number;
+   type: string;
+   settings: Record<string, string | boolean | number>;
+   test: Record<string, string | boolean | number>;
+}) {
+   console.log('updatePayload :', updatePayload);
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/settings/integration/validate`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+      body: JSON.stringify(updatePayload),
+   });
+   const data = await res.json();
+   console.log('data :', data);
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useValidateIntegration() {
+   return useMutation({
+      mutationFn: validateIntegration,
+      onSuccess: (res) => {
+         // TODO: Should Display a Notification Bubble.
+         console.log('# Settings Updated! :', res);
+      },
+   });
+}

package/src/services/storage.ts

@@ -0,0 +1,201 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { API_URL } from '../utils/constants';
+
+interface NewStoragePayload {
+   name: string;
+   type: string;
+   authType: string;
+   credentials: Record<string, string | number | boolean>;
+   settings: Record<string, string | number | boolean>;
+   tags?: string[];
+}
+interface UpdateStoragePayload {
+   id: string;
+   data: {
+      // name: string;
+      type: string;
+      credentials: Record<string, string | number | boolean>;
+      settings: Record<string, string | number | boolean>;
+      tags?: string[];
+   };
+}
+
+// Get All Storages
+export async function getAvailableStorages() {
+   const url = new URL(`${API_URL}/storages/available`);
+
+   const res = await fetch(url.toString(), {
+      method: 'GET',
+      credentials: 'include',
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useGetAvailableStorages() {
+   return useQuery({
+      queryKey: ['storageSettings'],
+      queryFn: () => getAvailableStorages(),
+      refetchOnMount: false,
+      retry: false,
+   });
+}
+
+// Get All Storages
+export async function getAllStorages() {
+   const url = new URL(`${API_URL}/storages`);
+
+   const res = await fetch(url.toString(), {
+      method: 'GET',
+      credentials: 'include',
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useGetStorages() {
+   return useQuery({
+      queryKey: ['storages'],
+      queryFn: () => getAllStorages(),
+      refetchOnMount: true,
+      retry: false,
+   });
+}
+
+// Get Single Storage
+export async function getStorage(id: string) {
+   const url = new URL(`${API_URL}/storages/${id}`);
+
+   const res = await fetch(url.toString(), {
+      method: 'GET',
+      credentials: 'include',
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useGetStorage(id: string) {
+   return useQuery({
+      queryKey: ['storage', id],
+      queryFn: () => getStorage(id),
+      refetchOnMount: true,
+      retry: false,
+   });
+}
+
+// Add New Storage
+export async function addStorage(newStorage: NewStoragePayload) {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/storages`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+      body: JSON.stringify(newStorage),
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useAddStorage() {
+   const queryClient = useQueryClient();
+   return useMutation({
+      mutationFn: addStorage,
+      onSuccess: (res) => {
+         // TODO: Should Display a Nofitication Bubble.
+         console.log('# Storage Added! :', res);
+         queryClient.invalidateQueries({ queryKey: ['storages'] });
+      },
+   });
+}
+
+// Update Storage
+export async function updateStorage(updatedStorage: UpdateStoragePayload) {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/storages/${updatedStorage.id}`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: header,
+      body: JSON.stringify(updatedStorage.data),
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useUpdateStorage() {
+   const queryClient = useQueryClient();
+   return useMutation({
+      mutationFn: updateStorage,
+      onSuccess: (res) => {
+         // TODO: Should Display a Nofitication Bubble.
+         console.log('# Storage Updated! :', res);
+         queryClient.invalidateQueries({ queryKey: ['storages'] });
+      },
+   });
+}
+
+// Remove Storage
+export async function deleteStorage(id: string) {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/storages/${id}`, {
+      method: 'DELETE',
+      credentials: 'include',
+      headers: header,
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useDeleteStorage() {
+   const queryClient = useQueryClient();
+   return useMutation({
+      mutationFn: deleteStorage,
+      onSuccess: (res) => {
+         // TODO: Should Display a Nofitication Bubble.
+         console.log('# Storage Updated! :', res);
+         queryClient.invalidateQueries({ queryKey: ['storages'] });
+      },
+   });
+}
+
+// Verify Storage
+export async function verifyStorage(id: string) {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/storages/verify/${id}`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useVerifyStorage() {
+   return useMutation({
+      mutationFn: verifyStorage,
+      onSuccess: (res) => {
+         // TODO: Should Display a Nofitication Bubble.
+         console.log('# Storage Verfied! :', res);
+      },
+   });
+}

package/src/services/users.ts

@@ -0,0 +1,91 @@
+import { API_URL } from '../utils/constants';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router';
+
+interface LoginCredentials {
+   username: string;
+   password: string;
+}
+
+//VALIDATE USER
+export async function validateAuth() {
+   const res = await fetch(`${API_URL}/user/validate`, { method: 'GET', credentials: 'include' });
+   if (!res.ok) {
+      throw new Error('Invalid authentication');
+   }
+   const appVersion = res.headers.get('x-app-version');
+   const serverOS = res.headers.get('x-server-os');
+
+   (window as any).plutonVersion = appVersion || 'unknown';
+   (window as any).plutonServerOS = serverOS || 'unknown';
+
+   const data = await res.json();
+   return {
+      ...data,
+      appVersion,
+   };
+}
+
+export function useAuth() {
+   return useQuery({
+      queryKey: ['auth'],
+      queryFn: validateAuth,
+      refetchOnMount: true,
+      retry: false,
+   });
+}
+
+// LOGIN USER
+export async function loginUser(credentials: LoginCredentials) {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/user/login`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+      body: JSON.stringify(credentials),
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+// Add this new hook
+export function useLogin() {
+   const navigate = useNavigate();
+   return useMutation({
+      mutationFn: loginUser,
+      onSuccess: (res) => {
+         console.log('res :', res);
+         if (res.totpRequired) {
+            navigate('/login/verify-otp');
+         } else {
+            navigate('/');
+         }
+      },
+   });
+}
+
+// LOGOUT USER
+export async function logoutUser() {
+   const res = await fetch(`${API_URL}/user/logout`, {
+      method: 'POST',
+      credentials: 'include',
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useLogout() {
+   const navigate = useNavigate();
+   return useMutation({
+      mutationFn: logoutUser,
+      onSuccess: () => {
+         navigate('/login');
+      },
+   });
+}

package/src/styles/fields.scss

@@ -0,0 +1,49 @@
+%fieldBase {
+   width: 100%;
+   display: flex;
+   flex-direction: column;
+   gap: 0.25rem;
+}
+
+%fieldInner {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   gap: 1.25rem;
+   min-height: 30px;
+}
+
+%fieldLabel {
+   font-size: 0.75rem;
+   font-weight: 500;
+   color: var(--content-text-color);
+   min-width: 12.5rem;
+
+   i {
+      opacity: 0.5;
+      margin-left: 0.313rem;
+   }
+
+   .required {
+      color: var(--error);
+      margin-left: 0.125rem;
+   }
+
+   .fieldLabelError {
+      position: absolute;
+      right: 0.625rem;
+      top: -0.738rem;
+      background-color: var(--error-bg-active);
+      color: var(--error-active-text);
+      padding: 0.063rem 0.75rem;
+      border-radius: 4px;
+      font-size: 0.9em;
+      letter-spacing: 0.013rem;
+      z-index: 2;
+   }
+}
+
+%fieldDescription {
+   font-size: 0.75rem;
+   color: var(--content-text-color-light);
+}