changed copypassword fields in databases

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"