mirror of
https://github.com/MAKS-IT-COM/maksit-certs-ui.git
synced 2025-12-30 19:50:07 +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