Skip to content

feat: move server settings into modal #4978

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
IMB11 wants to merge 1 commit into
base: cal/dev-588
Choose a base branch
from
Draft

feat: move server settings into modal #4978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
389 changes: 175 additions & 214 deletions apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
View file
Open in desktop

Large diffs are not rendered by default.

43 changes: 19 additions & 24 deletions apps/frontend/src/pages/hosting/manage/[id]/options/info.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
>
<div class="flex flex-col gap-2">
<span class="cursor-pointer font-bold text-contrast">
{{ data?.sftp_host }}
{{ server.sftp_host }}
</span>

<span class="text-xs text-secondary">Server Address</span>
Expand All @@ -33,7 +33,7 @@
<ButtonStyled type="transparent">
<button
v-tooltip="'Copy SFTP server address'"
@click="copyToClipboard('Server address', data?.sftp_host)"
@click="copyToClipboard('Server address', server.sftp_host)"
>
<CopyIcon class="h-5 w-5 hover:cursor-pointer" />
</button>
Expand All @@ -45,13 +45,13 @@
>
<div class="flex h-8 items-center justify-between">
<span class="font-bold text-contrast">
{{ data?.sftp_username }}
{{ server.sftp_username }}
</span>

<ButtonStyled type="transparent">
<button
v-tooltip="'Copy SFTP username'"
@click="copyToClipboard('Username', data?.sftp_username)"
@click="copyToClipboard('Username', server.sftp_username)"
>
<CopyIcon class="h-5 w-5 hover:cursor-pointer" />
</button>
Expand All @@ -65,15 +65,15 @@
<div class="flex h-8 items-center justify-between">
<span class="font-bold text-contrast">
{{
showPassword ? data?.sftp_password : '*'.repeat(data?.sftp_password?.length ?? 0)
showPassword ? server.sftp_password : '*'.repeat(server.sftp_password?.length ?? 0)
}}
</span>

<div class="flex flex-row items-center gap-1">
<ButtonStyled type="transparent">
<button
v-tooltip="'Copy SFTP password'"
@click="copyToClipboard('Password', data?.sftp_password)"
@click="copyToClipboard('Password', server.sftp_password)"
>
<CopyIcon class="h-5 w-5 hover:cursor-pointer" />
</button>
Expand Down Expand Up @@ -118,40 +118,35 @@

<script setup lang="ts">
import { CopyIcon, ExternalIcon, EyeIcon, EyeOffIcon } from '@modrinth/assets'
import { ButtonStyled, CopyCode, injectNotificationManager } from '@modrinth/ui'

import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
import { ButtonStyled, CopyCode, injectModrinthServerContext, injectNotificationManager } from '@modrinth/ui'

const { addNotification } = injectNotificationManager()
const props = defineProps<{
server: ModrinthServer
}>()
const { server, serverId } = injectModrinthServerContext()

const data = computed(() => props.server.general)
const showPassword = ref(false)

const openSftp = () => {
const sftpUrl = `sftp://${data.value?.sftp_username}@${data.value?.sftp_host}`
function openSftp() {
const sftpUrl = `sftp://${server.value.sftp_username}@${server.value.sftp_host}`
window.open(sftpUrl, '_blank')
}

const togglePassword = () => {
function togglePassword() {
showPassword.value = !showPassword.value
}

const copyToClipboard = (name: string, textToCopy?: string) => {
function copyToClipboard(name: string, textToCopy?: string) {
navigator.clipboard.writeText(textToCopy || '')
addNotification({
type: 'success',
title: `${name} copied to clipboard!`,
})
}

const properties = [
{ name: 'Server ID', value: props.server.serverId ?? 'Unknown' },
{ name: 'Node', value: data.value?.node?.instance ?? 'Unknown' },
{ name: 'Kind', value: data.value?.upstream?.kind ?? data.value?.loader ?? 'Unknown' },
{ name: 'Project ID', value: data.value?.upstream?.project_id ?? 'Unknown' },
{ name: 'Version ID', value: data.value?.upstream?.version_id ?? 'Unknown' },
]
const properties = computed(() => [
{ name: 'Server ID', value: serverId ?? 'Unknown' },
{ name: 'Node', value: server.value.node?.instance ?? 'Unknown' },
{ name: 'Kind', value: server.value.upstream?.kind ?? server.value.loader ?? 'Unknown' },
{ name: 'Project ID', value: server.value.upstream?.project_id ?? 'Unknown' },
{ name: 'Version ID', value: server.value.upstream?.version_id ?? 'Unknown' },
])
</script>
Loading
Loading