|
|
|
|
@ -1,6 +1,7 @@
|
|
|
|
|
<script setup>
|
|
|
|
|
import '@/assets/main.css'
|
|
|
|
|
import { useApiClient } from '@/components/apiClient'
|
|
|
|
|
import { Modal } from 'bootstrap'
|
|
|
|
|
import { onMounted, ref, reactive } from 'vue'
|
|
|
|
|
|
|
|
|
|
const apiClient = useApiClient()
|
|
|
|
|
@ -10,14 +11,53 @@ async function getCryptoKeyDtoList() {
|
|
|
|
|
return response.data
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let dfxCryptoKeyDtoList = ref([])
|
|
|
|
|
const cryptoKeyDto = reactive({})
|
|
|
|
|
const newKeyModalEl = ref(null)
|
|
|
|
|
let newKeyModalInstance = null
|
|
|
|
|
const isOpenedNewKeyModal = ref(false)
|
|
|
|
|
function openNewKeyModal() {
|
|
|
|
|
dfxCryptoKeyDto.keyword = ''
|
|
|
|
|
isOpenedNewKeyModal.value = true
|
|
|
|
|
newKeyModalInstance?.show()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function closeNewKeyModal() {
|
|
|
|
|
newKeyModalInstance?.hide()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const dfxCryptoKeyDto = reactive({
|
|
|
|
|
keyword: '',
|
|
|
|
|
keyId: '',
|
|
|
|
|
keyTypeName: 'oct',
|
|
|
|
|
algorithmName: 'ARIA-256-GCM',
|
|
|
|
|
targetAgentHostId: '',
|
|
|
|
|
applyTs: 0,
|
|
|
|
|
dataEncryptionYn: 'N',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
async function generateNewKey() {}
|
|
|
|
|
function generateNewKey() {
|
|
|
|
|
if (dfxCryptoKeyDto.keyword && confirm(dfxCryptoKeyDto.keyword + '의 데이터 암호화 키를 생성하시겠습니까?')) {
|
|
|
|
|
apiClient
|
|
|
|
|
.post('/app-api/agent/saveCryptoKeyDto', dfxCryptoKeyDto)
|
|
|
|
|
.then((response) => {
|
|
|
|
|
getCryptoKeyDtoList()
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
console.error(error)
|
|
|
|
|
debugger
|
|
|
|
|
alert('데이터 암호화 키 생성 중 오류가 발생하였습니다.')
|
|
|
|
|
})
|
|
|
|
|
closeNewKeyModal()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function saveList() {}
|
|
|
|
|
|
|
|
|
|
let dfxCryptoKeyDtoList = ref([])
|
|
|
|
|
const cryptoKeyDto = reactive({})
|
|
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
newKeyModalInstance = new Modal(newKeyModalEl.value, { backdrop: 'static', keyboard: false })
|
|
|
|
|
newKeyModalInstance.hide()
|
|
|
|
|
dfxCryptoKeyDtoList.value = await getCryptoKeyDtoList()
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
@ -33,16 +73,15 @@ onMounted(async () => {
|
|
|
|
|
<article class="col-12 pt-3">
|
|
|
|
|
<div class="d-flex flex-row-reverse">
|
|
|
|
|
<button type="button" class="btn btn-primary btn-sm m-1" @click="saveList">Save</button>
|
|
|
|
|
<button type="button" class="btn btn-success btn-sm m-1" @click="generateNewKey">Generate new Key</button>
|
|
|
|
|
<button type="button" class="btn btn-success btn-sm m-1" @click="openNewKeyModal">Generate new Key</button>
|
|
|
|
|
</div>
|
|
|
|
|
<table class="table table-striped table-bordered align-middle">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th scope="col" class="text-center">선택</th>
|
|
|
|
|
<th scope="col" class="text-center">Key</th>
|
|
|
|
|
<th scope="col" class="text-center">Hash</th>
|
|
|
|
|
<th scope="col" class="text-center">Key ID</th>
|
|
|
|
|
<th scope="col" class="text-center">Type</th>
|
|
|
|
|
<th scope="col" class="text-center">Algorithm</th>
|
|
|
|
|
<th scope="col" class="text-center">Mode</th>
|
|
|
|
|
<th scope="col" class="text-center">Target agent</th>
|
|
|
|
|
<th scope="col" class="text-center">Applied at</th>
|
|
|
|
|
<th scope="col" class="text-center">Data encryption</th>
|
|
|
|
|
@ -51,10 +90,9 @@ onMounted(async () => {
|
|
|
|
|
<tbody class="table-group-divider">
|
|
|
|
|
<tr v-if="dfxCryptoKeyDtoList.length > 0" v-for="(cryptoKeyDto, index) in dfxCryptoKeyDtoList" :key="index">
|
|
|
|
|
<td scope="row" class="text-center"><input type="checkbox" class="form-check-input" v-model="cryptoKeyDto.selected" /></td>
|
|
|
|
|
<td class="text-center">{{ cryptoKeyDto.keyValue }}</td>
|
|
|
|
|
<td class="text-center">{{ cryptoKeyDto.hashValue }}</td>
|
|
|
|
|
<td class="text-center">{{ cryptoKeyDto.keyId }}</td>
|
|
|
|
|
<td class="text-center">{{ cryptoKeyDto.keyTypeName }}</td>
|
|
|
|
|
<td class="text-center">{{ cryptoKeyDto.algorithmName }}</td>
|
|
|
|
|
<td class="text-center">{{ cryptoKeyDto.modeName }}</td>
|
|
|
|
|
<td class="text-center">{{ cryptoKeyDto.targetAgentHostId }}</td>
|
|
|
|
|
<td class="text-center">{{ cryptoKeyDto.applyTs }}</td>
|
|
|
|
|
<td class="text-center">{{ cryptoKeyDto.dataEncryptionYn }}</td>
|
|
|
|
|
@ -67,6 +105,53 @@ onMounted(async () => {
|
|
|
|
|
</article>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<!-- 암호화 키 생성 또는 정보 저장 -->
|
|
|
|
|
<div class="modal fade" ref="newKeyModalEl" id="crypto-key-manage-view-input-form-modal" tabindex="-1" aria-labelledby="crypto-key-manage-view-input-form-modal-label" aria-hidden="true">
|
|
|
|
|
<div class="modal-dialog">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header justify-content-between">
|
|
|
|
|
<h1 class="modal-title fs-5 pt-0" id="crypto-key-manage-view-input-form-modal-label">데이터 암호화 키 생성</h1>
|
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
|
<button type="button" class="btn btn-success btn-sm" @click.prevent="generateNewKey">생성</button>
|
|
|
|
|
<button type="button" class="btn-close" aria-label="Close" @click.prevent="closeNewKeyModal"></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<div class="form-wrapper">
|
|
|
|
|
<div class="row align-items-center">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<label for="crypto-key-manage-view-new-keyword" class="col-form-label">Keyword</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-auto">
|
|
|
|
|
<input type="text" id="crypto-key-manage-view-new-keyword" class="form-control" aria-describedby="crypto-key-manage-view-new-keyword-help-line" maxlength="32" v-model="dfxCryptoKeyDto.keyword" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-auto">
|
|
|
|
|
<p id="crypto-key-manage-view-new-keyword-help-line" class="form-text">관리를 위한 ID/이름 등의 키워드를 입력하여 주십시오.</p>
|
|
|
|
|
<p class="form-text">암호화키는 무작위로 생성됩니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row align-items-center">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<label for="crypto-key-manage-view-new-key-type-name" class="col-form-label">키 타입</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-auto">
|
|
|
|
|
<input type="text" id="crypto-key-manage-view-new-key-type-name" class="form-control" readonly v-model="dfxCryptoKeyDto.keyTypeName" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row align-items-center">
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<label for="crypto-key-manage-view-new-algorithm-name" class="col-form-label">알고리즘</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-auto">
|
|
|
|
|
<input type="text" id="crypto-key-manage-view-new-algorithm-name" class="form-control" readonly v-model="dfxCryptoKeyDto.algorithmName" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style></style>
|
|
|
|
|
|