DatabasePasswordInput() — supabase Function Reference

Architecture documentation for the DatabasePasswordInput() function in DatabasePasswordInput.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ DatabasePasswordInput() — supabase Function Reference

Dependency Diagram

graph TD
  8fd8580c_faf1_b1c9_7e47_3f97ae36bc45["DatabasePasswordInput()"]
  537a9369_7861_9dbc_9f5f_8cee90710c24["updatePasswordStrength()"]
  8fd8580c_faf1_b1c9_7e47_3f97ae36bc45 -->|calls| 537a9369_7861_9dbc_9f5f_8cee90710c24
  style 8fd8580c_faf1_b1c9_7e47_3f97ae36bc45 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/ProjectCreation/DatabasePasswordInput.tsx lines 37–92

export const DatabasePasswordInput = ({ form }: DatabasePasswordInputProps) => {
  // [Refactor] DB Password could be a common component used in multiple pages with repeated logic
  async function generatePassword() {
    const password = generateStrongPassword()
    form.setValue('dbPass', password)

    updatePasswordStrength(form, password)
  }

  return (
    <Panel.Content>
      <FormField_Shadcn_
        control={form.control}
        name="dbPass"
        render={({ field }) => {
          const isInvalidDatabasePassword =
            field.value.length > 0 && !field.value.match(DATABASE_PASSWORD_REGEX)

          return (
            <FormItemLayout
              label="Database password"
              layout="horizontal"
              description={
                <>
                  {isInvalidDatabasePassword && <SpecialSymbolsCallout />}
                  <PasswordStrengthBar
                    passwordStrengthScore={form.getValues('dbPassStrength')}
                    password={field.value}
                    passwordStrengthMessage={form.getValues('dbPassStrengthMessage')}
                    generateStrongPassword={generatePassword}
                  />
                </>
              }
            >
              <FormControl_Shadcn_>
                <Input
                  copy={field.value.length > 0}
                  type="password"
                  placeholder="Type in a strong password"
                  {...field}
                  autoComplete="off"
                  onChange={async (event) => {
                    const newValue = event.target.value
                    field.onChange(event)

                    updatePasswordStrength(form, newValue)
                  }}
                />
              </FormControl_Shadcn_>
            </FormItemLayout>
          )
        }}
      />
    </Panel.Content>
  )
}