- Created backend structure with Go, including main application logic and API endpoints. - Added Docker support for both development and production environments. - Introduced frontend using Nuxt 3 with Tailwind CSS for styling. - Included configuration files for Docker and environment variables. - Established basic documentation for contributing, development, and deployment processes. - Set up .gitignore and .dockerignore files to manage ignored files in the repository.
112 lines
3.5 KiB
Vue
112 lines
3.5 KiB
Vue
<template>
|
|
<div class="container mx-auto p-4 max-w-2xl">
|
|
<h1 class="text-2xl font-bold mb-6">Profile</h1>
|
|
|
|
<div class="card bg-base-200 shadow-xl mb-6">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Upload tokens</h2>
|
|
<p class="text-sm opacity-80">Tokens for upload API. Generate and copy as needed.</p>
|
|
<ul v-if="tokens?.length" class="list-disc list-inside mt-2 space-y-1">
|
|
<li v-for="t in tokens" :key="t" class="font-mono text-sm flex items-center gap-2">
|
|
<span class="break-all">{{ uploadTokenDisplay(t) }}</span>
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-xs shrink-0"
|
|
aria-label="Copy token"
|
|
@click="copyToken(t)"
|
|
>
|
|
Copy
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<p v-else class="text-sm mt-2">No tokens yet.</p>
|
|
<p v-if="tokenError" class="text-error text-sm mt-2">{{ tokenError }}</p>
|
|
<button class="btn btn-primary btn-sm mt-2" :disabled="loadingTokens" @click="generateToken">
|
|
{{ loadingTokens ? '…' : 'Generate token' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-200 shadow-xl mb-6">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Change password</h2>
|
|
<form @submit.prevent="changePass" class="flex flex-col gap-2">
|
|
<PasswordInput
|
|
v-model="newPass"
|
|
placeholder="New password"
|
|
autocomplete="new-password"
|
|
/>
|
|
<p v-if="passMsg" class="text-sm" :class="passOk ? 'text-success' : 'text-error'">{{ passMsg }}</p>
|
|
<button type="submit" class="btn btn-sm" :disabled="loadingPass">Save password</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const api = useMapApi()
|
|
const tokens = ref<string[]>([])
|
|
const uploadPrefix = ref('')
|
|
const newPass = ref('')
|
|
const loadingTokens = ref(false)
|
|
const loadingPass = ref(false)
|
|
const passMsg = ref('')
|
|
const passOk = ref(false)
|
|
const tokenError = ref('')
|
|
|
|
function uploadTokenDisplay(token: string): string {
|
|
const base = (uploadPrefix.value ?? '').replace(/\/+$/, '')
|
|
return base ? `${base}/client/${token}` : `client/${token}`
|
|
}
|
|
|
|
function copyToken(token: string) {
|
|
navigator.clipboard.writeText(uploadTokenDisplay(token)).catch(() => {})
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const me = await api.me()
|
|
tokens.value = me.tokens ?? []
|
|
uploadPrefix.value = me.prefix ?? ''
|
|
} catch {
|
|
tokens.value = []
|
|
uploadPrefix.value = ''
|
|
}
|
|
})
|
|
|
|
async function generateToken() {
|
|
tokenError.value = ''
|
|
loadingTokens.value = true
|
|
try {
|
|
await api.meTokens()
|
|
const me = await api.me()
|
|
tokens.value = me.tokens ?? []
|
|
uploadPrefix.value = me.prefix ?? ''
|
|
} catch (e: unknown) {
|
|
const msg = e instanceof Error ? e.message : ''
|
|
tokenError.value = msg === 'Forbidden'
|
|
? 'You need "upload" permission to generate tokens. Ask an admin to add it to your account.'
|
|
: (msg || 'Failed to generate token')
|
|
} finally {
|
|
loadingTokens.value = false
|
|
}
|
|
}
|
|
|
|
async function changePass() {
|
|
passMsg.value = ''
|
|
loadingPass.value = true
|
|
try {
|
|
await api.mePassword(newPass.value)
|
|
passMsg.value = 'Password updated.'
|
|
passOk.value = true
|
|
newPass.value = ''
|
|
} catch (e: unknown) {
|
|
passMsg.value = e instanceof Error ? e.message : 'Failed'
|
|
passOk.value = false
|
|
} finally {
|
|
loadingPass.value = false
|
|
}
|
|
}
|
|
</script>
|