Newer
Older
import type { S3Key } from "@/client/s3proxy";
import type { Ref } from "vue";
import { ref, watch } from "vue";
import BootstrapIcon from "@/components/BootstrapIcon.vue";
import DeleteModal from "@/components/modals/DeleteModal.vue";
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
const props = defineProps<{
s3key: S3Key;
deletable: boolean;
loading: boolean;
}>();
const emit = defineEmits<{
(e: "delete-key", accessKey: string): void;
}>();
watch(
() => props.s3key.access_key,
() => {
visibleSecret.value = false;
}
);
const visibleSecret: Ref<boolean> = ref(false);
function deleteKeyTrigger() {
if (props.deletable) {
emit("delete-key", props.s3key.access_key);
}
}
</script>
<template>
<DeleteModal
modalID="delete-key-modal"
:object-name-delete="props.s3key.access_key"
:back-modal-id="undefined"
@confirm-delete="deleteKeyTrigger"
/>
<h3>Access Key:</h3>
<div v-if="props.loading" class="placeholder-glow">
<span class="placeholder col-5 mt-3 mb-2 fs-4"></span><br />
</div>
<input
v-else
class="form-control-plaintext text-white fs-4"
type="text"
:value="props.s3key.access_key"
aria-label="S3 Access Key"
readonly
/>
<div class="d-flex align-items-center">
<span class="fs-3">Secret Key:</span>
<button
class="btn btn-outline-secondary ms-3"
:class="{ active: visibleSecret }"
data-bs-toggle="button"
:disabled="props.loading"
@click="visibleSecret = !visibleSecret"
>
<bootstrap-icon
:width="18"
:height="18"
fill="white"
:icon="visibleSecret ? 'eye' : 'eye-slash'"
/>
</button>
</div>
<div v-if="props.loading" class="placeholder-glow">
<span class="placeholder col-7 mt-3 mb-4 fs-4"></span><br />
</div>
<input
v-else
id="s3-secret-key"
class="form-control-plaintext text-white fs-4 mb-3"
:type="visibleSecret ? 'text' : 'password'"
:value="props.s3key.secret_key"
aria-label="S3 Access Key"
aria-describedby="s3-secret-key"
readonly
/>
<button
type="button"
class="btn btn-danger fs-5"
:disabled="!props.deletable || props.loading"
data-bs-toggle="modal"
data-bs-target="#delete-key-modal"
>
Delete
</button>
</template>
<style scoped></style>