Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge pull request #909 from scshiv29-dev/main

Browse Source 
changed copypassword fields in databases
This commit is contained in:
Andras Bacsai 2023-02-20 09:06:35 +01:00 committed by GitHub
commit c3e0237696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 161 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apps/ui/src/lib/components/CopyVolumeField.svelte Normal file
View File

@ -0,0 +1,38 @@
<script>
import { addToast } from '$lib/store';
export let value = "";
let isHttps = window.location.protocol === 'https:';
function copyToClipboard() {
if (isHttps && navigator.clipboard) {
navigator.clipboard.writeText(value);
addToast({
message: 'Copied to clipboard.',
type: 'success'
});
}
}
</script>
<style>
.box {
position: relative;
border: 1px dashed #202020;
border-radius: 5px;
padding: 5px;
}
</style>
<div class="w-full relative box">
<p class="text-white p-2">{value}</p>
<div class="absolute top-0 right-0 flex justify-center items-center h-full cursor-pointer text-stone-600 mr-3">
<div on:click={copyToClipboard}>
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="stroke-gray-700 hover:stroke-white">
<path fill="none" stroke-width="2" d="M9,15 L17,15 L9,15 Z M9,11 L19,11 L9,11 Z M9,7 L13,7 L9,7 Z M16,1 L16,7 L22,7 M6,5 L2,5 L2,23 L18,23 L18,19 M22,19 L6,19 L6,1 L17,1 L22,6 L22,19 L22,19 Z"/>
</svg>
</div>
</div>
</div>

31
apps/ui/src/routes/applications/[id]/_Storage.svelte
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}

50
apps/ui/src/routes/databases/[id]/_Databases/_CouchDb.svelte
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>

24
apps/ui/src/routes/databases/[id]/_Databases/_EdgeDB.svelte
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>

34
apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
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"

16
apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
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"

36
apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
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"

28
apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
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"

6
apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
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"