From 618afe2fa5b004cc2a57dde81dce370e46dddd06 Mon Sep 17 00:00:00 2001 From: Kayra Date: Wed, 15 May 2024 18:09:49 +0300 Subject: [PATCH] frontend basic --- ui/package-lock.json | 125 ++++++++++++++++-- ui/package.json | 6 +- ui/src/app/certificate_requests/page.test.tsx | 0 ui/src/app/certificate_requests/page.tsx | 10 ++ ui/src/app/certificate_requests/table.tsx | 49 +++++++ ui/src/app/globals.scss | 93 +++++++++++++ ui/src/app/layout.tsx | 9 +- ui/src/app/nav.tsx | 113 ++++++++++++++++ ui/src/app/page.tsx | 6 +- 9 files changed, 395 insertions(+), 16 deletions(-) create mode 100644 ui/src/app/certificate_requests/page.test.tsx create mode 100644 ui/src/app/certificate_requests/page.tsx create mode 100644 ui/src/app/certificate_requests/table.tsx create mode 100644 ui/src/app/globals.scss create mode 100644 ui/src/app/nav.tsx diff --git a/ui/package-lock.json b/ui/package-lock.json index d66e34d..bff39a0 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -8,7 +8,9 @@ "dependencies": { "next": "14.2.3", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "sass": "^1.77.1", + "vanilla-framework": "^4.11.0" }, "devDependencies": { "@testing-library/react": "^15.0.4", @@ -1785,6 +1787,18 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -2028,6 +2042,17 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2042,7 +2067,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -2195,6 +2219,40 @@ "node": "*" } }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -3254,7 +3312,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -3347,7 +3404,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -3746,6 +3802,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz", + "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -3844,6 +3905,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-boolean-object": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", @@ -3918,7 +3990,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3963,7 +4034,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -3999,7 +4069,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, "engines": { "node": ">=0.12.0" } @@ -4642,6 +4711,14 @@ "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "dev": true }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/npm-run-path": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz", @@ -4986,7 +5063,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -5172,6 +5248,17 @@ "node": ">=0.10.0" } }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz", @@ -5393,6 +5480,22 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sass": { + "version": "1.77.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.1.tgz", + "integrity": "sha512-OMEyfirt9XEfyvocduUIOlUSkWOXS/LAt6oblR/ISXCTukyavjex+zQNm51pPCOiFKY1QpWvEH1EeCkgyV3I6w==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/saxes": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", @@ -5868,7 +5971,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "dependencies": { "is-number": "^7.0.0" }, @@ -6148,6 +6250,11 @@ "requires-port": "^1.0.0" } }, + "node_modules/vanilla-framework": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/vanilla-framework/-/vanilla-framework-4.11.0.tgz", + "integrity": "sha512-S0AAHNVphn3YJ7BQhyHmvKhrqiZcncQBPedwMan18uavB4VfAT8UN0dwgrHQvY/ypUuJiq/GPA0Xe1xcd+E7dg==" + }, "node_modules/vite": { "version": "5.2.11", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz", diff --git a/ui/package.json b/ui/package.json index 337ba5d..9b745f8 100644 --- a/ui/package.json +++ b/ui/package.json @@ -10,9 +10,11 @@ "test": "vitest run" }, "dependencies": { + "next": "14.2.3", "react": "^18", "react-dom": "^18", - "next": "14.2.3" + "sass": "^1.77.1", + "vanilla-framework": "^4.11.0" }, "devDependencies": { "@testing-library/react": "^15.0.4", @@ -29,4 +31,4 @@ "overrides": { "rollup": "npm:@rollup/wasm-node@*" } -} \ No newline at end of file +} diff --git a/ui/src/app/certificate_requests/page.test.tsx b/ui/src/app/certificate_requests/page.test.tsx new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/app/certificate_requests/page.tsx b/ui/src/app/certificate_requests/page.tsx new file mode 100644 index 0000000..c356950 --- /dev/null +++ b/ui/src/app/certificate_requests/page.tsx @@ -0,0 +1,10 @@ +"use client" + +import { useState } from "react" +import { CertificateRequestsTable } from "./table" + +export default function CertificateRequests() { + return ( + + ) +} \ No newline at end of file diff --git a/ui/src/app/certificate_requests/table.tsx b/ui/src/app/certificate_requests/table.tsx new file mode 100644 index 0000000..3905043 --- /dev/null +++ b/ui/src/app/certificate_requests/table.tsx @@ -0,0 +1,49 @@ +import { Dispatch, SetStateAction, useContext } from "react" +import { AsideContext } from "../nav" + + +export function CertificateRequestsTable() { + const { isOpen: isAsideOpen, setIsOpen: setAsideIsOpen } = useContext(AsideContext) + return ( +
+
+

Certificate Requests

+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + +
IDDetailsCSR StatusSign/RejectDelete
1 +

CN: example.com

+

SAN: example.com, 127.0.0.1, 1.2.3.4.5.56

+ 		outstanding + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/ui/src/app/globals.scss b/ui/src/app/globals.scss new file mode 100644 index 0000000..4d70b51 --- /dev/null +++ b/ui/src/app/globals.scss @@ -0,0 +1,93 @@ +// Import the framework +@import 'node_modules/vanilla-framework'; + +// Include all of Vanilla Framework +@include vanilla; + +body { + margin: 0 !important; + /* override codepen embedded examples styles */ +} + +/* application layout demo styles */ +.l-application .u-fixed-width { + /* temporary, as I don't want to change the global setting */ + max-width: 95rem; +} + +.demo-status { + background-color: #f7f7f7; + /* $colors--light-theme--background-alt; */ + padding-bottom: 0.75rem; + /* $spv--medium; */ + padding-top: 0.75rem; +} + +/* demo JAAS CSS */ +.u-flex { + display: flex; +} + +.u-flex--block { + flex: 1 1 auto; +} + +.has-icon [class*='p-icon']:first-child { + margin-right: 0.25rem; + margin-top: 0.25rem; +} + +.status-icon { + display: inline-block; + padding-left: 1.5rem; + position: relative; +} + +.status-icon::before { + content: '\00B7'; + font-size: 5rem; + left: 0; + position: absolute; + top: -6px; +} + +.status-icon.is-blocked::before, +.status-icon.is-down::before, +.status-icon.is-error::before, +.status-icon.is-provisioning::before { + color: #c7162b; +} + +.status-icon.is-alert::before, +.status-icon.is-attention::before, +.status-icon.is-maintenance::before, +.status-icon.is-pending::before, +.status-icon.is-stopped::before, +.status-icon.is-waiting::before { + color: #f99b11; +} + +.status-icon.is-active::before, +.status-icon.is-running::before, +.status-icon.is-started::before { + color: #cdcdcd; +} + +.status-icon.is-unknown::before { + border: 1px solid #cdcdcd; + border-radius: 50%; + content: ''; + height: 0.6rem; + left: 0.35rem; + top: 0.5rem; + width: 0.6rem; +} + +table thead::after { + content: none; +} + +td, +th { + min-width: 150px; +} \ No newline at end of file diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx index 86903b9..9a909cb 100644 --- a/ui/src/app/layout.tsx +++ b/ui/src/app/layout.tsx @@ -1,4 +1,7 @@ import type { Metadata } from "next"; +import './globals.scss' +import Navigation from "@/app/nav"; + export const metadata: Metadata = { title: "GoCert", @@ -12,7 +15,11 @@ export default function RootLayout({ }>) { return ( - {children} + + + {children} + + ); } diff --git a/ui/src/app/nav.tsx b/ui/src/app/nav.tsx new file mode 100644 index 0000000..0e52232 --- /dev/null +++ b/ui/src/app/nav.tsx @@ -0,0 +1,113 @@ +"use client" + +import { SetStateAction, Dispatch, useState, createContext } from "react" + +type AsideContextType = { + isOpen: boolean, + setIsOpen: Dispatch> +} +export const AsideContext = createContext({ isOpen: false, setIsOpen: () => { } }); + +export function Aside({ isOpen, setIsOpen }: { isOpen: boolean, setIsOpen: Dispatch> }) { + return ( + + ) +} + +export function SideBar({ activePage, sidebarVisible, setSidebarVisible }: { activePage: string, sidebarVisible: boolean, setSidebarVisible: Dispatch> }) { + return ( +
+
+
+
+ +
+ + +
+
+ +
+
+
+ ) +} + +export function TopBar({ setSidebarVisible }: { setSidebarVisible: Dispatch> }) { + return ( +
+
+
+ +
+ { setSidebarVisible(true) }}>Menu +
+
+
+
+ ) +} + +export function Logo() { + return ( + + + GoCert + + ) +} +export default function Navigation({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + const [sidebarVisible, setSidebarVisible] = useState(true) + const [asideOpen, setAsideOpen] = useState(false) + return ( +
+ + +
+ + {children} + +
+
+ ) +} \ No newline at end of file diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx index c29c5a8..bedc1a7 100644 --- a/ui/src/app/page.tsx +++ b/ui/src/app/page.tsx @@ -1,7 +1,5 @@ -export default function Home() { +export default function Main() { return ( -
-

Hello from the Frontend

-
+
Home
); }