-
Raster
-
Hello World
+
)
}
+function App() {
+ const navigate = useNavigate()
+ const location = useLocation()
+ useEffect(() => {
+ const checkRootUser = async () => {
+ const response = await fetch(`${getServerUrl()}/api/user/rootUserExists`)
+ const data = await response.json()
+ if (data.exists) {
+ // Only navigate to gallery if we're on the root path
+ if (location.pathname === '/') {
+ navigate('/gallery')
+ }
+ } else {
+ // Always redirect to onboarding if root user doesn't exist
+ if (location.pathname !== '/onboarding/createRootUser') {
+ navigate('/onboarding/createRootUser')
+ }
+ }
+ }
+ checkRootUser()
+ }, [location.pathname, navigate])
+ return (
+
+
+
+ } />
+ } />
+ } />
+ } />
+
+
+
+ )
+}
+
export default App
diff --git a/frontend/src/account/createRoot.jsx b/frontend/src/account/createRoot.jsx
new file mode 100644
index 0000000..48ff233
--- /dev/null
+++ b/frontend/src/account/createRoot.jsx
@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { getServerUrl } from '../hooks/getConstants'
+import { useNavigate } from 'react-router-dom'
+
+export default function CreateRootUser() {
+ const navigate = useNavigate()
+ const [username, setUsername] = useState('')
+ const [password, setPassword] = useState('')
+ const handleCreateRootUser = async () => {
+ const response = await fetch(`${getServerUrl()}/api/user/createUser`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ username: username,
+ password: password,
+ }),
+ })
+ const data = await response.json()
+ if (data.error) {
+ console.error(data.error)
+ } else {
+ const rootResponse = await fetch(`${getServerUrl()}/api/user/setRootUser`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ username: username,
+ }),
+ })
+ const rootData = await rootResponse.json()
+ if (rootData.error) {
+ console.error(rootData.error)
+ } else {
+ navigate('/gallery')
+ }
+ }
+ }
+ return (
+
+
+
+
+
Create Root User
+
This is the primary user account for Raster. Make sure to remember your credentials.
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/account/login.jsx b/frontend/src/account/login.jsx
new file mode 100644
index 0000000..bb66758
--- /dev/null
+++ b/frontend/src/account/login.jsx
@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { useAccount } from '../contexts/useAccount'
+import { useNavigate } from 'react-router-dom'
+import { useNotifier } from '../contexts/useNotifier'
+export default function Login() {
+ const { showError } = useNotifier()
+ const navigate = useNavigate()
+ const [username, setUsername] = useState('')
+ const [password, setPassword] = useState('')
+ const { login } = useAccount()
+ const handleLogin = () => {
+ login(username, password)
+ .then(() => {
+ navigate('/gallery')
+ })
+ .catch((error) => {
+ showError(error.message)
+ })
+ }
+ return (
+
+
+
+
+
Login
+
Enter your credentials to continue
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg
new file mode 100644
index 0000000..58b3fd8
--- /dev/null
+++ b/frontend/src/assets/logo.svg
@@ -0,0 +1,13 @@
+
diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
new file mode 100644
index 0000000..f30f591
--- /dev/null
+++ b/frontend/src/components/NavBar.jsx
@@ -0,0 +1,48 @@
+import { Link } from 'react-router-dom'
+import { ChevronDown, LogIn, LogOut, UserIcon } from 'lucide-react'
+import * as Popover from '@radix-ui/react-popover'
+import { useState } from 'react';
+import { useAccount } from '../contexts/useAccount';
+export default function NavBar({ path }) {
+ const [open, setOpen] = useState(false);
+ const { user, logout } = useAccount();
+ return (
+
+
+ {path.map((item, index) => (
+
+
+ {item}
+
+ {index !== path.length - 1 &&
/
}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
Logged in as: {user?.Username || 'Guest'}
+
+ {user ? (
+
+ ) : (
+
+ Log In
+
+
+ )}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/contexts/useAccount.jsx b/frontend/src/contexts/useAccount.jsx
new file mode 100644
index 0000000..b9bae87
--- /dev/null
+++ b/frontend/src/contexts/useAccount.jsx
@@ -0,0 +1,75 @@
+import { createContext, useContext, useState } from 'react'
+import { getServerUrl } from '../hooks/getConstants'
+
+const AccountContext = createContext()
+
+export const AccountProvider = ({ children }) => {
+ const [accessToken, setAccessToken] = useState(null)
+ const [user, setUser] = useState(null)
+
+ const login = async (username, password) => {
+ const response = await fetch(`${getServerUrl()}/api/user/login`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ username, password }),
+ })
+ const data = await response.json()
+ if (data.error) {
+ throw new Error(data.error)
+ } else {
+ setAccessToken(data.accessToken)
+ localStorage.setItem('accessToken', data.accessToken)
+ fetchUserData(data.accessToken)
+ return true
+ }
+ }
+
+ const fetchUserData = async (accessToken) => {
+ if (!accessToken) {
+ accessToken = getAccessToken()
+ if (!accessToken) {
+ setUser(null)
+ return false
+ }
+ }
+ const response = await fetch(`${getServerUrl()}/api/user/getUserData`, {
+ headers: {
+ 'Authorization': `Bearer ${accessToken}`,
+ },
+ })
+ const data = await response.json()
+ console.log(data)
+ if (data.error) {
+ throw new Error(data.error)
+ } else {
+ setUser(data.userData)
+ return true
+ }
+ }
+
+ const logout = () => {
+ setAccessToken(null)
+ localStorage.removeItem('accessToken')
+ location.reload()
+ }
+
+ const getAccessToken = () => {
+ if (!accessToken && localStorage.getItem('accessToken')) {
+ setAccessToken(localStorage.getItem('accessToken'))
+ return localStorage.getItem('accessToken')
+ }
+ return accessToken
+ }
+
+ return
{children}
+}
+
+export const useAccount = () => {
+ const context = useContext(AccountContext)
+ if (!context) {
+ throw new Error('useAccount must be used within an AccountProvider')
+ }
+ return context
+}
\ No newline at end of file
diff --git a/frontend/src/contexts/useNotifier.jsx b/frontend/src/contexts/useNotifier.jsx
new file mode 100644
index 0000000..be949c0
--- /dev/null
+++ b/frontend/src/contexts/useNotifier.jsx
@@ -0,0 +1,125 @@
+import { createContext, useContext, useState, useCallback, useEffect } from 'react'
+import { X, AlertCircle, CheckCircle, Info } from 'lucide-react'
+
+const NotifierContext = createContext()
+
+export const useNotifier = () => {
+ const context = useContext(NotifierContext)
+ if (!context) {
+ throw new Error('useNotifier must be used within a NotifierProvider')
+ }
+ return context
+}
+
+export const NotifierProvider = ({ children }) => {
+ const [notifications, setNotifications] = useState([])
+
+ const removeNotification = useCallback((id) => {
+ setNotifications((prev) => prev.filter((n) => n.id !== id))
+ }, [])
+
+ const addNotification = useCallback((message, type = 'info', duration = 5000) => {
+ const id = Date.now() + Math.random()
+ setNotifications((prev) => [...prev, { id, message, type, duration }])
+ }, [])
+
+ const showError = useCallback((message, duration = 5000) => {
+ addNotification(message, 'error', duration)
+ }, [addNotification])
+
+ const showSuccess = useCallback((message, duration = 3000) => {
+ addNotification(message, 'success', duration)
+ }, [addNotification])
+
+ const showInfo = useCallback((message, duration = 3000) => {
+ addNotification(message, 'info', duration)
+ }, [addNotification])
+
+ const showUpdate = useCallback((message, duration = 3000) => {
+ addNotification(message, 'info', duration)
+ }, [addNotification])
+
+ return (
+
+ {children}
+
+ {notifications.map((notification) => (
+ removeNotification(notification.id)}
+ />
+ ))}
+
+
+ )
+}
+
+const NotificationItem = ({ notification, onClose }) => {
+ const { message, type, duration } = notification
+ const [isExiting, setIsExiting] = useState(false)
+
+ useEffect(() => {
+ if (duration > 0) {
+ const timer = setTimeout(() => {
+ setIsExiting(true)
+ }, duration)
+ return () => clearTimeout(timer)
+ }
+ }, [duration])
+
+ useEffect(() => {
+ if (isExiting) {
+ const timer = setTimeout(() => {
+ onClose()
+ }, 300) // Match animation duration
+ return () => clearTimeout(timer)
+ }
+ }, [isExiting, onClose])
+
+ const getIcon = () => {
+ switch (type) {
+ case 'error':
+ return
+ case 'success':
+ return
+ default:
+ return
+ }
+ }
+
+ const getBorderColor = () => {
+ switch (type) {
+ case 'error':
+ return 'border-red-500/50'
+ case 'success':
+ return 'border-green-500/50'
+ default:
+ return 'border-[#2B2B2B]'
+ }
+ }
+
+ return (
+
+ {getIcon()}
+
{message}
+
+
+ )
+}
+
diff --git a/frontend/src/gallery/index.jsx b/frontend/src/gallery/index.jsx
new file mode 100644
index 0000000..9780105
--- /dev/null
+++ b/frontend/src/gallery/index.jsx
@@ -0,0 +1,19 @@
+import NavBar from '../components/NavBar'
+import { useLocation } from 'react-router-dom';
+import { useAccount } from '../contexts/useAccount';
+import { useEffect } from 'react';
+export default function Gallery() {
+ const currentPath = useLocation().pathname;
+ const pathList = currentPath.split('/').slice(1);
+ const { fetchUserData, user } = useAccount()
+
+ useEffect(() => {
+ fetchUserData()
+ }, [])
+
+ return (
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/getConstants.js b/frontend/src/hooks/getConstants.js
new file mode 100644
index 0000000..26e22bb
--- /dev/null
+++ b/frontend/src/hooks/getConstants.js
@@ -0,0 +1,3 @@
+export const getServerUrl = () => {
+ return 'http://localhost:8080';
+}
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a461c50..bf15d5d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1 +1,24 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+
+html,
+body,
+#root {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+
+.red-hat-mono {
+ font-family: "Red Hat Mono", monospace;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.red-hat-text {
+ font-family: "Red Hat Text", sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+}
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 89f91e5..d5ce027 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,13 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'
import './index.css'
createRoot(document.getElementById('root')).render(
-
+
+
+
,
)
diff --git a/frontend/src/test/index.jsx b/frontend/src/test/index.jsx
new file mode 100644
index 0000000..c02e54e
--- /dev/null
+++ b/frontend/src/test/index.jsx
@@ -0,0 +1,7 @@
+export default function Test() {
+ return (
+
+
Test
+
+ )
+}
\ No newline at end of file