cat123cat

src/routes/cms/register.svelte

@@ -1,3 +1,7 @@
+<script>
+    let showPasswdTooltip = false;
+</script>
+
 <style>
     input {
         display: block;
@@ -13,6 +17,28 @@
     div.content {
         max-width: 40rem;
     }
+    .form-row {
+        position: relative;
+    }
+    .tooltip {
+        position: absolute;
+        left: calc(70% + 50px);
+        background: white;
+        border: solid black 1px;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 4px;
+    }
+    .tooltip::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 100%;
+        margin-top: -8px;
+        border-width: 8px;
+        border-style: solid;
+        border-color: transparent black transparent transparent;
+    }
 </style>
 
 <svelte:head>
@@ -24,7 +50,16 @@
     <form method="POST" action="/cms/register">
         <input required type="text" name="realname" placeholder="Real Name">
         <input required type="text" name="username" placeholder="Username">
-        <input required type="password" name="password" placeholder="Password">
+        <div class="form-row">
+            <input required type="password" name="password" placeholder="Password"
+                   on:focus={() => { showPasswdTooltip = true }}
+                   on:blur={() => { showPasswdTooltip = false }}>
+            {#if showPasswdTooltip}
+                <div class="tooltip" class:visible={showPasswdTooltip}>
+                    We recommend using a strong password, like <code>cat123cat</code>
+                </div>
+            {/if}
+        </div>
         <input required type="password" name="password_confirm" placeholder="Confirm Password">
         <button type="submit">Submit</button>
     </form>