diff --git a/frontend/src/config/http.ts b/frontend/src/config/http.ts
index 2c7a971..339f6c8 100644
--- a/frontend/src/config/http.ts
+++ b/frontend/src/config/http.ts
@@ -1,7 +1,30 @@
import axios from 'axios'
-const http = axios.create({
- baseURL: location.origin.replace('7702', '7701') + '/api/'
-})
+export const getAxiosInstance = () => {
+ const instance = axios.create({
+ baseURL: location.origin.replace('7702', '7701') + '/api/',
+ headers: {
+ Authorization: localStorage.vortexnotes_passcode
+ ? 'Bearer ' + localStorage.vortexnotes_passcode
+ : undefined
+ }
+ })
-window.$http = http
+ instance.interceptors.response.use(
+ response => response,
+ error => {
+ if (error.response) {
+ if (error.response.status === 401) {
+ localStorage.removeItem('vortexnotes_passcode')
+ localStorage.removeItem('vortexnotes_auth_scope')
+ location.href = '/auth'
+ }
+ }
+ return Promise.reject(error)
+ }
+ )
+
+ return instance
+}
+
+window.$http = getAxiosInstance()
diff --git a/frontend/src/hooks/usePermissionCheckEffect.ts b/frontend/src/hooks/usePermissionCheckEffect.ts
new file mode 100644
index 0000000..68e7980
--- /dev/null
+++ b/frontend/src/hooks/usePermissionCheckEffect.ts
@@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+import { hasPermission } from '@/utils'
+import { useNavigate } from 'react-router-dom'
+
+export default function usePermissionCheckEffect(scope: string) {
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ if (!hasPermission(scope)) {
+ navigate('/auth')
+ }
+ }, [navigate, scope])
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f178957..5562f8d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@200;300;400;500;600;700&display=swap');
-@import url('https://at.alicdn.com/t/c/font_4344275_jt0ar688xla.css');
+@import url('https://at.alicdn.com/t/c/font_4344275_ibfdwgo51bi.css');
@tailwind base;
@tailwind components;
diff --git a/frontend/src/screens/AuthScreen/index.tsx b/frontend/src/screens/AuthScreen/index.tsx
new file mode 100644
index 0000000..3ba0b05
--- /dev/null
+++ b/frontend/src/screens/AuthScreen/index.tsx
@@ -0,0 +1,94 @@
+import React, { useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { isAxiosError } from 'axios'
+import { getAxiosInstance } from '@/config/http.ts'
+import ToastPopup from '@/components/popups/ToastPopup.tsx'
+
+const AuthScreen: React.FC = () => {
+ const [passcode, setPasscode] = useState('')
+ const [loading, setLoading] = useState(false)
+ const navigate = useNavigate()
+ const inputRef = useRef
(null)
+ const [error, setError] = useState(false)
+
+ const onAuth = async () => {
+ if (loading) {
+ return
+ }
+
+ if (passcode.trim().length === 0) {
+ return inputRef.current?.focus()
+ }
+
+ setLoading(true)
+
+ try {
+ const res = await window.$http.post('auth', { passcode })
+ localStorage.vortexnotes_passcode = passcode
+ localStorage.vortexnotes_auth_scope = res.data.auth_scope
+ window.$http = getAxiosInstance()
+ navigate('/')
+ ToastPopup.show({ message: 'Authentication successful' })
+ } catch (error) {
+ setLoading(false)
+ setError(true)
+
+ if (isAxiosError(error)) {
+ if (error.response) {
+ setPasscode('')
+ return ToastPopup.show({ message: error.response.data?.message })
+ }
+ }
+
+ return ToastPopup.show({ message: 'Auth Failure' })
+ }
+ }
+
+ const inputErrorClass = error && 'border-red-500 focus:border-red-500 placeholder-red-500'
+
+ return (
+
+
+
+
+
+
+ Vortexnotes
+
+
+
+
+
{displayName(note.name)}
-
-
+ {hasPermission('edit') && (
+
+ )}
+ {hasPermission('delete') && (
+
+ )}
{
const [empty, setEmpty] = useState(false)
const [loading, setLoading] = useState(false)
const navigate = useNavigate()
+
useEffect(() => {
runAsyncFunction(async () => {
setLoading(true)
diff --git a/frontend/src/utils/api.ts b/frontend/src/utils/api.ts
new file mode 100644
index 0000000..d7c4384
--- /dev/null
+++ b/frontend/src/utils/api.ts
@@ -0,0 +1,10 @@
+export async function fetchConfig() {
+ const res = await window.$http.get('config')
+ const authScopes = res.data?.auth_scope
+
+ if (authScopes) {
+ localStorage.vortexnotes_auth_scope = authScopes
+ }
+
+ return res.data
+}
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 3ac9c42..35e619c 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -33,3 +33,17 @@ export function onSearch(keywords: string, navigate: NavigateFunction) {
navigate(`/search?keywords=${searchWords}`)
}
+
+export const hasPermission = (scope: string) => {
+ if (!localStorage.vortexnotes_passcode) {
+ if (localStorage.vortexnotes_auth_scope?.includes(scope)) {
+ return false
+ }
+ }
+
+ return true
+}
+
+export const hasPasscode = () => {
+ return !!localStorage.vortexnotes_passcode
+}
diff --git a/vortexnotes.run.xml b/vortexnotes.run.xml
index 7011cc3..644a048 100644
--- a/vortexnotes.run.xml
+++ b/vortexnotes.run.xml
@@ -2,6 +2,10 @@
+
+
+
+