jcloud/dashboard_backup/src2/components/site_database_user/SiteDatabaseUserCredentialDialog.vue

<template>
	<Dialog
		:options="{ title: '数据库凭证', size: '2xl' }"
		v-model="showDialog"
	>
		<template #body-content>
			<div
				v-if="$resources.databaseCredential.loading"
				class="flex w-full items-center justify-center gap-2 py-20 text-gray-700"
			>
				<Spinner class="w-4" /> 加载中
			</div>
			<div v-else>
				<div v-if="databaseCredential">
					<p class="mb-2 text-base font-semibold text-gray-700">
						使用分析或商业智能工具
					</p>
					<p class="mb-2 text-base">
						在您的分析或商业智能工具中使用以下凭证
					</p>
					<p class="ml-1 font-mono text-sm">
						主机: {{ databaseCredential?.host }}
					</p>
					<p class="ml-1 font-mono text-sm">
						端口: {{ databaseCredential?.port }}
					</p>
					<p class="ml-1 font-mono text-sm">
						数据库名称: {{ databaseCredential?.database }}
					</p>
					<p class="ml-1 font-mono text-sm">
						用户名: {{ databaseCredential?.username }}
					</p>
					<p class="ml-1 font-mono text-sm">
						密码: {{ databaseCredential?.password }}
					</p>
					<p class="ml-1 font-mono text-sm">使用 SSL: 是</p>
					<p class="ml-1 font-mono text-sm">
						最大数据库连接{{
							databaseCredential?.max_connections > 1 ? '数' : ''
						}}: {{ databaseCredential?.max_connections }}
					</p>
				</div>
				<div class="pb-2 pt-5">
					<p class="mb-2 text-base font-semibold text-gray-700">
						使用 MariaDB CLI
					</p>
					<p class="mb-2 text-base">
						在终端中运行此命令以访问 MariaDB 控制台
					</p>
					<ClickToCopyField class="ml-1" :textContent="dbAccessCommand" />
					<p class="mt-3 text-sm">
						注意: 您的计算机上应安装
						<span class="font-mono">mariadb</span> 客户端。
					</p>
				</div>
				<div class="pb-2 pt-5">
					<p class="mb-2 text-base font-semibold text-gray-700">SSL 信息</p>
					<p class="text-sm">
						您需要 <b>使用 SSL</b> 来连接数据库。
					</p>
					<Button
						class="mt-3"
						:loading="this.$resources.downloadSSLCert.loading"
						loading-text="正在下载完整链 SSL 证书 (.pem)"
						@click="this.$resources.downloadSSLCert.submit()"
						>下载完整链 SSL 证书 (.pem)</Button
					>
					<ErrorMessage
						class="mt-2"
						:message="this.$resources.downloadSSLCert.error"
					/>
				</div>
				<div class="pb-2 pt-5">
					<p class="mb-2 text-base font-semibold text-gray-700">需要帮助？</p>
					<p class="text-sm">
						请查看
						<a
							href="https://jingrow.com/docs/database-users-and-permission-manager#faq"
							target="_blank"
							class="underline"
							>文档</a
						>
						以获取故障排除指南。
					</p>
				</div>
			</div>
		</template>
	</Dialog>
</template>
<script>
import ClickToCopyField from '../ClickToCopyField.vue';
import { toast } from 'vue-sonner';

export default {
	name: 'SiteDatabaseUserCredentialDialog',
	props: ['name', 'modelValue'],
	emits: ['update:modelValue'],
	components: { ClickToCopyField },
	data() {
		return {};
	},
	resources: {
		databaseCredential() {
			return {
				url: 'jcloud.api.client.run_pg_method',
				makeParams: () => {
					return {
						dt: 'Site Database User',
						dn: this.name,
						method: 'get_credential'
					};
				},
				initialData: {},
				auto: true
			};
		},
		downloadSSLCert() {
			return {
				url: 'jcloud.api.download_ssl_cert',
				makeParams: () => {
					return {
						domain: this.databaseCredential?.host ?? ''
					};
				},
auto: false,
				onSuccess: data => {
					// create a blob and trigger a download
					const blob = new Blob([data], { type: 'text/plain' });
					const filename = `${this.databaseCredential?.host ?? ''}.pem`;
					const link = document.createElement('a');
					link.href = URL.createObjectURL(blob);
					link.download = filename;
					link.click();
					URL.revokeObjectURL(link.href);
					toast.success('SSL 证书下载成功');
				}
			};
		}
	},
	computed: {
		databaseCredential() {
			return this.$resources?.databaseCredential?.data?.message ?? {};
		},
		dbAccessCommand() {
			if (!this.databaseCredential) return '';
			return `mysql -u ${this.databaseCredential.username} -p -h ${this.databaseCredential.host} -P ${this.databaseCredential.port} --ssl --ssl-verify-server-cert`;
		},
		showDialog: {
			get() {
				return this.modelValue;
			},
			set(value) {
				this.$emit('update:modelValue', value);
			}
		}
	}
};
</script>