mirror of
https://github.com/MAKS-IT-COM/maksit-certs-ui.git
synced 2025-12-31 04:00:03 +01:00
(refactor): remove old react next clientapp codebase
This commit is contained in:
Maksym Sadovnychyy
parent
5d697fbcef
commit
20ab94aa3e
@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": [
|
|
||||||
"next/core-web-vitals",
|
|
||||||
"plugin:prettier/recommended"
|
|
||||||
],
|
|
||||||
"rules": {
|
|
||||||
"prettier/prettier": "error",
|
|
||||||
"semi": "off",
|
|
||||||
"quotes": "off",
|
|
||||||
"indent": "off"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
36
src/ClientApp/.gitignore
vendored
36
src/ClientApp/.gitignore
vendored
@ -1,36 +0,0 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# dependencies
|
|
||||||
/node_modules
|
|
||||||
/.pnp
|
|
||||||
.pnp.js
|
|
||||||
.yarn/install-state.gz
|
|
||||||
|
|
||||||
# testing
|
|
||||||
/coverage
|
|
||||||
|
|
||||||
# next.js
|
|
||||||
/.next/
|
|
||||||
/out/
|
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
|
||||||
*.pem
|
|
||||||
|
|
||||||
# debug
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
|
|
||||||
# local env files
|
|
||||||
.env*.local
|
|
||||||
|
|
||||||
# vercel
|
|
||||||
.vercel
|
|
||||||
|
|
||||||
# typescript
|
|
||||||
*.tsbuildinfo
|
|
||||||
next-env.d.ts
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
# Ignore artifacts:
|
|
||||||
build
|
|
||||||
coverage
|
|
||||||
dist
|
|
||||||
node_modules
|
|
||||||
|
|
||||||
# Ignore all configuration files:
|
|
||||||
*.config.js
|
|
||||||
*.config.ts
|
|
||||||
|
|
||||||
# Ignore specific files:
|
|
||||||
package-lock.json
|
|
||||||
yarn.lock
|
|
||||||
|
|
||||||
# Ignore logs:
|
|
||||||
*.log
|
|
||||||
|
|
||||||
# Ignore minified files:
|
|
||||||
*.min.js
|
|
||||||
|
|
||||||
# Ignore compiled code:
|
|
||||||
*.d.ts
|
|
||||||
|
|
||||||
# Ignore specific directories:
|
|
||||||
public
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"singleQuote": true,
|
|
||||||
"semi": false,
|
|
||||||
"tabWidth": 2,
|
|
||||||
"endOfLine": "crlf",
|
|
||||||
"trailingComma": "none"
|
|
||||||
}
|
|
||||||
23
src/ClientApp/.vscode/settings.json
vendored
23
src/ClientApp/.vscode/settings.json
vendored
@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"editor.tabSize": 2,
|
|
||||||
"editor.codeActionsOnSave": {
|
|
||||||
"source.fixAll.eslint": "explicit"
|
|
||||||
},
|
|
||||||
"[javascript]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[typescript]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[typescriptreact]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[json]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"eslint.validate": [
|
|
||||||
"javascript",
|
|
||||||
"typescript",
|
|
||||||
"typescriptreact"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
enum ApiRoutes {
|
|
||||||
AGENT_TEST = 'api/agent/test',
|
|
||||||
|
|
||||||
ACCOUNTS = 'api/accounts',
|
|
||||||
|
|
||||||
ACCOUNT = 'api/account',
|
|
||||||
ACCOUNT_ID = 'api/account/{accountId}',
|
|
||||||
|
|
||||||
ACCOUNT_ID_CONTACTS = 'api/account/{accountId}/contacts',
|
|
||||||
ACCOUNT_ID_CONTACT_ID = 'api/account/{accountId}/contact/{index}',
|
|
||||||
|
|
||||||
ACCOUNT_ID_HOSTNAMES = 'api/account/{accountId}/hostnames',
|
|
||||||
ACCOUNT_ID_HOSTNAME_ID = 'api/account/{accountId}/hostname/{index}'
|
|
||||||
|
|
||||||
// CERTS_FLOW_CONFIGURE_CLIENT = `api/CertsFlow/ConfigureClient`,
|
|
||||||
// CERTS_FLOW_TERMS_OF_SERVICE = `api/CertsFlow/TermsOfService/{sessionId}`,
|
|
||||||
// CERTS_FLOW_INIT = `api/CertsFlow/Init/{sessionId}/{accountId}`,
|
|
||||||
// CERTS_FLOW_NEW_ORDER = `api/CertsFlow/NewOrder/{sessionId}`,
|
|
||||||
// CERTS_FLOW_GET_ORDER = `api/CertsFlow/GetOrder/{sessionId}`,
|
|
||||||
// CERTS_FLOW_GET_CERTIFICATES = `api/CertsFlow/GetCertificates/{sessionId}`,
|
|
||||||
// CERTS_FLOW_APPLY_CERTIFICATES = `api/CertsFlow/ApplyCertificates/{sessionId}`,
|
|
||||||
// CERTS_FLOW_HOSRS_WITH_UPCOMING_SSL_EXPIRY = `api/CertsFlow/HostsWithUpcomingSslExpiry/{sessionId}`
|
|
||||||
}
|
|
||||||
|
|
||||||
const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL ?? ''
|
|
||||||
|
|
||||||
const GetApiRoute = (route: ApiRoutes, ...args: string[]): string => {
|
|
||||||
let result: string = route
|
|
||||||
args.forEach((arg) => {
|
|
||||||
result = result.replace(/{.*?}/, arg)
|
|
||||||
})
|
|
||||||
return `${apiBase.replace(/\/+$/, '')}/${result.replace(/^\/+/, '')}`
|
|
||||||
}
|
|
||||||
|
|
||||||
export { GetApiRoute, ApiRoutes }
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
FROM node:20.14.0-alpine
|
|
||||||
|
|
||||||
# Ambiente di sviluppo
|
|
||||||
ENV NODE_ENV=development
|
|
||||||
ENV LETSENCRYPT_SERVER=http://localhost:8080
|
|
||||||
ENV CHOKIDAR_USEPOLLING=true
|
|
||||||
ENV WATCHPACK_POLLING=true
|
|
||||||
|
|
||||||
# Lavora come utente normale
|
|
||||||
USER node
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
EXPOSE 3000
|
|
||||||
|
|
||||||
# Comando di avvio
|
|
||||||
CMD ["sh", "-c", "npm install && npm run dev"]
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
# Use the specific Node.js version 20.14.0 image as the base image for building the app
|
|
||||||
FROM node:20.14.0-alpine AS build
|
|
||||||
|
|
||||||
# Set the working directory inside the container
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
# Copy the package.json and package-lock.json files to the working directory
|
|
||||||
COPY ClientApp/package*.json ./
|
|
||||||
|
|
||||||
# Install the project dependencies
|
|
||||||
RUN npm install
|
|
||||||
|
|
||||||
# Copy the rest of the application code to the working directory
|
|
||||||
COPY ClientApp .
|
|
||||||
|
|
||||||
# Build the Next.js application for production
|
|
||||||
RUN npm run build
|
|
||||||
|
|
||||||
# Use the same Node.js image for running the app
|
|
||||||
FROM node:20.14.0-alpine AS production
|
|
||||||
|
|
||||||
# Set the working directory inside the container
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
# Copy the package.json and package-lock.json files to the working directory
|
|
||||||
COPY ClientApp/package*.json ./
|
|
||||||
|
|
||||||
# Install only production dependencies
|
|
||||||
RUN npm install --only=production
|
|
||||||
|
|
||||||
# Copy the built Next.js application from the build stage to the current directory
|
|
||||||
COPY --from=build /app ./
|
|
||||||
|
|
||||||
# Expose port 3000 to access the application
|
|
||||||
EXPOSE 3000
|
|
||||||
|
|
||||||
# Start the Next.js server
|
|
||||||
CMD ["npm", "start"]
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
|
||||||
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
First, run the development server:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
# or
|
|
||||||
yarn dev
|
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
# or
|
|
||||||
bun dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
|
||||||
|
|
||||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
|
||||||
|
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
|
||||||
|
|
||||||
## Learn More
|
|
||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
|
||||||
|
|
||||||
## Deploy on Vercel
|
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
const AboutPage = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1 className="text-2xl font-bold">About</h1>
|
|
||||||
<p>This is the about page content.</p>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AboutPage
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
const ContactPage = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1 className="text-2xl font-bold">Contact Us</h1>
|
|
||||||
<p>This is the contact page content.</p>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ContactPage
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
@ -1,3 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
@ -1,97 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import React, { FC, useState, useEffect, useRef } from 'react'
|
|
||||||
import { SideMenu } from '@/components/sidemenu'
|
|
||||||
import { TopMenu } from '@/components/topmenu'
|
|
||||||
import { Footer } from '@/components/footer'
|
|
||||||
import { OffCanvas } from '@/components/offcanvas'
|
|
||||||
import { Loader } from '@/components/loader'
|
|
||||||
import { Metadata } from 'next'
|
|
||||||
import { Toast } from '@/components/toast'
|
|
||||||
import { Provider } from 'react-redux'
|
|
||||||
import { store } from '@/redux/store'
|
|
||||||
import './globals.css'
|
|
||||||
|
|
||||||
const metadata: Metadata = {
|
|
||||||
title: 'Create Next App',
|
|
||||||
description: 'Generated by create next app'
|
|
||||||
}
|
|
||||||
|
|
||||||
const Layout: FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
||||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
|
|
||||||
const [isManuallyCollapsed, setManuallyCollapsed] = useState(false)
|
|
||||||
|
|
||||||
const init = useRef(false)
|
|
||||||
|
|
||||||
const toggleSidebar = () => {
|
|
||||||
setIsSidebarCollapsed((prev) => !prev)
|
|
||||||
}
|
|
||||||
|
|
||||||
const manuallyToggleSidebar = () => {
|
|
||||||
setManuallyCollapsed((prev) => !prev)
|
|
||||||
toggleSidebar()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleResize = () => {
|
|
||||||
if (!isManuallyCollapsed) {
|
|
||||||
if (window.innerWidth <= 768) {
|
|
||||||
if (!isSidebarCollapsed) setIsSidebarCollapsed(true)
|
|
||||||
} else {
|
|
||||||
if (isSidebarCollapsed) setIsSidebarCollapsed(false)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (isManuallyCollapsed) return
|
|
||||||
|
|
||||||
if (window.innerWidth > 768 && isSidebarCollapsed) {
|
|
||||||
setIsSidebarCollapsed(false)
|
|
||||||
} else if (window.innerWidth <= 768 && !isSidebarCollapsed) {
|
|
||||||
setIsSidebarCollapsed(true)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!init.current) {
|
|
||||||
handleResize()
|
|
||||||
init.current = true
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('resize', handleResize)
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('resize', handleResize)
|
|
||||||
}
|
|
||||||
}, [isSidebarCollapsed, isManuallyCollapsed])
|
|
||||||
|
|
||||||
const [isOffCanvasOpen, setIsOffCanvasOpen] = useState(false)
|
|
||||||
|
|
||||||
const toggleOffCanvas = () => {
|
|
||||||
setIsOffCanvasOpen((prev) => !prev)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<html lang="en">
|
|
||||||
<body className="h-screen overflow-hidden flex flex-col">
|
|
||||||
<Provider store={store}>
|
|
||||||
<Loader />
|
|
||||||
|
|
||||||
<div className="flex flex-1 overflow-hidden">
|
|
||||||
<SideMenu
|
|
||||||
isCollapsed={isSidebarCollapsed}
|
|
||||||
toggleSidebar={manuallyToggleSidebar}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex flex-col flex-1 overflow-hidden">
|
|
||||||
<TopMenu />
|
|
||||||
<main className="flex-1 p-4 overflow-y-auto">{children}</main>
|
|
||||||
<Footer className="flex-shrink-0" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Toast />
|
|
||||||
</Provider>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Layout
|
|
||||||
@ -1,193 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { ApiRoutes, GetApiRoute } from '@/ApiRoutes'
|
|
||||||
import { httpService } from '@/services/HttpService'
|
|
||||||
import { FormEvent, useEffect, useRef, useState } from 'react'
|
|
||||||
import {
|
|
||||||
CustomButton,
|
|
||||||
CustomCheckbox,
|
|
||||||
CustomEnumSelect,
|
|
||||||
CustomInput,
|
|
||||||
CustomRadioGroup
|
|
||||||
} from '@/controls'
|
|
||||||
import {
|
|
||||||
GetAccountResponse,
|
|
||||||
toCacheAccount
|
|
||||||
} from '@/models/letsEncryptServer/account/responses/GetAccountResponse'
|
|
||||||
import { deepCopy, enumToArray } from '../functions'
|
|
||||||
import { CacheAccount } from '@/entities/CacheAccount'
|
|
||||||
import { ChallengeTypes } from '@/entities/ChallengeTypes'
|
|
||||||
import { FaPlus, FaTrash } from 'react-icons/fa'
|
|
||||||
import { PageContainer } from '@/components/pageContainer'
|
|
||||||
import { OffCanvas } from '@/components/offcanvas'
|
|
||||||
import { AccountEdit } from '@/partials/accoutEdit'
|
|
||||||
import { get } from 'http'
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
const [accounts, setAccounts] = useState<CacheAccount[]>([])
|
|
||||||
const [editingAccount, setEditingAccount] = useState<CacheAccount | null>(
|
|
||||||
null
|
|
||||||
)
|
|
||||||
|
|
||||||
const init = useRef(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (init.current) return
|
|
||||||
|
|
||||||
console.log('Fetching accounts')
|
|
||||||
|
|
||||||
const fetchAccounts = async () => {
|
|
||||||
const newAccounts: CacheAccount[] = []
|
|
||||||
const getAccountsResult = await httpService.get<GetAccountResponse[]>(
|
|
||||||
GetApiRoute(ApiRoutes.ACCOUNTS)
|
|
||||||
)
|
|
||||||
|
|
||||||
if (!getAccountsResult.isSuccess) return
|
|
||||||
|
|
||||||
getAccountsResult.data?.forEach((account) => {
|
|
||||||
newAccounts.push(toCacheAccount(account))
|
|
||||||
})
|
|
||||||
|
|
||||||
setAccounts(newAccounts)
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchAccounts()
|
|
||||||
init.current = true
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const handleAccountUpdate = (updatedAccount: CacheAccount) => {
|
|
||||||
setAccounts(
|
|
||||||
accounts.map((account) =>
|
|
||||||
account.accountId === updatedAccount.accountId
|
|
||||||
? updatedAccount
|
|
||||||
: account
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteAccount = (accountId: string) => {
|
|
||||||
setAccounts(accounts.filter((account) => account.accountId !== accountId))
|
|
||||||
setEditingAccount(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<PageContainer title="LetsEncrypt Auto Renew">
|
|
||||||
{accounts.map((account) => (
|
|
||||||
<div
|
|
||||||
key={account.accountId}
|
|
||||||
className="bg-white shadow-lg rounded-lg p-6 mb-6"
|
|
||||||
>
|
|
||||||
<div className="flex justify-between items-center mb-4">
|
|
||||||
<h2 className="text-2xl font-semibold">
|
|
||||||
Account: {account.accountId}
|
|
||||||
</h2>
|
|
||||||
<CustomButton
|
|
||||||
onClick={() => {
|
|
||||||
setEditingAccount(account)
|
|
||||||
}}
|
|
||||||
className="bg-blue-500 text-white px-3 py-1 rounded"
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</CustomButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-xl font-medium mb-2">
|
|
||||||
Description: {account.description}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<CustomCheckbox
|
|
||||||
checked={account.isDisabled}
|
|
||||||
label="Disabled"
|
|
||||||
disabled={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-xl font-medium mb-2">Contacts:</h3>
|
|
||||||
<ul className="list-disc list-inside pl-4 mb-2">
|
|
||||||
{account.contacts.map((contact) => (
|
|
||||||
<li key={contact} className="text-gray-700 mb-2">
|
|
||||||
{contact}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="mb-4">
|
|
||||||
<CustomEnumSelect
|
|
||||||
title="Challenge Type"
|
|
||||||
enumType={ChallengeTypes}
|
|
||||||
selectedValue={account.challengeType}
|
|
||||||
disabled={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-xl font-medium mb-2">Hostnames:</h3>
|
|
||||||
<ul className="list-disc list-inside pl-4 mb-2">
|
|
||||||
{account.hostnames?.map((hostname) => (
|
|
||||||
<li key={hostname.hostname} className="text-gray-700 mb-2">
|
|
||||||
<div className="inline-flex">
|
|
||||||
{hostname.hostname} - {hostname.expires.toDateString()} -
|
|
||||||
<span
|
|
||||||
className={`ml-2 px-2 py-1 rounded ${
|
|
||||||
hostname.isUpcomingExpire
|
|
||||||
? 'bg-yellow-200 text-yellow-800'
|
|
||||||
: 'bg-green-200 text-green-800'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{hostname.isUpcomingExpire
|
|
||||||
? 'Upcoming'
|
|
||||||
: 'Not Upcoming'}
|
|
||||||
</span>
|
|
||||||
<CustomCheckbox
|
|
||||||
checked={hostname.isDisabled}
|
|
||||||
label="Disabled"
|
|
||||||
disabled={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<CustomRadioGroup
|
|
||||||
options={[
|
|
||||||
{ value: 'staging', label: 'Staging' },
|
|
||||||
{ value: 'production', label: 'Production' }
|
|
||||||
]}
|
|
||||||
initialValue={account.isStaging ? 'staging' : 'production'}
|
|
||||||
title="LetsEncrypt Environment"
|
|
||||||
className=""
|
|
||||||
radioClassName=""
|
|
||||||
errorClassName="text-red-500 text-sm mt-1"
|
|
||||||
disabled={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</PageContainer>
|
|
||||||
|
|
||||||
<OffCanvas
|
|
||||||
title="Edit Account"
|
|
||||||
isOpen={editingAccount !== null}
|
|
||||||
onClose={() => setEditingAccount(null)}
|
|
||||||
>
|
|
||||||
{editingAccount && (
|
|
||||||
<AccountEdit
|
|
||||||
account={editingAccount}
|
|
||||||
onCancel={() => setEditingAccount(null)}
|
|
||||||
onDelete={deleteAccount}
|
|
||||||
onSubmit={(account) => {
|
|
||||||
setEditingAccount(null)
|
|
||||||
handleAccountUpdate(account)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</OffCanvas>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,326 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { FormEvent, useCallback, useState } from 'react'
|
|
||||||
import {
|
|
||||||
useValidation,
|
|
||||||
isBypass,
|
|
||||||
isValidContact,
|
|
||||||
isValidHostname
|
|
||||||
} from '@/hooks/useValidation'
|
|
||||||
import {
|
|
||||||
CustomButton,
|
|
||||||
CustomEnumSelect,
|
|
||||||
CustomInput,
|
|
||||||
CustomRadioGroup
|
|
||||||
} from '@/controls'
|
|
||||||
import { FaTrash, FaPlus } from 'react-icons/fa'
|
|
||||||
import { deepCopy } from '../../functions'
|
|
||||||
import {
|
|
||||||
PostAccountRequest,
|
|
||||||
validatePostAccountRequest
|
|
||||||
} from '@/models/letsEncryptServer/account/requests/PostAccountRequest'
|
|
||||||
import { useAppDispatch } from '@/redux/store'
|
|
||||||
import { showToast } from '@/redux/slices/toastSlice'
|
|
||||||
import { ChallengeTypes } from '@/entities/ChallengeTypes'
|
|
||||||
import { GetAccountResponse } from '@/models/letsEncryptServer/account/responses/GetAccountResponse'
|
|
||||||
import { httpService } from '@/services/HttpService'
|
|
||||||
import { ApiRoutes, GetApiRoute } from '@/ApiRoutes'
|
|
||||||
import { PageContainer } from '@/components/pageContainer'
|
|
||||||
|
|
||||||
const RegisterPage = () => {
|
|
||||||
const [account, setAccount] = useState<PostAccountRequest>({
|
|
||||||
description: '',
|
|
||||||
contacts: [],
|
|
||||||
challengeType: ChallengeTypes.http01,
|
|
||||||
hostnames: [],
|
|
||||||
isStaging: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const [newHostname, setNewHostname] = useState('')
|
|
||||||
const [newContact, setNewContact] = useState('')
|
|
||||||
|
|
||||||
const dispatch = useAppDispatch()
|
|
||||||
|
|
||||||
const {
|
|
||||||
value: description,
|
|
||||||
error: descriptionError,
|
|
||||||
handleChange: handleDescriptionChange,
|
|
||||||
reset: resetDescription
|
|
||||||
} = useValidation<string>({
|
|
||||||
defaultValue: '',
|
|
||||||
externalValue: account.description,
|
|
||||||
setExternalValue: (newDescription) => {
|
|
||||||
setAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.description = newDescription
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
},
|
|
||||||
validateFn: isBypass,
|
|
||||||
errorMessage: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const {
|
|
||||||
value: contact,
|
|
||||||
error: contactError,
|
|
||||||
handleChange: handleContactChange,
|
|
||||||
reset: resetContact
|
|
||||||
} = useValidation<string>({
|
|
||||||
defaultValue: '',
|
|
||||||
externalValue: newContact,
|
|
||||||
setExternalValue: setNewContact,
|
|
||||||
validateFn: isValidContact,
|
|
||||||
errorMessage: 'Invalid contact. Must be a valid email or phone number.'
|
|
||||||
})
|
|
||||||
|
|
||||||
const {
|
|
||||||
value: hostname,
|
|
||||||
error: hostnameError,
|
|
||||||
handleChange: handleHostnameChange,
|
|
||||||
reset: resetHostname
|
|
||||||
} = useValidation<string>({
|
|
||||||
defaultValue: '',
|
|
||||||
externalValue: newHostname,
|
|
||||||
setExternalValue: setNewHostname,
|
|
||||||
validateFn: isValidHostname,
|
|
||||||
errorMessage: 'Invalid hostname format.'
|
|
||||||
})
|
|
||||||
|
|
||||||
const {
|
|
||||||
value: challengeType,
|
|
||||||
error: challengeTypeError,
|
|
||||||
handleChange: handleChallengeTypeChange,
|
|
||||||
reset: resetChallengeType
|
|
||||||
} = useValidation<string>({
|
|
||||||
defaultValue: ChallengeTypes.http01,
|
|
||||||
externalValue: account.challengeType,
|
|
||||||
setExternalValue: (newChallengeType) => {
|
|
||||||
setAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.challengeType = newChallengeType
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
},
|
|
||||||
validateFn: isBypass,
|
|
||||||
errorMessage: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleAddContact = () => {
|
|
||||||
if (contactError !== '') {
|
|
||||||
resetContact()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
if (!newAccount.contacts.includes(contact)) {
|
|
||||||
newAccount.contacts.push(contact)
|
|
||||||
}
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
|
|
||||||
resetContact()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDeleteContact = (contact: string) => {
|
|
||||||
setAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.contacts = newAccount.contacts.filter((c) => c !== contact)
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAddHostname = () => {
|
|
||||||
if (hostnameError !== '') {
|
|
||||||
resetHostname()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
if (!newAccount.hostnames.includes(hostname)) {
|
|
||||||
newAccount.hostnames.push(hostname)
|
|
||||||
}
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
|
|
||||||
resetHostname()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDeleteHostname = (hostname: string) => {
|
|
||||||
setAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.hostnames = newAccount.hostnames.filter((h) => h !== hostname)
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
const errors = validatePostAccountRequest(account)
|
|
||||||
|
|
||||||
if (errors.length > 0) {
|
|
||||||
errors.forEach((error) => {
|
|
||||||
dispatch(showToast({ message: error, type: 'error' }))
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
dispatch(
|
|
||||||
showToast({ message: 'Request model is valid', type: 'success' })
|
|
||||||
)
|
|
||||||
|
|
||||||
httpService
|
|
||||||
.post<
|
|
||||||
PostAccountRequest,
|
|
||||||
GetAccountResponse
|
|
||||||
>(GetApiRoute(ApiRoutes.ACCOUNT), account)
|
|
||||||
.then((response) => {
|
|
||||||
console.log(response)
|
|
||||||
dispatch(showToast({ message: 'Account created', type: 'success' }))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PageContainer title="Register LetsEncrypt Account">
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<div className="mb-4">
|
|
||||||
<CustomInput
|
|
||||||
value={description}
|
|
||||||
onChange={handleDescriptionChange}
|
|
||||||
placeholder="Account Description"
|
|
||||||
type="text"
|
|
||||||
error={descriptionError}
|
|
||||||
title="Description"
|
|
||||||
inputClassName="border p-2 rounded w-full"
|
|
||||||
errorClassName="text-red-500 text-sm mt-1"
|
|
||||||
className="mr-2 flex-grow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-xl font-medium mb-2">Contacts:</h3>
|
|
||||||
<ul className="list-disc list-inside pl-4 mb-2">
|
|
||||||
{account.contacts.map((contact) => (
|
|
||||||
<li
|
|
||||||
key={contact}
|
|
||||||
className="text-gray-700 flex justify-between items-center mb-2"
|
|
||||||
>
|
|
||||||
{contact}
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleDeleteContact(contact)}
|
|
||||||
className="bg-red-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
<FaTrash />
|
|
||||||
</CustomButton>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<div className="flex items-center mb-4">
|
|
||||||
<CustomInput
|
|
||||||
value={contact}
|
|
||||||
onChange={handleContactChange}
|
|
||||||
placeholder="Add contact"
|
|
||||||
type="text"
|
|
||||||
error={contactError}
|
|
||||||
title="New Contact"
|
|
||||||
inputClassName="border p-2 rounded w-full"
|
|
||||||
errorClassName="text-red-500 text-sm mt-1"
|
|
||||||
className="mr-2 flex-grow"
|
|
||||||
/>
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={handleAddContact}
|
|
||||||
className="bg-green-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
<FaPlus />
|
|
||||||
</CustomButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-4">
|
|
||||||
<CustomEnumSelect
|
|
||||||
error={challengeTypeError}
|
|
||||||
title="Challenge Type"
|
|
||||||
enumType={ChallengeTypes}
|
|
||||||
selectedValue={challengeType}
|
|
||||||
onChange={handleChallengeTypeChange}
|
|
||||||
selectBoxClassName="border p-2 rounded w-full"
|
|
||||||
errorClassName="text-red-500 text-sm mt-1"
|
|
||||||
className="mr-2 flex-grow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-xl font-medium mb-2">Hostnames:</h3>
|
|
||||||
<ul className="list-disc list-inside pl-4 mb-2">
|
|
||||||
{account.hostnames.map((hostname) => (
|
|
||||||
<li
|
|
||||||
key={hostname}
|
|
||||||
className="text-gray-700 flex justify-between items-center mb-2"
|
|
||||||
>
|
|
||||||
{hostname}
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleDeleteHostname(hostname)}
|
|
||||||
className="bg-red-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
<FaTrash />
|
|
||||||
</CustomButton>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<CustomInput
|
|
||||||
value={hostname}
|
|
||||||
onChange={handleHostnameChange}
|
|
||||||
placeholder="Add hostname"
|
|
||||||
type="text"
|
|
||||||
error={hostnameError}
|
|
||||||
title="New Hostname"
|
|
||||||
inputClassName="border p-2 rounded w-full"
|
|
||||||
errorClassName="text-red-500 text-sm mt-1"
|
|
||||||
className="mr-2 flex-grow"
|
|
||||||
/>
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={handleAddHostname}
|
|
||||||
className="bg-green-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
<FaPlus />
|
|
||||||
</CustomButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<CustomRadioGroup
|
|
||||||
options={[
|
|
||||||
{ value: 'staging', label: 'Staging' },
|
|
||||||
{ value: 'production', label: 'Production' }
|
|
||||||
]}
|
|
||||||
initialValue={account.isStaging ? 'staging' : 'production'}
|
|
||||||
onChange={(value) => {
|
|
||||||
setAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.isStaging = value === 'staging'
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
title="LetsEncrypt Environment"
|
|
||||||
className=""
|
|
||||||
radioClassName=""
|
|
||||||
errorClassName="text-red-500 text-sm mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CustomButton
|
|
||||||
type="submit"
|
|
||||||
className="bg-green-500 text-white px-3 py-1 rounded"
|
|
||||||
>
|
|
||||||
Create Account
|
|
||||||
</CustomButton>
|
|
||||||
</form>
|
|
||||||
</PageContainer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RegisterPage
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { ApiRoutes, GetApiRoute } from '@/ApiRoutes'
|
|
||||||
import { PageContainer } from '@/components/pageContainer'
|
|
||||||
import { CustomButton, CustomFileUploader } from '@/controls'
|
|
||||||
import { showToast } from '@/redux/slices/toastSlice'
|
|
||||||
import { useAppDispatch } from '@/redux/store'
|
|
||||||
import { httpService } from '@/services/HttpService'
|
|
||||||
import { useEffect, useState } from 'react'
|
|
||||||
|
|
||||||
const TestPage = () => {
|
|
||||||
const dispatch = useAppDispatch()
|
|
||||||
|
|
||||||
const [files, setFiles] = useState<File[] | null>(null)
|
|
||||||
|
|
||||||
const handleTestAgent = async () => {
|
|
||||||
httpService
|
|
||||||
.get<string>(GetApiRoute(ApiRoutes.AGENT_TEST))
|
|
||||||
.then((response) => {
|
|
||||||
dispatch(
|
|
||||||
showToast({
|
|
||||||
message: JSON.stringify(response),
|
|
||||||
type: 'info'
|
|
||||||
})
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDownloadCache = async () => {}
|
|
||||||
|
|
||||||
const handleUploadCache = async () => {}
|
|
||||||
|
|
||||||
const handleRestoreFromCache = async () => {}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (files && files.length > 0) {
|
|
||||||
handleUploadCache()
|
|
||||||
}
|
|
||||||
}, [files])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PageContainer title="CertsUI Utils">
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={handleTestAgent}
|
|
||||||
className="bg-green-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
Test Agent
|
|
||||||
</CustomButton>
|
|
||||||
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={handleRestoreFromCache}
|
|
||||||
className="bg-yellow-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
Restore from cache
|
|
||||||
</CustomButton>
|
|
||||||
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={handleDownloadCache}
|
|
||||||
className="bg-blue-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
Download cache
|
|
||||||
</CustomButton>
|
|
||||||
|
|
||||||
<CustomFileUploader
|
|
||||||
value={files}
|
|
||||||
onChange={setFiles}
|
|
||||||
accept=".zip"
|
|
||||||
buttonClassName="bg-blue-500 text-white p-2 rounded ml-2"
|
|
||||||
title="Upload cache"
|
|
||||||
/>
|
|
||||||
</PageContainer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TestPage
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
interface FooterProps {
|
|
||||||
className?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const Footer = (props: FooterProps) => {
|
|
||||||
const { className } = props
|
|
||||||
return (
|
|
||||||
<footer className={`bg-gray-900 text-white text-center p-4 ${className}`}>
|
|
||||||
<p>{`© ${new Date().getFullYear()} MAKS-IT`}</p>
|
|
||||||
</footer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Footer }
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
// components/Loader.tsx
|
|
||||||
import React, { useEffect } from 'react'
|
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
|
||||||
import { RootState } from '@/redux/store'
|
|
||||||
import { reset } from '@/redux/slices/loaderSlice'
|
|
||||||
import './loader.css'
|
|
||||||
|
|
||||||
const Loader: React.FC = () => {
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
const activeRequests = useSelector(
|
|
||||||
(state: RootState) => state.loader.activeRequests
|
|
||||||
)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let timeout: NodeJS.Timeout | null = null
|
|
||||||
if (activeRequests > 0) {
|
|
||||||
timeout = setTimeout(() => {
|
|
||||||
dispatch(reset())
|
|
||||||
}, 120000) // Adjust the timeout as necessary
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (timeout) {
|
|
||||||
clearTimeout(timeout)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [activeRequests, dispatch])
|
|
||||||
|
|
||||||
if (activeRequests === 0) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="loader-overlay">
|
|
||||||
<span className="loader"></span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Loader }
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
.loader-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.1); /* 10% transparent background */
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 9999;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loader {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.loader::after,
|
|
||||||
.loader::before {
|
|
||||||
content: '';
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #FFF;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
animation: animloader 2s linear infinite;
|
|
||||||
}
|
|
||||||
.loader::after {
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes animloader {
|
|
||||||
0% {
|
|
||||||
transform: scale(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import React, { FC } from 'react'
|
|
||||||
|
|
||||||
interface OffCanvasProps {
|
|
||||||
title?: string
|
|
||||||
children: React.ReactNode
|
|
||||||
isOpen: boolean
|
|
||||||
onClose?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const OffCanvas: FC<OffCanvasProps> = (props) => {
|
|
||||||
const { title, children, isOpen, onClose } = props
|
|
||||||
|
|
||||||
const handleOnClose = () => {
|
|
||||||
onClose?.()
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`fixed inset-0 bg-gray-800 bg-opacity-50 z-50 transform transition-transform duration-300 ${
|
|
||||||
isOpen ? 'translate-x-0' : 'translate-x-full'
|
|
||||||
}`}
|
|
||||||
onClick={handleOnClose}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="absolute top-0 right-0 bg-white max-w-full md:max-w-md lg:max-w-lg xl:max-w-xl h-full shadow-lg overflow-y-auto"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<div className="p-4">
|
|
||||||
{title && <h2 className="text-xl font-bold">{title}</h2>}
|
|
||||||
<button onClick={handleOnClose} className="mt-4 text-red-500">
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="p-4">{children}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { OffCanvas }
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
interface PageContainerProps {
|
|
||||||
title?: string
|
|
||||||
children: React.ReactNode
|
|
||||||
}
|
|
||||||
|
|
||||||
const PageContainer: React.FC<PageContainerProps> = (props) => {
|
|
||||||
const { title, children } = props
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="container mx-auto p-4">
|
|
||||||
{title && (
|
|
||||||
<h1 className="text-4xl font-bold text-center mb-8">{title}</h1>
|
|
||||||
)}
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { PageContainer }
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
import React, { FC } from 'react'
|
|
||||||
import {
|
|
||||||
FaHome,
|
|
||||||
FaUserPlus,
|
|
||||||
FaBars,
|
|
||||||
FaSyncAlt,
|
|
||||||
FaThermometerHalf
|
|
||||||
} from 'react-icons/fa'
|
|
||||||
import Link from 'next/link'
|
|
||||||
|
|
||||||
interface SideMenuProps {
|
|
||||||
isCollapsed: boolean
|
|
||||||
toggleSidebar: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const menuItems = [
|
|
||||||
{ icon: <FaSyncAlt />, label: 'Auto Renew', path: '/' },
|
|
||||||
{ icon: <FaUserPlus />, label: 'Register', path: '/register' },
|
|
||||||
{ icon: <FaThermometerHalf />, label: 'Utils', path: '/utils' }
|
|
||||||
]
|
|
||||||
|
|
||||||
const SideMenu: FC<SideMenuProps> = ({ isCollapsed, toggleSidebar }) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`flex flex-col bg-gray-800 text-white transition-all duration-300 ${isCollapsed ? 'w-16' : 'w-64'} h-full`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center h-16 bg-gray-900 relative">
|
|
||||||
<button onClick={toggleSidebar} className="absolute left-4">
|
|
||||||
<FaBars />
|
|
||||||
</button>
|
|
||||||
<h1
|
|
||||||
className={`${isCollapsed ? 'hidden' : 'block'} text-2xl font-bold ml-12`}
|
|
||||||
>
|
|
||||||
Certs UI
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<nav className="flex-1">
|
|
||||||
<ul>
|
|
||||||
{menuItems.map((item, index) => (
|
|
||||||
<li key={index} className="hover:bg-gray-700">
|
|
||||||
<Link href={item.path} className="flex items-center w-full p-4">
|
|
||||||
<span className={`${isCollapsed ? 'mr-0' : 'mr-4'}`}>
|
|
||||||
{item.icon}
|
|
||||||
</span>
|
|
||||||
<span className={`${isCollapsed ? 'hidden' : 'block'}`}>
|
|
||||||
{item.label}
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { SideMenu }
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
// components/Toast.tsx
|
|
||||||
import React, { useEffect } from 'react'
|
|
||||||
import { ToastContainer, toast } from 'react-toastify'
|
|
||||||
import 'react-toastify/dist/ReactToastify.css'
|
|
||||||
import { useDispatch, useSelector } from 'react-redux'
|
|
||||||
import { RootState } from '@/redux/store'
|
|
||||||
import { clearToast, removeToast } from '@/redux/slices/toastSlice'
|
|
||||||
|
|
||||||
const Toast = () => {
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
const toastState = useSelector((state: RootState) => state.toast)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
toastState.messages.forEach((toastMessage) => {
|
|
||||||
switch (toastMessage.type) {
|
|
||||||
case 'success':
|
|
||||||
toast.success(toastMessage.message)
|
|
||||||
break
|
|
||||||
case 'error':
|
|
||||||
toast.error(toastMessage.message)
|
|
||||||
break
|
|
||||||
case 'info':
|
|
||||||
toast.info(toastMessage.message)
|
|
||||||
break
|
|
||||||
case 'warning':
|
|
||||||
toast.warn(toastMessage.message)
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
toast(toastMessage.message)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch(removeToast(toastMessage.id))
|
|
||||||
})
|
|
||||||
}, [toastState, dispatch])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ToastContainer
|
|
||||||
position="bottom-right"
|
|
||||||
theme="dark"
|
|
||||||
autoClose={5000}
|
|
||||||
hideProgressBar={false}
|
|
||||||
newestOnTop={false}
|
|
||||||
closeOnClick
|
|
||||||
rtl={false}
|
|
||||||
pauseOnFocusLoss
|
|
||||||
draggable
|
|
||||||
pauseOnHover
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Toast }
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
'use client' // Add this line
|
|
||||||
|
|
||||||
import React, { FC, useState } from 'react'
|
|
||||||
import { FaCog, FaBars } from 'react-icons/fa'
|
|
||||||
import Link from 'next/link'
|
|
||||||
|
|
||||||
interface TopMenuProps {}
|
|
||||||
|
|
||||||
const TopMenu: FC<TopMenuProps> = () => {
|
|
||||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
|
||||||
|
|
||||||
const toggleMenu = () => {
|
|
||||||
setIsMenuOpen(!isMenuOpen)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header className="bg-gray-900 text-white flex items-center p-4">
|
|
||||||
<nav className="flex-1 flex justify-between items-center h-8">
|
|
||||||
<ul className="hidden md:flex space-x-4">
|
|
||||||
<li className="hover:bg-gray-700 p-2 rounded">
|
|
||||||
<Link href="/">Home</Link>
|
|
||||||
</li>
|
|
||||||
<li className="hover:bg-gray-700 p-2 rounded">
|
|
||||||
<Link href="/about">About</Link>
|
|
||||||
</li>
|
|
||||||
<li className="hover:bg-gray-700 p-2 rounded">
|
|
||||||
<Link href="/contact">Contact</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
{isMenuOpen && (
|
|
||||||
<ul className="absolute top-16 right-0 bg-gray-900 w-48 md:hidden">
|
|
||||||
<li className="hover:bg-gray-700 p-2">
|
|
||||||
<Link href="/">Home</Link>
|
|
||||||
</li>
|
|
||||||
<li className="hover:bg-gray-700 p-2">
|
|
||||||
<Link href="/about">About</Link>
|
|
||||||
</li>
|
|
||||||
<li className="hover:bg-gray-700 p-2">
|
|
||||||
<Link href="/contact">Contact</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</nav>
|
|
||||||
<button onClick={toggleMenu} className="md:hidden">
|
|
||||||
<FaBars />
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { TopMenu }
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
'use client'
|
|
||||||
import React, { FC } from 'react'
|
|
||||||
|
|
||||||
interface CustomButtonProps {
|
|
||||||
onClick?: () => void
|
|
||||||
className?: string
|
|
||||||
children: React.ReactNode
|
|
||||||
disabled?: boolean
|
|
||||||
type?: 'button' | 'submit' | 'reset'
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomButton: FC<CustomButtonProps> = (props) => {
|
|
||||||
const {
|
|
||||||
onClick,
|
|
||||||
className = '',
|
|
||||||
children,
|
|
||||||
disabled = false,
|
|
||||||
type = 'button'
|
|
||||||
} = props
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
onClick={onClick}
|
|
||||||
className={className}
|
|
||||||
disabled={disabled}
|
|
||||||
type={type}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { CustomButton }
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
// components/CustomCheckbox.tsx
|
|
||||||
import React, { FC } from 'react'
|
|
||||||
|
|
||||||
interface CustomCheckboxProps {
|
|
||||||
checked: boolean
|
|
||||||
onChange?: (checked: boolean) => void
|
|
||||||
label?: string
|
|
||||||
checkboxClassName?: string
|
|
||||||
labelClassName?: string
|
|
||||||
error?: string
|
|
||||||
errorClassName?: string
|
|
||||||
className?: string
|
|
||||||
readOnly?: boolean
|
|
||||||
disabled?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomCheckbox: FC<CustomCheckboxProps> = (props) => {
|
|
||||||
const {
|
|
||||||
checked,
|
|
||||||
onChange,
|
|
||||||
label,
|
|
||||||
checkboxClassName = '',
|
|
||||||
labelClassName = '',
|
|
||||||
error,
|
|
||||||
errorClassName = '',
|
|
||||||
className = '',
|
|
||||||
readOnly = false,
|
|
||||||
disabled = false
|
|
||||||
} = props
|
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (!readOnly && !disabled) {
|
|
||||||
onChange?.(e.target.checked)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`flex flex-col ${className}`}>
|
|
||||||
<label className={`flex items-center ${labelClassName}`}>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={checked}
|
|
||||||
onChange={handleChange}
|
|
||||||
className={`mr-2 ${checkboxClassName}`}
|
|
||||||
readOnly={readOnly}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
{label && <span>{label}</span>}
|
|
||||||
</label>
|
|
||||||
{error && (
|
|
||||||
<p className={`text-red-500 mt-1 ${errorClassName}`}>{error}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { CustomCheckbox }
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CustomSelect,
|
|
||||||
CustomSelectOption,
|
|
||||||
CustomSelectPropsBase
|
|
||||||
} from './customSelect'
|
|
||||||
import { enumToArray } from '@/functions'
|
|
||||||
|
|
||||||
interface CustomEnumSelectProps extends CustomSelectPropsBase {
|
|
||||||
enumType: any
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomEnumSelect: React.FC<CustomEnumSelectProps> = (props) => {
|
|
||||||
const { enumType, ...customSelectProps } = props
|
|
||||||
|
|
||||||
const options = enumToArray(enumType).map((item) => {
|
|
||||||
const option: CustomSelectOption = {
|
|
||||||
value: `${item.value}`,
|
|
||||||
label: item.key
|
|
||||||
}
|
|
||||||
|
|
||||||
return option
|
|
||||||
})
|
|
||||||
|
|
||||||
return <CustomSelect options={options} {...customSelectProps} />
|
|
||||||
}
|
|
||||||
|
|
||||||
export { CustomEnumSelect }
|
|
||||||
@ -1,98 +0,0 @@
|
|||||||
'use client'
|
|
||||||
import React, { FC, useRef } from 'react'
|
|
||||||
import { CustomButton } from './customButton'
|
|
||||||
|
|
||||||
interface CustomFileUploaderProps {
|
|
||||||
value?: File[] | null
|
|
||||||
onChange?: (files: File[] | null) => void
|
|
||||||
label?: string
|
|
||||||
labelClassName?: string
|
|
||||||
error?: string
|
|
||||||
errorClassName?: string
|
|
||||||
className?: string
|
|
||||||
buttonClassName?: string
|
|
||||||
inputClassName?: string
|
|
||||||
readOnly?: boolean
|
|
||||||
disabled?: boolean
|
|
||||||
accept?: string
|
|
||||||
multiple?: boolean
|
|
||||||
title?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomFileUploader: FC<CustomFileUploaderProps> = ({
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
label,
|
|
||||||
labelClassName = '',
|
|
||||||
error,
|
|
||||||
errorClassName = '',
|
|
||||||
className = '',
|
|
||||||
buttonClassName = '',
|
|
||||||
inputClassName = '',
|
|
||||||
readOnly = false,
|
|
||||||
disabled = false,
|
|
||||||
accept,
|
|
||||||
multiple = false,
|
|
||||||
title
|
|
||||||
}) => {
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (!readOnly && !disabled) {
|
|
||||||
const files = e.target.files ? Array.from(e.target.files) : null
|
|
||||||
onChange?.(files && files.length > 0 ? files : null)
|
|
||||||
// Reset input value so the same file can be selected again
|
|
||||||
if (fileInputRef.current) fileInputRef.current.value = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span className={`inline-flex items-center ${className}`}>
|
|
||||||
{label && <label className={`mb-1 ${labelClassName}`}>{label}</label>}
|
|
||||||
<input
|
|
||||||
ref={fileInputRef}
|
|
||||||
type="file"
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleChange}
|
|
||||||
disabled={disabled}
|
|
||||||
readOnly={readOnly}
|
|
||||||
accept={accept}
|
|
||||||
multiple={multiple}
|
|
||||||
/>
|
|
||||||
{value && value.length > 0 && (
|
|
||||||
<>
|
|
||||||
<span className="flex flex-row gap-2 mr-2 text-sm text-gray-600">
|
|
||||||
{value.map((file, idx) => (
|
|
||||||
<span key={file.name + idx}>{file.name}</span>
|
|
||||||
))}
|
|
||||||
</span>
|
|
||||||
<CustomButton
|
|
||||||
onClick={() => {
|
|
||||||
onChange?.(null)
|
|
||||||
if (fileInputRef.current) fileInputRef.current.value = ''
|
|
||||||
}}
|
|
||||||
className={buttonClassName + ' ml-1'}
|
|
||||||
disabled={disabled || readOnly}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</CustomButton>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<CustomButton
|
|
||||||
onClick={() => {
|
|
||||||
if (!disabled && !readOnly) fileInputRef.current?.click()
|
|
||||||
}}
|
|
||||||
className={buttonClassName}
|
|
||||||
disabled={disabled}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</CustomButton>
|
|
||||||
{error && (
|
|
||||||
<span className={`text-red-500 mt-1 ${errorClassName}`}>{error}</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { CustomFileUploader }
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
// components/CustomInput.tsx
|
|
||||||
'use client'
|
|
||||||
import React, { FC } from 'react'
|
|
||||||
|
|
||||||
interface CustomInputProps {
|
|
||||||
value: string
|
|
||||||
onChange?: (value: string) => void
|
|
||||||
placeholder?: string
|
|
||||||
type: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url'
|
|
||||||
error?: string
|
|
||||||
title?: string
|
|
||||||
inputClassName?: string
|
|
||||||
errorClassName?: string
|
|
||||||
className?: string
|
|
||||||
readOnly?: boolean
|
|
||||||
disabled?: boolean
|
|
||||||
children?: React.ReactNode // Added for additional elements
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomInput: FC<CustomInputProps> = ({
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
placeholder = '',
|
|
||||||
type = 'text',
|
|
||||||
error,
|
|
||||||
title,
|
|
||||||
inputClassName = '',
|
|
||||||
errorClassName = '',
|
|
||||||
className = '',
|
|
||||||
readOnly = false,
|
|
||||||
disabled = false,
|
|
||||||
children // Added for additional elements
|
|
||||||
}) => {
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
onChange?.(e.target.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`flex flex-col ${className}`}>
|
|
||||||
{title && <label className="mb-1">{title}</label>}
|
|
||||||
<div className="flex items-center">
|
|
||||||
<input
|
|
||||||
type={type}
|
|
||||||
value={value}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder={placeholder}
|
|
||||||
className={`flex-grow ${inputClassName}`}
|
|
||||||
readOnly={readOnly}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
{children && <div className="ml-2">{children}</div>}
|
|
||||||
</div>
|
|
||||||
{error && (
|
|
||||||
<p className={`text-red-500 mt-1 ${errorClassName}`}>{error}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { CustomInput }
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
// components/CustomRadioGroup.tsx
|
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
interface CustomRadioOption {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CustomRadioGroupProps {
|
|
||||||
options: CustomRadioOption[]
|
|
||||||
initialValue?: string
|
|
||||||
onChange?: (value: string) => void
|
|
||||||
title?: string
|
|
||||||
error?: string
|
|
||||||
className?: string
|
|
||||||
radioClassName?: string
|
|
||||||
errorClassName?: string
|
|
||||||
readOnly?: boolean
|
|
||||||
disabled?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomRadioGroup: React.FC<CustomRadioGroupProps> = ({
|
|
||||||
options,
|
|
||||||
initialValue,
|
|
||||||
onChange,
|
|
||||||
title,
|
|
||||||
error,
|
|
||||||
className = '',
|
|
||||||
radioClassName = '',
|
|
||||||
errorClassName = '',
|
|
||||||
readOnly = false,
|
|
||||||
disabled = false
|
|
||||||
}) => {
|
|
||||||
const [selectedValue, setSelectedValue] = useState(initialValue || '')
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (initialValue) {
|
|
||||||
setSelectedValue(initialValue)
|
|
||||||
}
|
|
||||||
}, [initialValue])
|
|
||||||
|
|
||||||
const handleOptionChange = (value: string) => {
|
|
||||||
if (!readOnly && !disabled) {
|
|
||||||
setSelectedValue(value)
|
|
||||||
onChange?.(value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`flex flex-col ${className}`}>
|
|
||||||
{title && <label className="mb-1">{title}</label>}
|
|
||||||
<div className="flex flex-col">
|
|
||||||
{options.map((option) => (
|
|
||||||
<label
|
|
||||||
key={option.value}
|
|
||||||
className={`flex items-center mb-2 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
value={option.value}
|
|
||||||
checked={selectedValue === option.value}
|
|
||||||
onChange={() => handleOptionChange(option.value)}
|
|
||||||
className={`mr-2 ${radioClassName}`}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
{option.label}
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{error && (
|
|
||||||
<p className={`text-red-500 mt-1 ${errorClassName}`}>{error}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { CustomRadioGroup }
|
|
||||||
@ -1,125 +0,0 @@
|
|||||||
import React, { useRef, useEffect, useState } from 'react'
|
|
||||||
import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
|
|
||||||
|
|
||||||
export interface CustomSelectOption {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CustomSelectPropsBase {
|
|
||||||
selectedValue: string | null | undefined
|
|
||||||
onChange?: (value: string) => void
|
|
||||||
readOnly?: boolean
|
|
||||||
disabled?: boolean
|
|
||||||
title?: string
|
|
||||||
error?: string
|
|
||||||
className?: string
|
|
||||||
selectBoxClassName?: string
|
|
||||||
errorClassName?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CustomSelectProps extends CustomSelectPropsBase {
|
|
||||||
options: CustomSelectOption[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomSelect: React.FC<CustomSelectProps> = ({
|
|
||||||
options,
|
|
||||||
selectedValue,
|
|
||||||
onChange,
|
|
||||||
readOnly = false,
|
|
||||||
disabled = false,
|
|
||||||
title,
|
|
||||||
error,
|
|
||||||
className = '',
|
|
||||||
selectBoxClassName = '',
|
|
||||||
errorClassName = ''
|
|
||||||
}) => {
|
|
||||||
const [isOpen, setIsOpen] = useState(false)
|
|
||||||
const selectBoxRef = useRef<HTMLDivElement>(null)
|
|
||||||
|
|
||||||
const handleToggle = () => {
|
|
||||||
if (!readOnly && !disabled) {
|
|
||||||
setIsOpen(!isOpen)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleOptionClick = (option: CustomSelectOption) => {
|
|
||||||
if (!readOnly && !disabled) {
|
|
||||||
onChange?.(option.value)
|
|
||||||
setIsOpen(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClickOutside = (event: MouseEvent) => {
|
|
||||||
if (
|
|
||||||
selectBoxRef.current &&
|
|
||||||
!selectBoxRef.current.contains(event.target as Node)
|
|
||||||
) {
|
|
||||||
setIsOpen(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
document.addEventListener('mousedown', handleClickOutside)
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('mousedown', handleClickOutside)
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const selectedOption =
|
|
||||||
options.find((option) => option.value === selectedValue) || null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`flex flex-col ${className}`} ref={selectBoxRef}>
|
|
||||||
{title && <label className="mb-1 text-gray-700">{title}</label>}
|
|
||||||
<div
|
|
||||||
className={`relative w-64 ${disabled ? 'opacity-50 cursor-not-allowed' : readOnly ? 'cursor-not-allowed' : ''}`}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`p-2 border rounded flex justify-between items-center ${
|
|
||||||
disabled
|
|
||||||
? 'border-gray-200 bg-gray-100 text-gray-500'
|
|
||||||
: readOnly
|
|
||||||
? 'border-gray-300 bg-white cursor-not-allowed'
|
|
||||||
: 'border-gray-300 bg-white cursor-pointer hover:border-gray-400'
|
|
||||||
} ${selectBoxClassName}`}
|
|
||||||
onClick={handleToggle}
|
|
||||||
>
|
|
||||||
<span className={`${disabled ? 'text-gray-500' : ''}`}>
|
|
||||||
{selectedOption ? selectedOption.label : 'Select an option'}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{isOpen ? (
|
|
||||||
<FaChevronUp
|
|
||||||
className={`ml-2 ${disabled ? 'text-gray-500' : ''}`}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<FaChevronDown
|
|
||||||
className={`ml-2 ${disabled ? 'text-gray-500' : ''}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isOpen && (
|
|
||||||
<ul className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded shadow-lg max-h-60 overflow-y-auto">
|
|
||||||
{options.map((option) => (
|
|
||||||
<li
|
|
||||||
key={option.value}
|
|
||||||
className={'p-2'}
|
|
||||||
onClick={() => handleOptionClick(option)}
|
|
||||||
>
|
|
||||||
{option.label}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<p className={`text-red-500 mt-1 ${errorClassName}`}>{error}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { CustomSelect }
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import { CustomButton } from './customButton'
|
|
||||||
import { CustomInput } from './customInput'
|
|
||||||
import { CustomCheckbox } from './customCheckbox'
|
|
||||||
import { CustomSelect } from './customSelect'
|
|
||||||
import { CustomEnumSelect } from './customEnumSelect'
|
|
||||||
import { CustomRadioGroup } from './customRadioGroup'
|
|
||||||
import { CustomFileUploader } from './customFileUploader'
|
|
||||||
|
|
||||||
export {
|
|
||||||
CustomButton,
|
|
||||||
CustomInput,
|
|
||||||
CustomCheckbox,
|
|
||||||
CustomSelect,
|
|
||||||
CustomEnumSelect,
|
|
||||||
CustomRadioGroup,
|
|
||||||
CustomFileUploader
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import { PatchOperation } from '@/models/PatchOperation'
|
|
||||||
import { CacheAccountHostname } from './CacheAccountHostname'
|
|
||||||
import { PatchAccountRequest } from '@/models/letsEncryptServer/account/requests/PatchAccountRequest'
|
|
||||||
|
|
||||||
export interface CacheAccount {
|
|
||||||
accountId: string
|
|
||||||
isDisabled: boolean
|
|
||||||
description: string
|
|
||||||
contacts: string[]
|
|
||||||
challengeType?: string
|
|
||||||
hostnames?: CacheAccountHostname[]
|
|
||||||
isEditMode: boolean
|
|
||||||
isStaging: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const toPatchAccountRequest = (account: CacheAccount): PatchAccountRequest => {
|
|
||||||
return {
|
|
||||||
description: { op: PatchOperation.None, value: account.description },
|
|
||||||
isDisabled: { op: PatchOperation.None, value: account.isDisabled },
|
|
||||||
contacts: account.contacts.map((contact, index) => ({
|
|
||||||
index: index,
|
|
||||||
op: PatchOperation.None,
|
|
||||||
value: contact
|
|
||||||
})),
|
|
||||||
hostnames: account.hostnames?.map((hostname, index) => ({
|
|
||||||
hostname: {
|
|
||||||
index: index,
|
|
||||||
op: PatchOperation.None,
|
|
||||||
value: hostname.hostname
|
|
||||||
},
|
|
||||||
isDisabled: {
|
|
||||||
index: index,
|
|
||||||
op: PatchOperation.None,
|
|
||||||
value: hostname.isDisabled
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { toPatchAccountRequest }
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export interface CacheAccountHostname {
|
|
||||||
hostname: string
|
|
||||||
expires: Date
|
|
||||||
isUpcomingExpire: boolean
|
|
||||||
isDisabled: boolean
|
|
||||||
}
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
export enum ChallengeTypes {
|
|
||||||
http01 = 'http-01',
|
|
||||||
dns01 = 'dns-01'
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
const deepCopy = <T>(input: T): T => {
|
|
||||||
const map = new Map()
|
|
||||||
|
|
||||||
const clone = (item: any): any => {
|
|
||||||
if (item === null || typeof item !== 'object') {
|
|
||||||
return item
|
|
||||||
}
|
|
||||||
|
|
||||||
if (map.has(item)) {
|
|
||||||
return map.get(item)
|
|
||||||
}
|
|
||||||
|
|
||||||
let result: any
|
|
||||||
|
|
||||||
if (Array.isArray(item)) {
|
|
||||||
result = []
|
|
||||||
map.set(item, result)
|
|
||||||
item.forEach((element, index) => {
|
|
||||||
result[index] = clone(element)
|
|
||||||
})
|
|
||||||
} else if (item instanceof Date) {
|
|
||||||
result = new Date(item)
|
|
||||||
map.set(item, result)
|
|
||||||
} else if (item instanceof RegExp) {
|
|
||||||
result = new RegExp(item)
|
|
||||||
map.set(item, result)
|
|
||||||
} else {
|
|
||||||
result = Object.create(Object.getPrototypeOf(item))
|
|
||||||
map.set(item, result)
|
|
||||||
Object.keys(item).forEach((key) => {
|
|
||||||
result[key] = clone(item[key])
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
|
|
||||||
return clone(input)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { deepCopy }
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
interface EnumKeyValue {
|
|
||||||
key: string
|
|
||||||
value: string | number
|
|
||||||
}
|
|
||||||
|
|
||||||
const enumToArray = <T extends { [key: string]: string | number }>(
|
|
||||||
enumObj: T
|
|
||||||
): EnumKeyValue[] => {
|
|
||||||
return Object.keys(enumObj)
|
|
||||||
.filter((key) => isNaN(Number(key))) // Ensure that only string keys are considered
|
|
||||||
.map((key) => ({
|
|
||||||
key,
|
|
||||||
value: enumObj[key as keyof typeof enumObj]
|
|
||||||
}))
|
|
||||||
.map((entry) => ({
|
|
||||||
key: entry.key,
|
|
||||||
value:
|
|
||||||
typeof entry.value === 'string' && !isNaN(Number(entry.value))
|
|
||||||
? Number(entry.value)
|
|
||||||
: entry.value
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
const enumToObject = <T extends { [key: string]: string | number }>(
|
|
||||||
enumObj: T
|
|
||||||
): { [key: string]: EnumKeyValue } => {
|
|
||||||
return Object.keys(enumObj)
|
|
||||||
.filter((key) => isNaN(Number(key))) // Ensure that only string keys are considered
|
|
||||||
.reduce(
|
|
||||||
(acc, key) => {
|
|
||||||
const value = enumObj[key as keyof typeof enumObj]
|
|
||||||
acc[key] = {
|
|
||||||
key,
|
|
||||||
value:
|
|
||||||
typeof value === 'string' && !isNaN(Number(value))
|
|
||||||
? Number(value)
|
|
||||||
: value
|
|
||||||
}
|
|
||||||
return acc
|
|
||||||
},
|
|
||||||
{} as { [key: string]: EnumKeyValue }
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { enumToArray, enumToObject }
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import { deepCopy } from './deepCopy'
|
|
||||||
import { enumToArray, enumToObject } from './enums'
|
|
||||||
|
|
||||||
export { deepCopy, enumToArray, enumToObject }
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react'
|
|
||||||
|
|
||||||
// Helper functions for validation
|
|
||||||
const isBypass = (value: any) => true
|
|
||||||
const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
|
|
||||||
const isValidPhoneNumber = (phone: string) => /^\+?[1-9]\d{1,14}$/.test(phone)
|
|
||||||
const isValidContact = (contact: string) =>
|
|
||||||
isValidEmail(contact) || isValidPhoneNumber(contact)
|
|
||||||
const isValidHostname = (hostname: string) =>
|
|
||||||
/^(?!:\/\/)([a-zA-Z0-9-_]{1,63}\.?)+[a-zA-Z]{2,6}$/.test(hostname)
|
|
||||||
|
|
||||||
// Props interface for useValidation hook
|
|
||||||
interface UseValidationProps<T> {
|
|
||||||
externalValue: T
|
|
||||||
setExternalValue: (value: T) => void
|
|
||||||
validateFn: (value: T) => boolean
|
|
||||||
errorMessage: string
|
|
||||||
emptyFieldMessage?: string
|
|
||||||
defaultValue: T
|
|
||||||
}
|
|
||||||
|
|
||||||
// Custom hook for input validation
|
|
||||||
const useValidation = <T extends string | number | Date | boolean>(
|
|
||||||
props: UseValidationProps<T>
|
|
||||||
) => {
|
|
||||||
const {
|
|
||||||
externalValue,
|
|
||||||
setExternalValue,
|
|
||||||
validateFn,
|
|
||||||
errorMessage,
|
|
||||||
emptyFieldMessage = 'This field cannot be empty.',
|
|
||||||
defaultValue
|
|
||||||
} = props
|
|
||||||
|
|
||||||
const [internalValue, setInternalValue] = useState(externalValue)
|
|
||||||
const [error, setError] = useState('')
|
|
||||||
|
|
||||||
const validate = useCallback(
|
|
||||||
(value: T) => {
|
|
||||||
const stringValue =
|
|
||||||
value instanceof Date ? value.toISOString() : value.toString().trim()
|
|
||||||
if (stringValue === '') {
|
|
||||||
setError(emptyFieldMessage)
|
|
||||||
} else if (!validateFn(value)) {
|
|
||||||
setError(errorMessage)
|
|
||||||
} else {
|
|
||||||
setError('')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[emptyFieldMessage, errorMessage, validateFn]
|
|
||||||
)
|
|
||||||
|
|
||||||
const handleChange = useCallback(
|
|
||||||
(newValue: T) => {
|
|
||||||
setInternalValue(newValue)
|
|
||||||
setExternalValue(newValue)
|
|
||||||
validate(newValue)
|
|
||||||
},
|
|
||||||
[setExternalValue, validate]
|
|
||||||
)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setInternalValue(externalValue)
|
|
||||||
validate(externalValue)
|
|
||||||
}, [externalValue, validate])
|
|
||||||
|
|
||||||
const reset = useCallback(() => {
|
|
||||||
setInternalValue(defaultValue)
|
|
||||||
setError('')
|
|
||||||
}, [defaultValue])
|
|
||||||
|
|
||||||
return { value: internalValue, error, handleChange, reset }
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
useValidation,
|
|
||||||
isBypass,
|
|
||||||
isValidEmail,
|
|
||||||
isValidPhoneNumber,
|
|
||||||
isValidContact,
|
|
||||||
isValidHostname
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import { PatchOperation } from './PatchOperation'
|
|
||||||
|
|
||||||
export interface PatchAction<T> {
|
|
||||||
op: PatchOperation // Enum for operation type
|
|
||||||
index?: number // Index for the operation (for arrays/lists)
|
|
||||||
value?: T // Value for the operation
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export enum PatchOperation {
|
|
||||||
Add,
|
|
||||||
Remove,
|
|
||||||
Replace,
|
|
||||||
None
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import { PatchAction } from '@/models/PatchAction'
|
|
||||||
import { PatchHostnameRequest } from './PatchHostnameRequest'
|
|
||||||
|
|
||||||
export interface PatchAccountRequest {
|
|
||||||
description?: PatchAction<string>
|
|
||||||
isDisabled?: PatchAction<boolean>
|
|
||||||
contacts?: PatchAction<string>[]
|
|
||||||
hostnames?: PatchHostnameRequest[]
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import { PatchAction } from '@/models/PatchAction'
|
|
||||||
|
|
||||||
export interface PatchHostnameRequest {
|
|
||||||
hostname?: PatchAction<string>
|
|
||||||
isDisabled?: PatchAction<boolean>
|
|
||||||
}
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
import { isValidContact, isValidHostname } from '@/hooks/useValidation'
|
|
||||||
|
|
||||||
export interface PostAccountRequest {
|
|
||||||
description: string
|
|
||||||
contacts: string[]
|
|
||||||
challengeType: string
|
|
||||||
hostnames: string[]
|
|
||||||
isStaging: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const validatePostAccountRequest = (
|
|
||||||
request: PostAccountRequest | null
|
|
||||||
): string[] => {
|
|
||||||
const errors: string[] = []
|
|
||||||
|
|
||||||
if (request === null) {
|
|
||||||
errors.push('Request is null')
|
|
||||||
return errors
|
|
||||||
}
|
|
||||||
|
|
||||||
// Validate description
|
|
||||||
if (request.description === '') {
|
|
||||||
errors.push('Description cannot be empty')
|
|
||||||
}
|
|
||||||
|
|
||||||
// Validate contacts
|
|
||||||
if (request.contacts.length === 0) {
|
|
||||||
errors.push('Contacts cannot be empty')
|
|
||||||
}
|
|
||||||
|
|
||||||
request.contacts.forEach((contact) => {
|
|
||||||
if (!isValidContact(contact)) {
|
|
||||||
errors.push(`Invalid contact: ${contact}`)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Validate challenge type
|
|
||||||
if (request.challengeType === '') {
|
|
||||||
errors.push('Challenge type cannot be empty')
|
|
||||||
}
|
|
||||||
|
|
||||||
// Validate hostnames
|
|
||||||
if (request.hostnames.length === 0) {
|
|
||||||
errors.push('Hostnames cannot be empty')
|
|
||||||
}
|
|
||||||
|
|
||||||
request.hostnames.forEach((hostname) => {
|
|
||||||
if (!isValidHostname(hostname)) {
|
|
||||||
errors.push(`Invalid hostname: ${hostname}`)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Return the array of errors
|
|
||||||
return errors
|
|
||||||
}
|
|
||||||
|
|
||||||
export { validatePostAccountRequest }
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import { CacheAccount } from '@/entities/CacheAccount'
|
|
||||||
import { GetHostnameResponse } from './GetHostnameResponse'
|
|
||||||
|
|
||||||
export interface GetAccountResponse {
|
|
||||||
accountId: string
|
|
||||||
isDisabled: boolean
|
|
||||||
description: string
|
|
||||||
contacts: string[]
|
|
||||||
challengeType?: string
|
|
||||||
hostnames?: GetHostnameResponse[]
|
|
||||||
isStaging: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const toCacheAccount = (account: GetAccountResponse): CacheAccount => {
|
|
||||||
return {
|
|
||||||
accountId: account.accountId,
|
|
||||||
isDisabled: account.isDisabled,
|
|
||||||
description: account.description,
|
|
||||||
contacts: account.contacts.map((contact) => contact),
|
|
||||||
challengeType: account.challengeType,
|
|
||||||
hostnames:
|
|
||||||
account.hostnames?.map((hostname) => ({
|
|
||||||
hostname: hostname.hostname,
|
|
||||||
expires: new Date(hostname.expires),
|
|
||||||
isUpcomingExpire: hostname.isUpcomingExpire,
|
|
||||||
isDisabled: hostname.isDisabled
|
|
||||||
})) ?? [],
|
|
||||||
isStaging: account.isStaging,
|
|
||||||
isEditMode: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { toCacheAccount }
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export interface GetHostnameResponse {
|
|
||||||
hostname: string
|
|
||||||
expires: string
|
|
||||||
isUpcomingExpire: boolean
|
|
||||||
isDisabled: boolean
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
/** @type {import('next').NextConfig} */
|
|
||||||
|
|
||||||
const nextConfig = {}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default nextConfig
|
|
||||||
6858
src/ClientApp/package-lock.json
generated
6858
src/ClientApp/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,38 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "my-nextjs-app",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"dev": "next dev",
|
|
||||||
"build": "next build",
|
|
||||||
"start": "next start",
|
|
||||||
"lint": "next lint"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@heroicons/react": "^2.2.0",
|
|
||||||
"@reduxjs/toolkit": "^2.9.2",
|
|
||||||
"autoprefixer": "^10.4.21",
|
|
||||||
"next": "16.0.1",
|
|
||||||
"react": "^19",
|
|
||||||
"react-dom": "^19",
|
|
||||||
"react-icons": "^5.5.0",
|
|
||||||
"react-redux": "^9.2.0",
|
|
||||||
"react-toastify": "^11.0.5",
|
|
||||||
"uuid": "^13.0.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@tailwindcss/postcss": "^4.1.16",
|
|
||||||
"@types/node": "^24",
|
|
||||||
"@types/react": "^19",
|
|
||||||
"@types/react-dom": "^19",
|
|
||||||
"@types/uuid": "^11.0.0",
|
|
||||||
"eslint": "^9",
|
|
||||||
"eslint-config-next": "16.0.1",
|
|
||||||
"eslint-config-prettier": "^10.1.8",
|
|
||||||
"eslint-plugin-prettier": "^5.5.4",
|
|
||||||
"postcss": "^8",
|
|
||||||
"prettier": "^3.6.2",
|
|
||||||
"tailwindcss": "^4.1.16",
|
|
||||||
"typescript": "^5"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,446 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { Dispatch, FormEvent, SetStateAction, useEffect, useState } from 'react'
|
|
||||||
import {
|
|
||||||
useValidation,
|
|
||||||
isValidEmail,
|
|
||||||
isValidHostname,
|
|
||||||
isBypass
|
|
||||||
} from '@/hooks/useValidation'
|
|
||||||
import {
|
|
||||||
CustomButton,
|
|
||||||
CustomCheckbox,
|
|
||||||
CustomEnumSelect,
|
|
||||||
CustomInput,
|
|
||||||
CustomRadioGroup
|
|
||||||
} from '@/controls'
|
|
||||||
import { CacheAccount, toPatchAccountRequest } from '@/entities/CacheAccount'
|
|
||||||
import { FaPlus, FaTrash } from 'react-icons/fa'
|
|
||||||
import { ChallengeTypes } from '@/entities/ChallengeTypes'
|
|
||||||
import { deepCopy } from '@/functions'
|
|
||||||
import { ApiRoutes, GetApiRoute } from '@/ApiRoutes'
|
|
||||||
import { httpService } from '@/services/HttpService'
|
|
||||||
import { PatchAccountRequest } from '@/models/letsEncryptServer/account/requests/PatchAccountRequest'
|
|
||||||
import { PatchOperation } from '@/models/PatchOperation'
|
|
||||||
import { useAppDispatch } from '@/redux/store'
|
|
||||||
import { showToast } from '@/redux/slices/toastSlice'
|
|
||||||
import {
|
|
||||||
GetAccountResponse,
|
|
||||||
toCacheAccount
|
|
||||||
} from '@/models/letsEncryptServer/account/responses/GetAccountResponse'
|
|
||||||
|
|
||||||
interface AccountEditProps {
|
|
||||||
account: CacheAccount
|
|
||||||
onCancel?: () => void
|
|
||||||
onDelete: (accountId: string) => void
|
|
||||||
onSubmit: (account: CacheAccount) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const AccountEdit: React.FC<AccountEditProps> = (props) => {
|
|
||||||
const { account, onCancel, onDelete, onSubmit } = props
|
|
||||||
|
|
||||||
const dispatch = useAppDispatch()
|
|
||||||
|
|
||||||
const [newAccount, setNewAccount] = useState<PatchAccountRequest>(
|
|
||||||
toPatchAccountRequest(account)
|
|
||||||
)
|
|
||||||
|
|
||||||
const [newContact, setNewContact] = useState('')
|
|
||||||
const [newHostname, setNewHostname] = useState('')
|
|
||||||
|
|
||||||
const {
|
|
||||||
value: description,
|
|
||||||
error: descriptionError,
|
|
||||||
handleChange: handleDescriptionChange
|
|
||||||
} = useValidation<string>({
|
|
||||||
defaultValue: '',
|
|
||||||
externalValue: newAccount.description?.value ?? '',
|
|
||||||
setExternalValue: (newDescription) => {
|
|
||||||
setNewAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.description = {
|
|
||||||
op:
|
|
||||||
newDescription !== account.description
|
|
||||||
? PatchOperation.Replace
|
|
||||||
: PatchOperation.None,
|
|
||||||
value: newDescription
|
|
||||||
}
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
},
|
|
||||||
validateFn: isBypass,
|
|
||||||
errorMessage: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const {
|
|
||||||
value: contact,
|
|
||||||
error: contactError,
|
|
||||||
handleChange: handleContactChange,
|
|
||||||
reset: resetContact
|
|
||||||
} = useValidation<string>({
|
|
||||||
defaultValue: '',
|
|
||||||
externalValue: newContact,
|
|
||||||
setExternalValue: setNewContact,
|
|
||||||
validateFn: isValidEmail,
|
|
||||||
errorMessage: 'Invalid email format.'
|
|
||||||
})
|
|
||||||
|
|
||||||
const {
|
|
||||||
value: hostname,
|
|
||||||
error: hostnameError,
|
|
||||||
handleChange: handleHostnameChange,
|
|
||||||
reset: resetHostname
|
|
||||||
} = useValidation<string>({
|
|
||||||
defaultValue: '',
|
|
||||||
externalValue: newHostname,
|
|
||||||
setExternalValue: setNewHostname,
|
|
||||||
validateFn: isValidHostname,
|
|
||||||
errorMessage: 'Invalid hostname format.'
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleIsDisabledChange = (value: boolean) => {
|
|
||||||
setNewAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.isDisabled = {
|
|
||||||
op:
|
|
||||||
value !== account.isDisabled
|
|
||||||
? PatchOperation.Replace
|
|
||||||
: PatchOperation.None,
|
|
||||||
value
|
|
||||||
}
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAddContact = () => {
|
|
||||||
if (newContact === '' || contactError) return
|
|
||||||
|
|
||||||
// Check if the contact already exists in the account
|
|
||||||
const contactExists = newAccount.contacts?.some(
|
|
||||||
(contact) => contact.value === newContact
|
|
||||||
)
|
|
||||||
|
|
||||||
if (contactExists) {
|
|
||||||
// Optionally, handle the duplicate contact case, e.g., show an error message
|
|
||||||
dispatch(
|
|
||||||
showToast({ message: 'Contact already exists.', type: 'warning' })
|
|
||||||
)
|
|
||||||
resetContact()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the contact does not exist, add it
|
|
||||||
setNewAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.contacts?.push({ op: PatchOperation.Add, value: newContact })
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
|
|
||||||
resetContact()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDeleteContact = (contact: string) => {
|
|
||||||
setNewAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.contacts = newAccount.contacts
|
|
||||||
?.map((c) => {
|
|
||||||
if (c.value === contact && c.op !== PatchOperation.Add)
|
|
||||||
c.op = PatchOperation.Remove
|
|
||||||
return c
|
|
||||||
})
|
|
||||||
.filter((c) => !(c.value === contact && c.op === PatchOperation.Add))
|
|
||||||
|
|
||||||
console.log(newAccount.contacts)
|
|
||||||
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAddHostname = () => {
|
|
||||||
if (newHostname === '' || hostnameError) return
|
|
||||||
|
|
||||||
// Check if the hostname already exists in the account
|
|
||||||
const hostnameExists = newAccount.hostnames?.some(
|
|
||||||
(hostname) => hostname.hostname?.value === newHostname
|
|
||||||
)
|
|
||||||
|
|
||||||
if (hostnameExists) {
|
|
||||||
// Optionally, handle the duplicate hostname case, e.g., show an error message
|
|
||||||
dispatch(
|
|
||||||
showToast({ message: 'Hostname already exists.', type: 'warning' })
|
|
||||||
)
|
|
||||||
resetHostname()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the hostname does not exist, add it
|
|
||||||
setNewAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.hostnames?.push({
|
|
||||||
hostname: { op: PatchOperation.Add, value: newHostname },
|
|
||||||
isDisabled: { op: PatchOperation.Add, value: false }
|
|
||||||
})
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
|
|
||||||
resetHostname()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleHostnameDisabledChange = (hostname: string, value: boolean) => {
|
|
||||||
setNewAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
const targetHostname = newAccount.hostnames?.find(
|
|
||||||
(h) => h.hostname?.value === hostname
|
|
||||||
)
|
|
||||||
if (targetHostname) {
|
|
||||||
targetHostname.isDisabled = {
|
|
||||||
op:
|
|
||||||
value !== targetHostname.isDisabled?.value
|
|
||||||
? PatchOperation.Replace
|
|
||||||
: PatchOperation.None,
|
|
||||||
value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDeleteHostname = (hostname: string) => {
|
|
||||||
setNewAccount((prev) => {
|
|
||||||
const newAccount = deepCopy(prev)
|
|
||||||
newAccount.hostnames = newAccount.hostnames
|
|
||||||
?.map((h) => {
|
|
||||||
if (
|
|
||||||
h.hostname?.value === hostname &&
|
|
||||||
h.hostname?.op !== PatchOperation.Add
|
|
||||||
)
|
|
||||||
h.hostname.op = PatchOperation.Remove
|
|
||||||
return h
|
|
||||||
})
|
|
||||||
.filter(
|
|
||||||
(h) =>
|
|
||||||
!(
|
|
||||||
h.hostname?.value === hostname &&
|
|
||||||
h.hostname?.op === PatchOperation.Add
|
|
||||||
)
|
|
||||||
)
|
|
||||||
return newAccount
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCancel = () => {
|
|
||||||
onCancel?.()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
if (!newAccount) return
|
|
||||||
|
|
||||||
httpService
|
|
||||||
.patch<
|
|
||||||
PatchAccountRequest,
|
|
||||||
GetAccountResponse
|
|
||||||
>(GetApiRoute(ApiRoutes.ACCOUNT_ID, account.accountId), newAccount)
|
|
||||||
.then((response) => {
|
|
||||||
if (response.isSuccess && response.data) {
|
|
||||||
onSubmit?.(toCacheAccount(response.data))
|
|
||||||
} else {
|
|
||||||
// Optionally, handle the error case, e.g., show an error message
|
|
||||||
dispatch(
|
|
||||||
showToast({ message: 'Failed to update account.', type: 'error' })
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDelete = (accountId: string) => {
|
|
||||||
httpService
|
|
||||||
.delete(GetApiRoute(ApiRoutes.ACCOUNT_ID, accountId))
|
|
||||||
.then((response) => {
|
|
||||||
if (response.isSuccess) {
|
|
||||||
onDelete?.(accountId)
|
|
||||||
} else {
|
|
||||||
// Optionally, handle the error case, e.g., show an error message
|
|
||||||
dispatch(
|
|
||||||
showToast({ message: 'Failed to detele account.', type: 'error' })
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<div className="mb-4">
|
|
||||||
<CustomInput
|
|
||||||
value={description}
|
|
||||||
onChange={handleDescriptionChange}
|
|
||||||
placeholder="Add new description"
|
|
||||||
type="text"
|
|
||||||
error={descriptionError}
|
|
||||||
title="Description"
|
|
||||||
inputClassName="border p-2 rounded w-full"
|
|
||||||
errorClassName="text-red-500 text-sm mt-1"
|
|
||||||
className="mr-2 w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<CustomCheckbox
|
|
||||||
checked={newAccount.isDisabled?.value ?? false}
|
|
||||||
label="Disabled"
|
|
||||||
onChange={handleIsDisabledChange}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-xl font-medium mb-2">Contacts:</h3>
|
|
||||||
<ul className="list-disc list-inside pl-4 mb-2">
|
|
||||||
{newAccount.contacts
|
|
||||||
?.filter((contact) => contact.op !== PatchOperation.Remove)
|
|
||||||
.map((contact) => (
|
|
||||||
<li key={contact.value} className="text-gray-700 mb-2">
|
|
||||||
<div className="inline-flex">
|
|
||||||
{contact.value}
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleDeleteContact(contact.value ?? '')}
|
|
||||||
className="bg-red-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
<FaTrash />
|
|
||||||
</CustomButton>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<div className="flex items-center mb-4">
|
|
||||||
<CustomInput
|
|
||||||
value={contact}
|
|
||||||
onChange={handleContactChange}
|
|
||||||
placeholder="Add new contact"
|
|
||||||
type="email"
|
|
||||||
error={contactError}
|
|
||||||
title="New Contact"
|
|
||||||
inputClassName="border p-2 rounded w-full"
|
|
||||||
errorClassName="text-red-500 text-sm mt-1"
|
|
||||||
className="mr-2 w-full"
|
|
||||||
/>
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={handleAddContact}
|
|
||||||
className="bg-green-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
<FaPlus />
|
|
||||||
</CustomButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<CustomEnumSelect
|
|
||||||
title="Challenge Type"
|
|
||||||
enumType={ChallengeTypes}
|
|
||||||
selectedValue={account.challengeType}
|
|
||||||
className="mr-2 w-full"
|
|
||||||
disabled={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xl font-medium mb-2">Hostnames:</h3>
|
|
||||||
<ul className="list-disc list-inside pl-4 mb-2">
|
|
||||||
{newAccount.hostnames
|
|
||||||
?.filter(
|
|
||||||
(hostname) => hostname.hostname?.op !== PatchOperation.Remove
|
|
||||||
)
|
|
||||||
.map((hostname) => (
|
|
||||||
<li key={hostname.hostname?.value} className="text-gray-700 mb-2">
|
|
||||||
<div className="inline-flex items-center">
|
|
||||||
{hostname.hostname?.value} -{' '}
|
|
||||||
<CustomCheckbox
|
|
||||||
className="ml-2"
|
|
||||||
checked={hostname.isDisabled?.value ?? false}
|
|
||||||
label="Disabled"
|
|
||||||
onChange={(value) =>
|
|
||||||
handleHostnameDisabledChange(
|
|
||||||
hostname.hostname?.value ?? '',
|
|
||||||
value
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={() =>
|
|
||||||
handleDeleteHostname(hostname.hostname?.value ?? '')
|
|
||||||
}
|
|
||||||
className="bg-red-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
<FaTrash />
|
|
||||||
</CustomButton>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<CustomInput
|
|
||||||
value={hostname}
|
|
||||||
onChange={handleHostnameChange}
|
|
||||||
placeholder="Add new hostname"
|
|
||||||
type="text"
|
|
||||||
error={hostnameError}
|
|
||||||
title="New Hostname"
|
|
||||||
inputClassName="border p-2 rounded w-full"
|
|
||||||
errorClassName="text-red-500 text-sm mt-1"
|
|
||||||
className="mr-2 w-full"
|
|
||||||
/>
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={handleAddHostname}
|
|
||||||
className="bg-green-500 text-white p-2 rounded ml-2"
|
|
||||||
>
|
|
||||||
<FaPlus />
|
|
||||||
</CustomButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-4">
|
|
||||||
<CustomRadioGroup
|
|
||||||
options={[
|
|
||||||
{ value: 'staging', label: 'Staging' },
|
|
||||||
{ value: 'production', label: 'Production' }
|
|
||||||
]}
|
|
||||||
initialValue={account.isStaging ? 'staging' : 'production'}
|
|
||||||
title="LetsEncrypt Environment"
|
|
||||||
className="mr-2 w-full"
|
|
||||||
radioClassName=""
|
|
||||||
errorClassName="text-red-500 text-sm mt-1"
|
|
||||||
disabled={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between mt-4">
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleDelete(account.accountId)}
|
|
||||||
className="bg-red-500 text-white p-2 rounded"
|
|
||||||
>
|
|
||||||
<FaTrash />
|
|
||||||
</CustomButton>
|
|
||||||
<CustomButton
|
|
||||||
type="button"
|
|
||||||
onClick={handleCancel}
|
|
||||||
className="bg-yellow-500 text-white p-2 rounded"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</CustomButton>
|
|
||||||
<CustomButton
|
|
||||||
type="submit"
|
|
||||||
className="bg-green-500 text-white p-2 rounded"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</CustomButton>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { AccountEdit }
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
/** @type {import('postcss-load-config').Config} */
|
|
||||||
const config = {
|
|
||||||
plugins: {
|
|
||||||
'@tailwindcss/postcss': {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 629 B |
@ -1,31 +0,0 @@
|
|||||||
// loaderSlice.ts
|
|
||||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
|
|
||||||
|
|
||||||
interface LoaderState {
|
|
||||||
activeRequests: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialState: LoaderState = {
|
|
||||||
activeRequests: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const loaderSlice = createSlice({
|
|
||||||
name: 'loader',
|
|
||||||
initialState,
|
|
||||||
reducers: {
|
|
||||||
increment: (state) => {
|
|
||||||
state.activeRequests += 1
|
|
||||||
},
|
|
||||||
decrement: (state) => {
|
|
||||||
if (state.activeRequests > 0) {
|
|
||||||
state.activeRequests -= 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
reset: (state) => {
|
|
||||||
state.activeRequests = 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export const { increment, decrement, reset } = loaderSlice.actions
|
|
||||||
export default loaderSlice.reducer
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
// store/toastSlice.ts
|
|
||||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
|
|
||||||
import { v4 as uuidv4 } from 'uuid' // Assuming UUID is used for generating unique IDs
|
|
||||||
|
|
||||||
interface ToastMessage {
|
|
||||||
id: string // Add an id field
|
|
||||||
message: string
|
|
||||||
type: 'success' | 'error' | 'info' | 'warning'
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ToastState {
|
|
||||||
messages: ToastMessage[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialState: ToastState = {
|
|
||||||
messages: []
|
|
||||||
}
|
|
||||||
|
|
||||||
const toastSlice = createSlice({
|
|
||||||
name: 'toast',
|
|
||||||
initialState,
|
|
||||||
reducers: {
|
|
||||||
showToast: (state, action: PayloadAction<Omit<ToastMessage, 'id'>>) => {
|
|
||||||
// Generate a unique ID for each toast message
|
|
||||||
const id = uuidv4()
|
|
||||||
const newMessage = { ...action.payload, id }
|
|
||||||
state.messages.push(newMessage)
|
|
||||||
},
|
|
||||||
clearToast: (state) => {
|
|
||||||
state.messages = []
|
|
||||||
},
|
|
||||||
removeToast: (state, action: PayloadAction<string>) => {
|
|
||||||
// Remove a specific toast message by ID
|
|
||||||
state.messages = state.messages.filter(
|
|
||||||
(message) => message.id !== action.payload
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export const { showToast, clearToast, removeToast } = toastSlice.actions
|
|
||||||
export default toastSlice.reducer
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { configureStore } from '@reduxjs/toolkit'
|
|
||||||
import {
|
|
||||||
TypedUseSelectorHook,
|
|
||||||
useDispatch,
|
|
||||||
useSelector,
|
|
||||||
useStore
|
|
||||||
} from 'react-redux'
|
|
||||||
import loaderReducer from '@/redux/slices/loaderSlice'
|
|
||||||
import toastReducer from '@/redux/slices/toastSlice'
|
|
||||||
|
|
||||||
export const store = configureStore({
|
|
||||||
reducer: {
|
|
||||||
loader: loaderReducer,
|
|
||||||
toast: toastReducer
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export type RootState = ReturnType<typeof store.getState>
|
|
||||||
export type AppDispatch = typeof store.dispatch
|
|
||||||
export type AppStore = typeof store
|
|
||||||
|
|
||||||
// Use throughout your app instead of plain `useDispatch` and `useSelector`
|
|
||||||
export const useAppDispatch = () => useDispatch<AppDispatch>()
|
|
||||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
|
|
||||||
export const useAppStore = () => useStore<AppStore>()
|
|
||||||
@ -1,304 +0,0 @@
|
|||||||
import { store } from '@/redux/store'
|
|
||||||
import { increment, decrement } from '@/redux/slices/loaderSlice'
|
|
||||||
import { showToast } from '@/redux/slices/toastSlice'
|
|
||||||
import { PatchOperation } from '@/models/PatchOperation'
|
|
||||||
|
|
||||||
interface HttpResponse<T> {
|
|
||||||
data: T | null
|
|
||||||
status: number
|
|
||||||
isSuccess: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RequestInterceptor {
|
|
||||||
(req: XMLHttpRequest): void
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ResponseInterceptor<T> {
|
|
||||||
(response: T | null, error: ProblemDetails | null): T | void
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ProblemDetails {
|
|
||||||
Title: string
|
|
||||||
Detail: string | null
|
|
||||||
Status: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface HttpServiceCallbacks {
|
|
||||||
onIncrement?: () => void
|
|
||||||
onDecrement?: () => void
|
|
||||||
onShowToast?: (message: string, type: 'info' | 'error') => void
|
|
||||||
}
|
|
||||||
|
|
||||||
class HttpService {
|
|
||||||
private requestInterceptors: RequestInterceptor[] = []
|
|
||||||
private responseInterceptors: Array<ResponseInterceptor<any>> = []
|
|
||||||
private callbacks: HttpServiceCallbacks
|
|
||||||
|
|
||||||
constructor(callbacks: HttpServiceCallbacks) {
|
|
||||||
this.callbacks = callbacks
|
|
||||||
}
|
|
||||||
|
|
||||||
private invokeIncrement(): void {
|
|
||||||
this.callbacks.onIncrement?.()
|
|
||||||
}
|
|
||||||
|
|
||||||
private invokeDecrement(): void {
|
|
||||||
this.callbacks.onDecrement?.()
|
|
||||||
}
|
|
||||||
|
|
||||||
private invokeShowToast(message: string, type: 'info' | 'error'): void {
|
|
||||||
this.callbacks.onShowToast?.(message, type)
|
|
||||||
}
|
|
||||||
|
|
||||||
private async request<TResponse>(
|
|
||||||
method: string,
|
|
||||||
url: string,
|
|
||||||
data?: any
|
|
||||||
): Promise<HttpResponse<TResponse>> {
|
|
||||||
const xhr = new XMLHttpRequest()
|
|
||||||
xhr.open(method, url)
|
|
||||||
|
|
||||||
this.handleRequestInterceptors(xhr)
|
|
||||||
|
|
||||||
if (data && typeof data !== 'string') {
|
|
||||||
xhr.setRequestHeader('Content-Type', 'application/json')
|
|
||||||
}
|
|
||||||
|
|
||||||
this.invokeIncrement()
|
|
||||||
|
|
||||||
return new Promise<HttpResponse<TResponse>>((resolve) => {
|
|
||||||
xhr.onload = () => this.handleLoad<TResponse>(xhr, resolve)
|
|
||||||
xhr.onerror = () => this.handleNetworkError(resolve)
|
|
||||||
xhr.send(data ? JSON.stringify(data) : null)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private cleanObject = (obj: any): any => {
|
|
||||||
if (Array.isArray(obj)) {
|
|
||||||
const cleanedArray = obj
|
|
||||||
.map(this.cleanObject)
|
|
||||||
.filter((item) => item !== null && item !== undefined)
|
|
||||||
return cleanedArray.length > 0 ? cleanedArray : null
|
|
||||||
} else if (typeof obj === 'object' && obj !== null) {
|
|
||||||
if (obj.op !== undefined && obj.op === PatchOperation.None) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const cleanedObject: any = {}
|
|
||||||
Object.keys(obj).forEach((key) => {
|
|
||||||
const cleanedValue = this.cleanObject(obj[key])
|
|
||||||
if (cleanedValue !== null) {
|
|
||||||
cleanedObject[key] = cleanedValue
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return Object.keys(cleanedObject).length > 0 ? cleanedObject : null
|
|
||||||
}
|
|
||||||
return obj
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleRequestInterceptors(xhr: XMLHttpRequest): void {
|
|
||||||
this.requestInterceptors.forEach((interceptor) => {
|
|
||||||
try {
|
|
||||||
interceptor(xhr)
|
|
||||||
} catch (error) {
|
|
||||||
const problemDetails = this.createProblemDetails(
|
|
||||||
'Request Interceptor Error',
|
|
||||||
error,
|
|
||||||
0
|
|
||||||
)
|
|
||||||
this.showProblemDetails(problemDetails)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleResponseInterceptors<TResponse>(
|
|
||||||
response: TResponse | null,
|
|
||||||
error: ProblemDetails | null
|
|
||||||
): TResponse | null {
|
|
||||||
this.responseInterceptors.forEach((interceptor) => {
|
|
||||||
try {
|
|
||||||
interceptor(response, error)
|
|
||||||
} catch (e) {
|
|
||||||
const problemDetails = this.createProblemDetails(
|
|
||||||
'Response Interceptor Error',
|
|
||||||
e,
|
|
||||||
0
|
|
||||||
)
|
|
||||||
this.showProblemDetails(problemDetails)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleLoad<TResponse>(
|
|
||||||
xhr: XMLHttpRequest,
|
|
||||||
resolve: (value: HttpResponse<TResponse>) => void
|
|
||||||
): void {
|
|
||||||
this.invokeDecrement()
|
|
||||||
if (xhr.status >= 200 && xhr.status < 300) {
|
|
||||||
this.handleSuccessfulResponse<TResponse>(xhr, resolve)
|
|
||||||
} else {
|
|
||||||
this.handleErrorResponse(xhr, resolve)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleSuccessfulResponse<TResponse>(
|
|
||||||
xhr: XMLHttpRequest,
|
|
||||||
resolve: (value: HttpResponse<TResponse>) => void
|
|
||||||
): void {
|
|
||||||
try {
|
|
||||||
if (xhr.response) {
|
|
||||||
const response = JSON.parse(xhr.response)
|
|
||||||
resolve({
|
|
||||||
data: this.handleResponseInterceptors(response, null) as TResponse,
|
|
||||||
status: xhr.status,
|
|
||||||
isSuccess: true
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
resolve({
|
|
||||||
data: null,
|
|
||||||
status: xhr.status,
|
|
||||||
isSuccess: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
const problemDetails = this.createProblemDetails(
|
|
||||||
'Response Parse Error',
|
|
||||||
error,
|
|
||||||
xhr.status
|
|
||||||
)
|
|
||||||
this.showProblemDetails(problemDetails)
|
|
||||||
resolve({
|
|
||||||
data: null,
|
|
||||||
status: xhr.status,
|
|
||||||
isSuccess: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleErrorResponse<TResponse>(
|
|
||||||
xhr: XMLHttpRequest,
|
|
||||||
resolve: (value: HttpResponse<TResponse>) => void
|
|
||||||
): void {
|
|
||||||
const problemDetails = this.createProblemDetails(
|
|
||||||
xhr.statusText,
|
|
||||||
xhr.responseText,
|
|
||||||
xhr.status
|
|
||||||
)
|
|
||||||
this.showProblemDetails(problemDetails)
|
|
||||||
resolve({
|
|
||||||
data: this.handleResponseInterceptors(null, problemDetails),
|
|
||||||
status: xhr.status,
|
|
||||||
isSuccess: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleNetworkError<TResponse>(
|
|
||||||
resolve: (value: HttpResponse<TResponse>) => void
|
|
||||||
): void {
|
|
||||||
const problemDetails = this.createProblemDetails('Network Error', null, 0)
|
|
||||||
this.showProblemDetails(problemDetails)
|
|
||||||
resolve({
|
|
||||||
data: this.handleResponseInterceptors(null, problemDetails),
|
|
||||||
status: 0,
|
|
||||||
isSuccess: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
private createProblemDetails(
|
|
||||||
title: string,
|
|
||||||
detail: any,
|
|
||||||
status: number
|
|
||||||
): ProblemDetails {
|
|
||||||
return {
|
|
||||||
Title: title,
|
|
||||||
Detail:
|
|
||||||
detail instanceof Error ? detail.message : JSON.parse(detail)?.detail,
|
|
||||||
Status: status
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private showProblemDetails(problemDetails: ProblemDetails): void {
|
|
||||||
if (problemDetails.Detail) {
|
|
||||||
const errorMessages = problemDetails.Detail.split(',')
|
|
||||||
errorMessages.forEach((message) => {
|
|
||||||
this.invokeShowToast(message.trim(), 'error')
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.invokeShowToast('Unknown error', 'error')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public async get<TResponse>(url: string): Promise<HttpResponse<TResponse>> {
|
|
||||||
return await this.request<TResponse>('GET', url)
|
|
||||||
}
|
|
||||||
|
|
||||||
public async post<TRequest, TResponse>(
|
|
||||||
url: string,
|
|
||||||
data: TRequest
|
|
||||||
): Promise<HttpResponse<TResponse>> {
|
|
||||||
return await this.request<TResponse>('POST', url, data)
|
|
||||||
}
|
|
||||||
|
|
||||||
public async put<TRequest, TResponse>(
|
|
||||||
url: string,
|
|
||||||
data: TRequest
|
|
||||||
): Promise<HttpResponse<TResponse>> {
|
|
||||||
return await this.request<TResponse>('PUT', url, data)
|
|
||||||
}
|
|
||||||
|
|
||||||
public async patch<TRequest, TResponse>(
|
|
||||||
url: string,
|
|
||||||
data: TRequest
|
|
||||||
): Promise<HttpResponse<TResponse>> {
|
|
||||||
// Clean the data before sending the patch request
|
|
||||||
const cleanedData = this.cleanObject(data)
|
|
||||||
|
|
||||||
console.log('Cleaned patch data:', cleanedData)
|
|
||||||
return await this.request<TResponse>('PATCH', url, cleanedData)
|
|
||||||
}
|
|
||||||
|
|
||||||
public async delete(url: string): Promise<HttpResponse<null>> {
|
|
||||||
return await this.request<null>('DELETE', url)
|
|
||||||
}
|
|
||||||
|
|
||||||
public addRequestInterceptor(interceptor: RequestInterceptor): void {
|
|
||||||
this.requestInterceptors.push(interceptor)
|
|
||||||
}
|
|
||||||
|
|
||||||
public addResponseInterceptor<TResponse>(
|
|
||||||
interceptor: ResponseInterceptor<TResponse>
|
|
||||||
): void {
|
|
||||||
this.responseInterceptors.push(interceptor)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Instance of HttpService
|
|
||||||
const httpService = new HttpService({
|
|
||||||
onIncrement: () => store.dispatch(increment()),
|
|
||||||
onDecrement: () => store.dispatch(decrement()),
|
|
||||||
onShowToast: (message: string, type: 'info' | 'error') =>
|
|
||||||
store.dispatch(showToast({ message, type }))
|
|
||||||
})
|
|
||||||
|
|
||||||
// Add loader state handling via interceptors
|
|
||||||
httpService.addRequestInterceptor((xhr) => {
|
|
||||||
// Additional request logic can be added here
|
|
||||||
})
|
|
||||||
|
|
||||||
httpService.addResponseInterceptor((response, error) => {
|
|
||||||
// Additional response logic can be added here
|
|
||||||
return response
|
|
||||||
})
|
|
||||||
|
|
||||||
export { httpService }
|
|
||||||
|
|
||||||
// Example usage of the httpService
|
|
||||||
// async function fetchData() {
|
|
||||||
// const response = await httpService.get<any>('/api/data');
|
|
||||||
// if (response.isSuccess) {
|
|
||||||
// console.log('Data received:', response.data);
|
|
||||||
// } else {
|
|
||||||
// console.error('Failed to fetch data, status code:', response.status);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
import type { Config } from "tailwindcss";
|
|
||||||
|
|
||||||
const config: Config = {
|
|
||||||
content: [
|
|
||||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
|
||||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
||||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
backgroundImage: {
|
|
||||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
|
||||||
"gradient-conic":
|
|
||||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
};
|
|
||||||
export default config;
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"lib": [
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"esnext"
|
|
||||||
],
|
|
||||||
"allowJs": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"strict": true,
|
|
||||||
"noEmit": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"module": "esnext",
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
"incremental": true,
|
|
||||||
"plugins": [
|
|
||||||
{
|
|
||||||
"name": "next"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"paths": {
|
|
||||||
"@/*": [
|
|
||||||
"./*"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"target": "ES2017"
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"next-env.d.ts",
|
|
||||||
"**/*.ts",
|
|
||||||
"**/*.tsx",
|
|
||||||
".next/types/**/*.ts",
|
|
||||||
".next/dev/types/**/*.ts"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"node_modules"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user