Adds a small password generator to the db password input area

studio/components/ui/PasswordStrengthBar.tsx

@@ -8,13 +8,15 @@ import { Typography } from '@supabase/ui'
 interface Props {
   passwordStrengthScore: number
   passwordStrengthMessage: string
-  password: string
+  password: string,
+  generateStrongPassword: () => void
 }
 
 const PasswordStrengthBar = ({
   passwordStrengthScore = 0,
   passwordStrengthMessage = '',
   password = '',
+  generateStrongPassword
 }: Props) => {
   return (
     <>
@@ -25,7 +27,7 @@ const PasswordStrengthBar = ({
           aria-valuenow={(PASSWORD_STRENGTH_PERCENTAGE as any)[passwordStrengthScore]}
           aria-valuetext={(PASSWORD_STRENGTH_PERCENTAGE as any)[passwordStrengthScore]}
           role="progressbar"
-          className="mb-2 bg-bg-alt-light dark:bg-bg-alt-dark rounded overflow-hidden transition-all border dark:border-dark"
+          className="mb-2 overflow-hidden transition-all border rounded bg-bg-alt-light dark:bg-bg-alt-dark dark:border-dark"
         >
           <div
             style={{
@@ -44,7 +46,7 @@ const PasswordStrengthBar = ({
       >
         {passwordStrengthMessage
           ? passwordStrengthMessage
-          : 'This is the password to your postgres database, so it must be a strong password and hard to guess.'}
+          : 'This is the password to your postgres database, so it must be a strong password and hard to guess.'} {' '} <button className='underline hover:decoration-2' onClick={generateStrongPassword}>Generate a password</button>.
       </Typography.Text>
     </>
   )

studio/package-lock.json

@@ -31,9 +31,10 @@
         "crypto-js": "^4.1.1",
         "dayjs": "^1.11.0",
         "file-saver": "^2.0.5",
+        "generate-password": "^1.7.0",
         "immutability-helper": "^3.1.1",
         "lodash": "^4.17.21",
-        "lottie-react": "^2.1.0",
+        "lottie-react": "^2.2.1",
         "markdown-table": "=2.0.0",
         "mobx": "^6.3.2",
         "mobx-react-lite": "^3.2.0",
@@ -15013,6 +15014,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/generate-password": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/generate-password/-/generate-password-1.7.0.tgz",
+      "integrity": "sha512-WPCtlfy0jexf7W5IbwxGUgpIDvsZIohbI2DAq2Q6TSlKKis+G4GT9sxvPxrZUGL8kP6WUXMWNqYnxY6DDKAdFA=="
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -19782,22 +19788,21 @@
       }
     },
     "node_modules/lottie-react": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.1.0.tgz",
-      "integrity": "sha512-sHDJb5aeh1letUIWqwidHoHZj07ZOZQoLuUgy0gqt9FB/XiCtAZ2+421Cn+ZkHR7anVvWljKhGgctQCtgFloUA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.2.1.tgz",
+      "integrity": "sha512-lAdIUw+zeHLX3gtyLkisa4QM9NkTUUeZTsEL53laBEsjIH4JibgwkioZuza8CtwZ7/cpPZRbCRXWKfiuaDZWww==",
       "dependencies": {
-        "lottie-web": "^5.7.3"
+        "lottie-web": "^5.8.1"
       },
       "peerDependencies": {
-        "prop-types": "^15.5.7",
-        "react": "^16.8.0",
-        "react-dom": "^16.8.0"
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
       }
     },
     "node_modules/lottie-web": {
-      "version": "5.7.14",
-      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.7.14.tgz",
-      "integrity": "sha512-J+QEPse7Rws0XvTqRJNtcE8cszb5FWYFHubEK6bgDJtw64/AQJ40aazbWXsWGBM4sm/PgLBLgmmhDU4QpLiieg=="
+      "version": "5.9.4",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.9.4.tgz",
+      "integrity": "sha512-bSs1ZTPifnBVejO1MnQHdfrKfcn02YTCmgOh2wcAEICqRA0V7GzDh8FnwXY6+EzT+i8XOunaIloo/5xC5YNbsA=="
     },
     "node_modules/lower-case": {
       "version": "2.0.2",
@@ -20380,6 +20385,12 @@
         }
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==",
+      "peer": true
+    },
     "node_modules/moo-color": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.2.tgz",
@@ -40570,6 +40581,11 @@
         }
       }
     },
+    "generate-password": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/generate-password/-/generate-password-1.7.0.tgz",
+      "integrity": "sha512-WPCtlfy0jexf7W5IbwxGUgpIDvsZIohbI2DAq2Q6TSlKKis+G4GT9sxvPxrZUGL8kP6WUXMWNqYnxY6DDKAdFA=="
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -44136,17 +44152,17 @@
       }
     },
     "lottie-react": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.1.0.tgz",
-      "integrity": "sha512-sHDJb5aeh1letUIWqwidHoHZj07ZOZQoLuUgy0gqt9FB/XiCtAZ2+421Cn+ZkHR7anVvWljKhGgctQCtgFloUA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.2.1.tgz",
+      "integrity": "sha512-lAdIUw+zeHLX3gtyLkisa4QM9NkTUUeZTsEL53laBEsjIH4JibgwkioZuza8CtwZ7/cpPZRbCRXWKfiuaDZWww==",
       "requires": {
-        "lottie-web": "^5.7.3"
+        "lottie-web": "^5.8.1"
       }
     },
     "lottie-web": {
-      "version": "5.7.14",
-      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.7.14.tgz",
-      "integrity": "sha512-J+QEPse7Rws0XvTqRJNtcE8cszb5FWYFHubEK6bgDJtw64/AQJ40aazbWXsWGBM4sm/PgLBLgmmhDU4QpLiieg=="
+      "version": "5.9.4",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.9.4.tgz",
+      "integrity": "sha512-bSs1ZTPifnBVejO1MnQHdfrKfcn02YTCmgOh2wcAEICqRA0V7GzDh8FnwXY6+EzT+i8XOunaIloo/5xC5YNbsA=="
     },
     "lower-case": {
       "version": "2.0.2",
@@ -44594,6 +44610,12 @@
       "integrity": "sha512-hwURgfmP2apX3HQrB55V9DN47kuN3C6KlQvI5UIfJRibXma72C/JudcNt2r9dWjAdFMrcZoz1ivvtXMCkJ2aQA==",
       "requires": {}
     },
+    "monaco-editor": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
+      "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==",
+      "peer": true
+    },
     "moo-color": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.2.tgz",

studio/package.json

@@ -35,9 +35,10 @@
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.0",
     "file-saver": "^2.0.5",
+    "generate-password": "^1.7.0",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
-    "lottie-react": "^2.1.0",
+    "lottie-react": "^2.2.1",
     "markdown-table": "=2.0.0",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",

studio/pages/new/[slug].tsx

@@ -35,6 +35,7 @@ import {
   NotOrganizationOwnerWarning,
   EmptyPaymentMethodWarning,
 } from 'components/interfaces/Organization/NewProject'
+import generator from 'generate-password';
 
 interface StripeCustomer {
   paymentMethods: any
@@ -193,6 +194,17 @@ const Wizard: NextPageWithLayout = () => {
     }
   }
 
+  function generateStrongPassword() {
+    const password = generator.generate({
+      length: 16,
+      numbers: true,
+      uppercase: true
+    });
+
+    setDbPass(password)
+    delayedCheckPasswordStrength(password)
+  }
+
   return (
     <Panel
       hideHeaderStyling
@@ -203,13 +215,13 @@ const Wizard: NextPageWithLayout = () => {
         </div>
       }
       footer={
-        <div key="panel-footer" className="flex w-full items-center justify-between">
+        <div key="panel-footer" className="flex items-center justify-between w-full">
           <Button type="default" onClick={() => Router.push('/')}>
             Cancel
           </Button>
           <div className="items-center space-x-3">
             {!projectCreationDisabled && (
-              <span className="text-scale-900 text-xs">You can rename your project later</span>
+              <span className="text-xs text-scale-900">You can rename your project later</span>
             )}
             <Button
               onClick={onClickNext}
@@ -224,7 +236,7 @@ const Wizard: NextPageWithLayout = () => {
     >
       <>
         <Panel.Content className="pt-0 pb-6">
-          <p className="text-scale-900 text-sm">
+          <p className="text-sm text-scale-900">
             Your project will have its own dedicated instance and full postgres database.
             <br />
             An API will be set up so you can easily interact with your new database.
@@ -232,12 +244,12 @@ const Wizard: NextPageWithLayout = () => {
           </p>
         </Panel.Content>
         {projectCreationDisabled ? (
-          <Panel.Content className="border-panel-border-interior-light dark:border-panel-border-interior-dark border-t pb-8">
+          <Panel.Content className="pb-8 border-t border-panel-border-interior-light dark:border-panel-border-interior-dark">
             <DisabledWarningDueToIncident title="Project creation is currently disabled" />
           </Panel.Content>
         ) : (
           <>
-            <Panel.Content className="Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark space-y-4 border-b border-t">
+            <Panel.Content className="space-y-4 border-t border-b Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark">
               {organizations.length > 0 && (
                 <Listbox
                   label="Organization"
@@ -262,7 +274,7 @@ const Wizard: NextPageWithLayout = () => {
             </Panel.Content>
             {canCreateProject && (
               <>
-                <Panel.Content className="Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark border-b border-t">
+                <Panel.Content className="border-t border-b Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <Input
                     id="project-name"
                     layout="horizontal"
@@ -275,9 +287,10 @@ const Wizard: NextPageWithLayout = () => {
                   />
                 </Panel.Content>
 
-                <Panel.Content className="Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark border-b">
+                <Panel.Content className="border-b Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <Input
                     id="password"
+                    copy
                     layout="horizontal"
                     label="Database Password"
                     type="password"
@@ -289,13 +302,14 @@ const Wizard: NextPageWithLayout = () => {
                         passwordStrengthScore={passwordStrengthScore}
                         password={dbPass}
                         passwordStrengthMessage={passwordStrengthMessage}
+                        generateStrongPassword={generateStrongPassword}
                       />
                     }
                     error={passwordStrengthWarning}
                   />
                 </Panel.Content>
 
-                <Panel.Content className="Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark border-b">
+                <Panel.Content className="border-b Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <Listbox
                     layout="horizontal"
                     label="Region"