chore: generateSecurePassword

Author: wzrdx

src/components/create-job/steps/deployment/ServiceDeployment.tsx

@@ -39,7 +39,9 @@ function ServiceDeployment({ isEditingJob }: { isEditingJob?: boolean }) {
                 <AppParametersSection />
             </SlateCard>
 
-            {containerOrWorkerType.inputs && <ServiceInputsSection inputs={containerOrWorkerType.inputs} />}
+            {containerOrWorkerType.inputs && (
+                <ServiceInputsSection inputs={containerOrWorkerType.inputs} isEditingJob={isEditingJob} />
+            )}
 
             {/* <SlateCard title="Other">
                 <InputWithLabel name="deployment.serviceReplica" label="Service Replica" placeholder="0x_ai" isOptional />

src/components/draft/job-lists/ServiceDraftJobsList.tsx

@@ -1,4 +1,4 @@
-import { ContainerOrWorkerType } from '@data/containerResources';
+import { Service } from '@data/containerResources';
 import { DeploymentContextType, useDeploymentContext } from '@lib/contexts/deployment';
 import { getContainerOrWorkerType, getContainerOrWorkerTypeDescription } from '@lib/deeploy-utils';
 import { applyWidthClasses } from '@lib/utils';
@@ -32,10 +32,7 @@ export default function ServiceDraftJobsList({ jobs }: { jobs: ServiceDraftJob[]
             jobs={jobs}
             renderJob={(job) => {
                 const serviceJob = job as ServiceDraftJob;
-                const containerOrWorkerType: ContainerOrWorkerType = getContainerOrWorkerType(
-                    serviceJob.jobType,
-                    serviceJob.specifications,
-                );
+                const containerOrWorkerType: Service = getContainerOrWorkerType(serviceJob.jobType, serviceJob.specifications);
 
                 return (
                     <>

src/components/project/job-lists/ServiceRunningJobsList.tsx

@@ -1,3 +1,4 @@
+import { Service } from '@data/containerResources';
 import { getContainerOrWorkerTypeDescription } from '@lib/deeploy-utils';
 import { applyWidthClasses } from '@lib/utils';
 import RunningJobsList from '@shared/jobs/projects/RunningJobsList';
@@ -34,6 +35,7 @@ function ServiceRunningJobsList({ jobs }: { jobs: RunningJobWithResources[] }) {
             }}
             renderJob={(job) => {
                 const { containerOrWorkerType } = job.resources;
+                const service: Service = containerOrWorkerType as Service;
                 const targetNodes = Number(job.numberOfNodesRequested);
 
                 return (
@@ -46,7 +48,7 @@ function ServiceRunningJobsList({ jobs }: { jobs: RunningJobWithResources[] }) {
                         </div>
 
                         <div className={widthClasses[2]}>
-                            <SmallTag variant={containerOrWorkerType.notesColor}>{containerOrWorkerType.dbSystem}</SmallTag>
+                            <SmallTag variant={service.notesColor}>{service.dbSystem}</SmallTag>
                         </div>
 
                         <div className={widthClasses[3]}>

src/lib/utils.tsx

@@ -100,3 +100,35 @@ export const extractRepositoryPath = (url: string): string => {
         return url;
     }
 };
+
+/**
+ * Generates a random secure password with the specified length
+ * @param length - The length of the password (default: 24)
+ * @returns A secure password string
+ */
+function generateSecurePassword(length: number = 24): string {
+    const lowercase = 'abcdefghijklmnopqrstuvwxyz';
+    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const numbers = '0123456789';
+    const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>?';
+
+    const allChars = lowercase + uppercase + numbers + symbols;
+
+    // Ensure at least one character from each category
+    let password = '';
+    password += lowercase[Math.floor(Math.random() * lowercase.length)];
+    password += uppercase[Math.floor(Math.random() * uppercase.length)];
+    password += numbers[Math.floor(Math.random() * numbers.length)];
+    password += symbols[Math.floor(Math.random() * symbols.length)];
+
+    // Fill the rest with random characters
+    for (let i = 4; i < length; i++) {
+        password += allChars[Math.floor(Math.random() * allChars.length)];
+    }
+
+    // Shuffle the password to randomize the position of required characters
+    return password
+        .split('')
+        .sort(() => Math.random() - 0.5)
+        .join('');
+}

src/shared/jobs/ServiceInputsSection.tsx

@@ -4,7 +4,13 @@ import { KeyValueEntryWithId } from '@typedefs/deeploys';
 import { useEffect } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
-export default function ServiceInputsSection({ inputs }: { inputs: { key: string; label: string }[] }) {
+export default function ServiceInputsSection({
+    inputs,
+    isEditingJob,
+}: {
+    inputs: { key: string; label: string }[];
+    isEditingJob?: boolean;
+}) {
     const { control, setValue } = useFormContext();
 
     const { fields } = useFieldArray({
@@ -17,21 +23,39 @@ export default function ServiceInputsSection({ inputs }: { inputs: { key: string
     useEffect(() => {
         setValue(
             'deployment.inputs',
-            inputs.map((input) => ({ key: input.key, value: '' })),
+            inputs.map((input) => {
+                // let value = '';
+
+                if (!isEditingJob && input.key.toLowerCase().includes('password')) {
+                    // TODO: Only generate it if no default value (editing flow) exists
+                    // value = generateSecurePassword();
+                }
+
+                return { key: input.key, value: '' };
+            }),
         );
     }, [inputs]);
 
     return (
         <SlateCard title="Service Inputs">
-            {typedFields.map((field, index) => (
-                <div key={field.id}>
-                    <InputWithLabel
-                        name={`deployment.inputs.${index}.value`}
-                        label={inputs[index].label}
-                        placeholder="Required"
-                    />
+            <div className="col gap-4">
+                <div className="col gap-2">
+                    {typedFields.map((field, index) => (
+                        <div key={field.id}>
+                            <InputWithLabel
+                                name={`deployment.inputs.${index}.value`}
+                                label={inputs[index].label}
+                                placeholder="Required"
+                            />
+                        </div>
+                    ))}
                 </div>
-            ))}
+
+                {/* TODO: Display after the input becomes dirty */}
+                {inputs.some((input) => input.key.toLowerCase().includes('password')) && (
+                    <div className="text-sm text-slate-500">Don't forget to save your auto-generated password.</div>
+                )}
+            </div>
         </SlateCard>
     );
 }