mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.6 KiB
HTML
129 lines
3.6 KiB
HTML
1 week ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta name="description" content="OAuth Apps">
|
||
|
|
<title>{{ $t('nav.oauth') }}</title>
|
||
|
|
<style>
|
||
|
|
.page-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.app-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
.app-card {
|
||
|
|
background: #fff;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
box-shadow: var(--shadow-sm);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
.app-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.app-name {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: var(--color-primary);
|
||
|
|
}
|
||
|
|
.app-id {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--text-color-secondary);
|
||
|
|
font-family: monospace;
|
||
|
|
background: var(--bg-color-tertiary);
|
||
|
|
padding: 4px;
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
}
|
||
|
|
.app-redirect {
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--text-color-secondary);
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
.btn-create {
|
||
|
|
background-color: var(--color-primary);
|
||
|
|
color: white;
|
||
|
|
padding: 8px 16px;
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.btn-delete {
|
||
|
|
background-color: var(--color-danger);
|
||
|
|
color: white;
|
||
|
|
padding: 4px 8px;
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="page-header">
|
||
|
|
<h1>{{ $t('nav.oauth') }}</h1>
|
||
|
|
<button class="btn-create" @click="createApp">New App</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="app-grid">
|
||
|
|
<div class="app-card" v-for="app in apps">
|
||
|
|
<div class="app-header">
|
||
|
|
<div class="app-name">{{ app.name }}</div>
|
||
|
|
<button class="btn-delete" @click="deleteApp(app.id)">Delete</button>
|
||
|
|
</div>
|
||
|
|
<div class="app-id">ID: {{ app.client_id }}</div>
|
||
|
|
<div class="app-redirect">Callback: {{ app.redirect_uri }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script setup>
|
||
|
|
apps = [];
|
||
|
|
|
||
|
|
loadApps = async () => {
|
||
|
|
try {
|
||
|
|
const res = await $axios.get('/api/oauth/clients');
|
||
|
|
apps = res || [];
|
||
|
|
} catch (e) {
|
||
|
|
$message.error(e.message);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
createApp = () => {
|
||
|
|
$message.prompt("Enter App Name", "New App").then(async (name) => {
|
||
|
|
if (!name) return;
|
||
|
|
const uri = await $message.prompt("Enter Redirect URI", "http://localhost:3000/callback");
|
||
|
|
if (!uri) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
await $axios.post('/api/oauth/clients', { name: name, redirect_uri: uri });
|
||
|
|
$message.success("Created");
|
||
|
|
loadApps();
|
||
|
|
} catch (e) {
|
||
|
|
$message.error(e.message);
|
||
|
|
}
|
||
|
|
}).catch(() => {});
|
||
|
|
};
|
||
|
|
|
||
|
|
deleteApp = async (id) => {
|
||
|
|
try {
|
||
|
|
await $message.confirm("Delete this app?");
|
||
|
|
await $axios.delete(`/api/oauth/clients/${id}`);
|
||
|
|
$message.success("Deleted");
|
||
|
|
loadApps();
|
||
|
|
} catch (e) {
|
||
|
|
// Cancelled
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
$data.loadApps();
|
||
|
|
</script>
|
||
|
|
</html>
|