From 4ccc7b236a09978cbb26e06830ccd63b52b1bd65 Mon Sep 17 00:00:00 2001 From: kayra1 Date: Wed, 16 Oct 2024 13:36:02 +0300 Subject: [PATCH] progress --- Makefile | 1 + app/(nms)/layout.tsx | 4 ++ app/(nms)/login/page.tsx | 93 +++++++++++++++++++++++++++++++++++++++ app/(nms)/users/page.tsx | 2 +- app/layout.tsx | 1 + app/page.tsx | 6 +-- components/Navigation.tsx | 21 +++++++-- components/types.tsx | 4 ++ utils/auth.tsx | 2 - utils/queries.ts | 22 +++++++++ 10 files changed, 145 insertions(+), 11 deletions(-) create mode 100644 app/(nms)/login/page.tsx diff --git a/Makefile b/Makefile index 1f691fb..b8fb603 100644 --- a/Makefile +++ b/Makefile @@ -68,6 +68,7 @@ $(BUILD_FOLDER)/fetch-repo: $(BUILD_FOLDER)/$(NMS_ARTIFACT_NAME): $(NMS_FILES) @npm install && npm run build + rm -rf $@ mv out $@ $(ARTIFACT_FOLDER)/$(WEBCONSOLE_ARTIFACT_NAME): build/fetch-repo $(WEBCONSOLE_FILES) build/$(NMS_ARTIFACT_NAME) diff --git a/app/(nms)/layout.tsx b/app/(nms)/layout.tsx index 1bed903..d5aa989 100644 --- a/app/(nms)/layout.tsx +++ b/app/(nms)/layout.tsx @@ -8,6 +8,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import Navigation from "@/components/Navigation"; import PageContent from "@/components/PageContent"; import Loader from "@/components/Loader"; +import { useAuth } from "@/utils/auth"; +import { useRouter } from "next/navigation"; const inter = Inter({ subsets: ["latin"] }); const queryClient = new QueryClient(); @@ -21,6 +23,8 @@ export default function RootLayout({ const [backendAvailable, setBackendAvailable] = useState( null, ); + const router = useRouter() + const auth = useAuth() useEffect(() => { const fetchData = async () => { diff --git a/app/(nms)/login/page.tsx b/app/(nms)/login/page.tsx new file mode 100644 index 0000000..b82dbc4 --- /dev/null +++ b/app/(nms)/login/page.tsx @@ -0,0 +1,93 @@ +"use client" + +import { getStatus, login } from "@/utils/queries" +import { useMutation, useQuery } from "@tanstack/react-query" +import { useState, ChangeEvent } from "react" +import { useCookies } from "react-cookie" +import { useRouter } from "next/navigation" +import { useAuth } from "@/utils/auth" +import { statusResponse } from "@/components/types" +import { Input, PasswordToggle, Button, Form, Notification, LoginPageLayout } from "@canonical/react-components"; + + +export default function LoginPage() { + const router = useRouter() + const auth = useAuth() + const [cookies, setCookie, removeCookie] = useCookies(['user_token']); + const statusQuery = useQuery({ + queryKey: ['status'], + queryFn: getStatus, + }) + if (statusQuery.data && !statusQuery.data.initialized) { + router.push("/initialize") + } + const mutation = useMutation({ + mutationFn: login, + onSuccess: (result) => { + setErrorText("") + setCookie('user_token', result?.token, { + sameSite: true, + secure: true, + expires: new Date(new Date().getTime() + 60 * 60 * 1000), + }) + router.push('/certificate_requests') + }, + onError: (e: Error) => { + setErrorText(e.message) + } + }) + + const [username, setUsername] = useState("") + const [password, setPassword] = useState("") + const [errorText, setErrorText] = useState("") + const handleUsernameChange = (event: ChangeEvent) => { setUsername(event.target.value) } + const handlePasswordChange = (event: ChangeEvent) => { setPassword(event.target.value) } + return ( + <> + +
+ + + {errorText && + + {errorText.split("error: ")} + + } + + +
+ + ) +} \ No newline at end of file diff --git a/app/(nms)/users/page.tsx b/app/(nms)/users/page.tsx index 12cc41b..b0fa6d5 100644 --- a/app/(nms)/users/page.tsx +++ b/app/(nms)/users/page.tsx @@ -87,7 +87,7 @@ export default function Users() { defaultSort='"abcd"' defaultSortDirection="ascending" headers={[ - { content: "IMSI" }, + { content: "Username" }, { content: "Actions", className: "u-align--right" }, ]} rows={tableContent} diff --git a/app/layout.tsx b/app/layout.tsx index d1cccef..7a2da4d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,6 +5,7 @@ export const metadata: Metadata = { description: "Aether SD-Core NMS", }; + export default function RootLayout({ children, }: { diff --git a/app/page.tsx b/app/page.tsx index 8593c75..3b7df28 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,14 +1,10 @@ 'use client'; -import { useEffect } from 'react'; import { useRouter } from 'next/navigation'; export default function Home() { const router = useRouter(); - - useEffect(() => { - router.replace('/network-configuration'); - }, [router]); + router.push('/network-configuration') return null; } diff --git a/components/Navigation.tsx b/components/Navigation.tsx index bc89c6c..f8047cc 100644 --- a/components/Navigation.tsx +++ b/components/Navigation.tsx @@ -98,6 +98,22 @@ const Navigation: FC = () => { Subscribers +
  • + + {" "} + Subscribers + +
    • @@ -151,9 +167,8 @@ const Navigation: FC = () => {