Merge pull request #909 from scshiv29-dev/main

changed copypassword fields in databases

apps/ui/src/lib/components/CopyVolumeField.svelte

@@ -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>

apps/ui/src/routes/applications/[id]/_Storage.svelte

@@ -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
+					<CopyVolumeField 
-						readonly
-						class="w-full"
 						value="{storage.applicationId}{storage.path.replace(/\//gi, '-').replace('-app', '')}"
-					/>
+						/>
 				{:else}
-					<input
+				
-						disabled
+					<CopyVolumeField 
-						readonly
+					value="{storage.applicationId}{storage.path.replace(/\//gi, '-').replace('-app', '')}"
-						class="w-full"
-						value="{storage.applicationId}{storage.path.replace(/\//gi, '-')}"
 					/>
 				{/if}
 			{/if}

apps/ui/src/routes/databases/[id]/_Databases/_CouchDb.svelte

@@ -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}
+			readonly={$status.database.isRunning}
-			disabled={database.defaultDatabase}
+			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
+		readonly={$status.database.isRunning}
-			disabled
+		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
+		readonly={false}
-			disabled
+		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
+		readonly={$status.database.isRunning}
-			disabled
+		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
+		readonly={false}
-			disabled
+		disabled={false}
 			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="rootUserPassword"
 			name="rootUserPassword"
-			value={database.rootUserPassword}
+			bind:value={database.rootUserPassword}
 		/>
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_EdgeDB.svelte

@@ -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}
+			readonly={$status.database.isRunning}
-			disabled={database.defaultDatabase}
+			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
+		readonly={$status.database.isRunning}
-			disabled
+		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
+			>Root Password 	<Explainer explanation="Can be modified even when the database is active." /></label
-				explanation="Could be changed while the database is running."
-			/></label
 		>
 		<CopyPasswordField
-			readonly
+		readonly={false}
-			disabled
+		disabled={false}
 			placeholder="Generated automatically after start"
 			isPasswordField
 			id="rootUserPassword"
 			name="rootUserPassword"
-			value={database.rootUserPassword}
+			bind:value={database.rootUserPassword}
 		/>
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte

@@ -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}
+			readonly={$status.database.isRunning}
-			disabled={database.defaultDatabase}
+			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
+			readonly={$status.database.isRunning}
-			disabled
+			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={false}
-			readonly={!$status.database.isRunning}
+			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
+			readonly={$status.database.isRunning}
-			disabled
+			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={false}
-			readonly={!$status.database.isRunning}
+			disabled={false}
 			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="rootUserPassword"

apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte

@@ -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
+			readonly={$status.database.isRunning}
-			disabled
+			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}
+			disabled={false}
-			readonly={!$status.database.isRunning}
+			readonly={false}
 			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField={true}
 			id="rootUserPassword"

apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte

@@ -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}
+			readonly={$status.database.isRunning}
-			disabled={database.defaultDatabase}
+			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
+			readonly={$status.database.isRunning}
-			disabled
+			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}
+			disabled={false}
-			readonly={!$status.database.isRunning}
+			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
+			readonly={$status.database.isRunning}
-			disabled
+			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}
+			disabled={false}
-			readonly={!$status.database.isRunning}
+			readonly={false}
 			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="rootUserPassword"

apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte

@@ -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}
+			readonly={$status.database.isRunning}
-			disabled={database.defaultDatabase}
+			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
+				>Postgres User Password <Explainer explanation="Can be modified even when the database is active." /></label
-					explanation="Could be changed while the database is running."
-				/></label
 			>
 			<CopyPasswordField
-				disabled={!$status.database.isRunning}
+				readonly={false}
-				readonly={!$status.database.isRunning}
+				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
+			readonly={$status.database.isRunning}
-			disabled
+			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={false}
-			readonly={!$status.database.isRunning}
+			disabled={false}
 			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="dbUserPassword"

apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte

@@ -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={false}
-			readonly={!$status.database.isRunning}
+			disabled={false}
 			placeholder={$t('forms.generated_automatically_after_start')}
 			isPasswordField
 			id="dbUserPassword"