S3KeyView.vue

<script setup lang="ts">
import type { S3Key } from "@/client/s3proxy";
import { reactive, watch } from "vue";
import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
import DeleteModal from "@/components/modals/DeleteModal.vue";
import { environment } from "@/environment";
import CopyToClipboardIcon from "@/components/CopyToClipboardIcon.vue";

const props = defineProps<{
  s3key: S3Key;
  deletable: boolean;
  loading: boolean;
}>();

const emit = defineEmits<{
  (e: "delete-key", accessKey: string): void;
}>();

watch(
  () => props.s3key.access_key,
  () => {
    visibleKeys.secret = false;
    visibleKeys.access = false;
  },
);
const visibleKeys = reactive<{
  secret: boolean;
  access: boolean;
}>({
  secret: false,
  access: 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.slice(0, 5) + '...'"
    :back-modal-id="undefined"
    @confirm-delete="deleteKeyTrigger"
  />
  <h3>S3 Endpoint:</h3>
  <div class="fs-4 mb-4">{{ environment.S3_URL }}</div>
  <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>
  <div v-else class="input-group mb-2">
    <span
      class="input-group-text cursor-pointer"
      @click="visibleKeys.access = !visibleKeys.access"
    >
      <font-awesome-icon
        :icon="visibleKeys.access ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"
      />
    </span>
    <input
      class="form-control"
      :type="visibleKeys.access ? 'text' : 'password'"
      :value="props.s3key.access_key"
      aria-label="S3 Access Key"
      readonly
    />
    <span class="input-group-text" id="s3-secret-key-copy"
      ><copy-to-clipboard-icon :text="props.s3key.access_key"
    /></span>
  </div>
  <h3>Secret Key:</h3>
  <div v-if="props.loading" class="placeholder-glow">
    <span class="placeholder col-7 mt-3 mb-4 fs-4"></span><br />
  </div>
  <div v-else class="input-group fs-4 mb-3">
    <span
      class="input-group-text cursor-pointer"
      @click="visibleKeys.secret = !visibleKeys.secret"
    >
      <font-awesome-icon
        :icon="visibleKeys.secret ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"
      />
    </span>
    <input
      id="s3-secret-key"
      class="form-control"
      :type="visibleKeys.secret ? 'text' : 'password'"
      :value="props.s3key.secret_key"
      aria-label="S3 Access Key"
      readonly
    />
    <span class="input-group-text" id="s3-secret-key-copy"
      ><copy-to-clipboard-icon :text="props.s3key.secret_key"
    /></span>
  </div>
  <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>