Skip to content

Commit

Permalink
policies
Browse files Browse the repository at this point in the history
  • Loading branch information
@rucsi
rucsi committed Feb 1, 2024
1 parent 5744567 commit 58e1fe9
Show file tree
Hide file tree
Showing 3 changed files with 173 additions and 0 deletions.
2 changes: 2 additions & 0 deletions apps/web/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import RepoInfo from './components/repository/info'
import { AuthProvider, RequireAuth } from './lib/auth'
import { ClientProvider } from './lib/moonbase'
import Layout from './components/layout'
import Policies from './components/policies'

export default function App() {
return (
Expand All @@ -34,6 +35,7 @@ export default function App() {
<Route path="" element={<Editorial />} />
</Route>
</Route>
<Route path="policies" element={<Policies />} />
{/* <Route path="/:owner/:repo/:element/:branch/*" element={<Explorer />} /> */}
</Route>
<Route path="*" element={<Navigate to="/error/404" />} />
Expand Down
169 changes: 169 additions & 0 deletions apps/web/src/components/policies/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
import { useEffect, useState } from 'react'
import { useClient, endpoints } from '../../lib/moonbase'
import Error from '../error'
import Loader from '../loader'

export default () => {
const client = useClient()
const [policies, setPolicies] = useState(null)
const [error, setError] = useState(null)

useEffect(() => {
if (!!policies)
setPolicies(null)
client.get(endpoints.policies()).then(data => {
if (data.error) {
return setError(data.error)
}
setPolicies(data)
}).catch(err => setError(err.message))
}, [])

const addPolicy = () => (e) => {
setPolicies((policies || []).push({}))
}

const savePolicy = (p) => (e) => {
e.preventDefault()
e.stopPropagation()
client.post(endpoints.policies()).then(data => {
if (data.error) {
return setError(data.error)
}
}).catch(err => setError(err.message))
}

const deletePolicy = (name) => (e) => {
e.preventDefault()
e.stopPropagation()
client.del(endpoints.policies()).then(data => {
if (data.error) {
return setError(data.error)
}
setPolicies(entries.filter(e => (e.name != name)))
}).catch(err => setError(err.message))
}


return (<div className="text-gray-900 text-sm">
{!!error && <Error error={error} />}
<div className="container mx-auto my-8 px4">
<div className="file-explorer container w-full">
<div className="file-explorer rounded-md rounded-t-none border border-gray-300 text-gray-700 divide-y divide-gray-300">
{!policies && !error && <Loader color="text-zinc-700" />}
{!!policies && (<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
Policy type
</th>
<th scope="col" class="px-6 py-3">
<div class="flex items-center">
V0
<a href="#"><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z" />
</svg></a>
</div>
</th>
<th scope="col" class="px-6 py-3">
<div class="flex items-center">
V1
<a href="#"><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z" />
</svg></a>
</div>
</th>
<th scope="col" class="px-6 py-3">
<div class="flex items-center">
V2
<a href="#"><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z" />
</svg></a>
</div>
</th>
<th scope="col" class="px-6 py-3">
<div class="flex items-center">
V3
<a href="#"><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z" />
</svg></a>
</div>
</th>
<th scope="col" class="px-6 py-3">
<div class="flex items-center">
V4
<a href="#"><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z" />
</svg></a>
</div>
</th>
<th scope="col" class="px-6 py-3">
<div class="flex items-center">
V5
<a href="#"><svg class="w-3 h-3 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z" />
</svg></a>
</div>
</th>
<th scope="col" class="px-6 py-3">
&nbsp;
</th>
</tr>
</thead>
<tbody>
{policies.map((p, idx) => (<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="px-6 py-4">
<select id="small" class="block w-full p-2 mb-6 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option selected={!p.type}>Select type</option>
<option value="p" selected={p.type == 'p'}>policy</option>
<option value="g" selected={p.type == 'g'}>role</option>
</select>
</td>
<td class="px-6 py-4">
<input type="text" class="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" defaultValue={p.v0} value={p.v0} />
</td>
<td class="px-6 py-4">
<input type="text" class="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" defaultValue={p.v1} value={p.v1} />
</td>
<td class="px-6 py-4">
<select id="small" class="block w-full p-2 mb-6 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option selected={!p.v2}>Choose</option>
<option value="read" selected={p.v2 == 'read'}>read</option>
<option value="write" selected={p.v2 == 'write'}>write</option>
</select>
</td>
<td class="px-6 py-4">
<select id="small" class="block w-full p-2 mb-6 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option selected={!p.v3}>Choose</option>
<option value="allow" selected={p.v3 == 'allow'}>allow</option>
<option value="deny" selected={p.v3 == 'deny'}>deny</option>
</select>
</td>
<td class="px-6 py-4">
<input type="text" class="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" defaultValue={p.v4} value={p.v4} />
</td>
<td class="px-6 py-4">
<input type="text" class="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" defaultValue={p.v5} value={p.v5} />
</td>
<td class="flex items-center px-6 py-4">
{/* <a href="#" class="font-medium text-green-600 dark:text-green-500 hover:underline">Save</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">Remove</a> */}
<button type="button" class="border border-grey-700 hover:bg-grey-500 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:border-grey-500 dark:text-grey-500 dark:hover:text-white dark:focus:ring-blue-800 dark:hover:bg-grey-500">
<svg class="w-3 h-3 text-green-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</button>
<button type="button" class="border border-grey-700 hover:bg-grey-500 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:border-grey-500 dark:text-grey-500 dark:hover:text-white dark:focus:ring-blue-800 dark:hover:bg-grey-500">
<svg class="w-3 h-3 text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
</button>
</td>
</tr>))}
</tbody>
</table>)}
</div>
</div>
</div>
</div>)
}
2 changes: 2 additions & 0 deletions apps/web/src/lib/moonbase/endpoints.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export const endpoints = {
modelCategories: (owner, repo, branch) => (`/cms/${owner}/${repo}/${branch}/settings/modelCategories`),

reference: (owner, repo, branch, collection, id, locale) => (`/cms/${owner}/${repo}/${branch}/reference/${collection}/${id}/${locale}`),

policies: () => (`/auth/policies`),
}

export const defaultLocale = "en"

0 comments on commit 58e1fe9

Please sign in to comment.