Add simple auth (#186)

This commit is contained in:
Jonas Plum
2022-06-13 18:13:31 +02:00
committed by GitHub
parent 4883646f39
commit 9f1041d7ef
43 changed files with 1304 additions and 622 deletions

View File

@@ -12,17 +12,43 @@
</div>
<div v-else class="fill-height d-flex flex-column pa-8">
<div v-if="$route.params.id === 'new'">
<h2>Create new API key</h2>
<h2>
Create a new
<span v-if="user.apikey">API Key</span>
<span v-else>User</span>
</h2>
<v-form>
<v-text-field label="ID" v-model="user.id" hide-details></v-text-field>
<v-btn-toggle v-model="user.apikey" mandatory dense>
<v-btn :value="false">User</v-btn>
<v-btn :value="true">API Key</v-btn>
</v-btn-toggle>
<v-text-field label="ID" v-model="user.id" class="mb-2" :rules="[
v => !!v || 'ID is required',
v => (v && v.length < 254) || 'ID must be between 1 and 254 characters',
v => /^[a-z\d\-]+$/.test(v) || 'Only characters a-z, 0-9 and - are allowed',
// v => /^[A-Za-z0-9_\-\:@\(\)\+,=;\$!\*'%]+$/.test(v) || 'Only characters A-Z, a-z, 0-9, _, -, :, ., @, (, ), +, ,, =, ;, $, !, *, \', % are allowed',
]"></v-text-field>
<v-text-field
v-if="!user.apikey"
label="Password"
v-model="user.password"
:append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
:type="show ? 'text' : 'password'"
@click:append="show = !show"
:rules="[
v => !!v || 'Password is required',
v => (v && v.length >= 8) || 'Password must be at least 8 characters',
]"></v-text-field>
<v-select multiple chips label="Roles" v-model="user.roles" :items="$store.state.settings.roles"></v-select>
<v-btn @click="save" color="success" outlined>
<v-icon>mdi-plus-thick</v-icon>
Create API-Key
Create
<span v-if="user.apikey" class="ml-1">API Key</span>
<span v-else class="ml-1">User</span>
</v-btn>
</v-form>
<v-alert v-if="newUserResponse" color="warning" class="mt-4" dismissible>
<b>New API-Secret:</b> {{ newUserResponse.secret }}<br>
<b>New API secret:</b> {{ newUserResponse.secret }}<br>
Make sure you save it - you won't be able to access it again.
</v-alert>
</div>
@@ -32,9 +58,12 @@
<span v-if="user.apikey">(API Key)</span>
</h2>
<v-text-field v-if="!user.apikey" label="New Password (leave empty to keep)" v-model="user.password" hide-details class="mb-4"></v-text-field>
<v-checkbox v-if="!user.apikey" label="Blocked" v-model="user.blocked" hide-details class="mb-4"></v-checkbox>
<v-select multiple chips v-if="!user.apikey" label="Roles" v-model="user.roles" :items="$store.state.settings.roles"></v-select>
<div v-else>
<v-chip v-for="role in user.roles" :key="role">{{ role }}</v-chip>
<v-chip v-for="role in user.roles" :key="role" class="mr-1 mb-1">{{ role }}</v-chip>
</div>
<v-btn v-if="!user.apikey" @click="save" color="success" outlined>
@@ -49,11 +78,12 @@
<script lang="ts">
import Vue from "vue";
import { NewUserResponse, UserResponse } from "@/client";
import {NewUserResponse, UserForm} from "@/client";
import {API} from "@/services/api";
interface State {
user?: UserResponse;
show: boolean;
user?: UserForm;
newUserResponse?: NewUserResponse;
}
@@ -61,6 +91,7 @@ export default Vue.extend({
name: "User",
components: {},
data: (): State => ({
show: false,
user: undefined,
newUserResponse: undefined
}),