Merge pull request #909 from scshiv29-dev/main

changed copypassword fields in databases
This commit is contained in:
Andras Bacsai
2023-02-20 09:06:35 +01:00
committed by GitHub
9 changed files with 161 additions and 102 deletions

View File

@@ -7,12 +7,23 @@
import { del, post } from '$lib/api';
import { page } from '$app/stores';
import { createEventDispatcher } from 'svelte';
import { browser } from '$app/env';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { addToast } from '$lib/store';
import CopyVolumeField from '$lib/components/CopyVolumeField.svelte';
const { id } = $page.params;
let isHttps = browser && window.location.protocol === 'https:';
export let value: string;
function copyToClipboard() {
if (isHttps && navigator.clipboard) {
navigator.clipboard.writeText(value);
addToast({
message: 'Copied to clipboard.',
type: 'success'
});
}
}
const dispatch = createEventDispatcher();
async function saveStorage(newStorage = false) {
try {
@@ -69,18 +80,14 @@
<div class="flex gap-4 pb-2" class:pt-8={isNew}>
{#if storage.applicationId}
{#if storage.oldPath}
<input
disabled
readonly
class="w-full"
<CopyVolumeField
value="{storage.applicationId}{storage.path.replace(/\//gi, '-').replace('-app', '')}"
/>
/>
{:else}
<input
disabled
readonly
class="w-full"
value="{storage.applicationId}{storage.path.replace(/\//gi, '-')}"
<CopyVolumeField
value="{storage.applicationId}{storage.path.replace(/\//gi, '-').replace('-app', '')}"
/>
{/if}
{/if}

View File

@@ -2,6 +2,8 @@
export let database: any;
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import { t } from '$lib/translations';
import { status } from '$lib/store';
import Explainer from '$lib/components/Explainer.svelte';
</script>
<div class="flex space-x-1 py-5 font-bold">
@@ -9,11 +11,13 @@
</div>
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase">{$t('database.default_database')}</label>
<label for="defaultDatabase">{$t('database.default_database')}
<Explainer explanation="Can only be modified when the database is not active."/>
</label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
disabled={database.defaultDatabase}
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder="{$t('forms.eg')}: mydb"
id="defaultDatabase"
name="defaultDatabase"
@@ -21,49 +25,57 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser">{$t('forms.user')}</label>
<label for="dbUser">{$t('forms.user')}
<Explainer explanation="Can only be modified when the database is not active."/>
</label>
<CopyPasswordField
readonly
disabled
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder={$t('forms.generated_automatically_after_start')}
id="dbUser"
name="dbUser"
value={database.dbUser}
bind:value={database.dbUser}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword">{$t('forms.password')}</label>
<label for="dbUserPassword">{$t('forms.password')}
<Explainer explanation="Can be modified even when the database is active." />
</label>
<CopyPasswordField
readonly
disabled
readonly={false}
disabled={false}
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField
id="dbUserPassword"
name="dbUserPassword"
value={database.dbUserPassword}
bind:value={database.dbUserPassword}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser">{$t('forms.root_user')}</label>
<label for="rootUser">{$t('forms.root_user')}
<Explainer explanation="Can only be modified when the database is not active."/>
</label>
<CopyPasswordField
readonly
disabled
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder={$t('forms.generated_automatically_after_start')}
id="rootUser"
name="rootUser"
value={database.rootUser}
bind:value={database.rootUser}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword">{$t('forms.roots_password')}</label>
<label for="rootUserPassword">{$t('forms.roots_password')}
<Explainer explanation="Can be modified even when the database is active." />
</label>
<CopyPasswordField
readonly
disabled
readonly={false}
disabled={false}
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField
id="rootUserPassword"
name="rootUserPassword"
value={database.rootUserPassword}
bind:value={database.rootUserPassword}
/>
</div>
</div>

View File

@@ -11,11 +11,12 @@
</div>
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase">{$t('database.default_database')}</label>
<label for="defaultDatabase">{$t('database.default_database')}
<Explainer explanation="Can only be modified when the database is not active."/></label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
disabled={database.defaultDatabase}
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder="{$t('forms.eg')}: edgedb"
id="defaultDatabase"
name="defaultDatabase"
@@ -23,10 +24,11 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser">{$t('forms.root_user')}</label>
<label for="rootUser">{$t('forms.root_user')}
<Explainer explanation="Can only be modified when the database is not active."/></label>
<CopyPasswordField
readonly
disabled
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder={$t('forms.generated_automatically_after_start')}
id="rootUser"
name="rootUser"
@@ -35,18 +37,16 @@
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser"
>Root Password <Explainer
explanation="Could be changed while the database is running."
/></label
>Root Password <Explainer explanation="Can be modified even when the database is active." /></label
>
<CopyPasswordField
readonly
disabled
readonly={false}
disabled={false}
placeholder="Generated automatically after start"
isPasswordField
id="rootUserPassword"
name="rootUserPassword"
value={database.rootUserPassword}
bind:value={database.rootUserPassword}
/>
</div>
</div>

View File

@@ -12,12 +12,12 @@
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase"
>{$t('database.default_database')}</label
>{$t('database.default_database')}<Explainer explanation="Can only be modified when the database is not active."/></label
>
<CopyPasswordField
required
readonly={database.defaultDatabase}
disabled={database.defaultDatabase}
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder="{$t('forms.eg')}: mydb"
id="defaultDatabase"
name="defaultDatabase"
@@ -25,24 +25,24 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser" >{$t('forms.user')}</label>
<label for="dbUser" >{$t('forms.user')}<Explainer explanation="Can only be modified when the database is not active."/></label>
<CopyPasswordField
readonly
disabled
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder={$t('forms.generated_automatically_after_start')}
id="dbUser"
name="dbUser"
value={database.dbUser}
bind:value={database.dbUser}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword"
>{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label
<Explainer explanation="Can be modified even when the database is active." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
readonly={!$status.database.isRunning}
readonly={false}
disabled={false}
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField
id="dbUserPassword"
@@ -51,24 +51,24 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser" >{$t('forms.root_user')}</label>
<label for="rootUser" >{$t('forms.root_user')}<Explainer explanation="Can only be modified when the database is not active."/></label>
<CopyPasswordField
readonly
disabled
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder={$t('forms.generated_automatically_after_start')}
id="rootUser"
name="rootUser"
value={database.rootUser}
bind:value={database.rootUser}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword"
>{$t('forms.roots_password')}
<Explainer explanation="Could be changed while the database is running." /></label
<Explainer explanation="Can be modified even when the database is active." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
readonly={!$status.database.isRunning}
readonly={false}
disabled={false}
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField
id="rootUserPassword"

View File

@@ -11,24 +11,26 @@
</div>
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="rootUser">{$t('forms.root_user')}</label>
<label for="rootUser">{$t('forms.root_user')}
<Explainer explanation="Can only be modified when the database is not active." /></label
>
<CopyPasswordField
placeholder={$t('forms.generated_automatically_after_start')}
id="rootUser"
readonly
disabled
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
name="rootUser"
value={database.rootUser}
bind:value={database.rootUser}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword"
>{$t('forms.roots_password')}
<Explainer explanation="Could be changed while the database is running." /></label
<Explainer explanation="Can be modified even when the database is active." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
readonly={!$status.database.isRunning}
disabled={false}
readonly={false}
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField={true}
id="rootUserPassword"

View File

@@ -11,11 +11,11 @@
</div>
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase">{$t('database.default_database')}</label>
<label for="defaultDatabase">{$t('database.default_database')}<Explainer explanation="Can only be modified when the database is not active."/></label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
disabled={database.defaultDatabase}
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder="{$t('forms.eg')}: mydb"
id="defaultDatabase"
name="defaultDatabase"
@@ -23,24 +23,24 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser">{$t('forms.user')}</label>
<label for="dbUser">{$t('forms.user')}<Explainer explanation="Can only be modified when the database is not active."/></label>
<CopyPasswordField
readonly
disabled
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder={$t('forms.generated_automatically_after_start')}
id="dbUser"
name="dbUser"
value={database.dbUser}
bind:value={database.dbUser}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword"
>{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label
<Explainer explanation="Can be modified even when the database is active." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
readonly={!$status.database.isRunning}
disabled={false}
readonly={false}
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField
id="dbUserPassword"
@@ -49,24 +49,26 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser">{$t('forms.root_user')}</label>
<label for="rootUser">{$t('forms.root_user')}
<Explainer explanation="Can only be modified when the database is not active."/>
</label>
<CopyPasswordField
readonly
disabled
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder={$t('forms.generated_automatically_after_start')}
id="rootUser"
name="rootUser"
value={$appSession.isARM ? 'root' : database.rootUser}
bind:value={database.rootUser}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword"
>{$t('forms.roots_password')}
<Explainer explanation="Could be changed while the database is running." /></label
<Explainer explanation="Can be modified even when the database is active." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
readonly={!$status.database.isRunning}
disabled={false}
readonly={false}
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField
id="rootUserPassword"

View File

@@ -11,11 +11,11 @@
</div>
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase">{$t('database.default_database')}</label>
<label for="defaultDatabase">{$t('database.default_database')}<Explainer explanation="Can only be modified when the database is not active."/></label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
disabled={database.defaultDatabase}
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder="{$t('forms.eg')}: mydb"
id="defaultDatabase"
name="defaultDatabase"
@@ -25,13 +25,11 @@
{#if !$appSession.isARM}
<div class="grid grid-cols-2 items-center">
<label for="rootUser"
>Postgres User Password <Explainer
explanation="Could be changed while the database is running."
/></label
>Postgres User Password <Explainer explanation="Can be modified even when the database is active." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
readonly={!$status.database.isRunning}
readonly={false}
disabled={false}
placeholder="Generated automatically after start"
isPasswordField
id="rootUserPassword"
@@ -41,24 +39,24 @@
</div>
{/if}
<div class="grid grid-cols-2 items-center">
<label for="dbUser">{$t('forms.user')}</label>
<label for="dbUser">{$t('forms.user')}<Explainer explanation="Can only be modified when the database is not active."/></label>
<CopyPasswordField
readonly
disabled
readonly={$status.database.isRunning}
disabled={$status.database.isRunning}
placeholder={$t('forms.generated_automatically_after_start')}
id="dbUser"
name="dbUser"
value={database.dbUser}
bind:value={database.dbUser}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword"
>{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label
<Explainer explanation="Can be modified even when the database is active." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
readonly={!$status.database.isRunning}
readonly={false}
disabled={false}
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField
id="dbUserPassword"

View File

@@ -13,11 +13,11 @@
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword"
>{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label
<Explainer explanation="Can be modified even when the database is active." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
readonly={!$status.database.isRunning}
readonly={false}
disabled={false}
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField
id="dbUserPassword"