client/web: add advanced login options

This adds an expandable section of the login view to allow users to
specify an auth key and an alternate control URL.

Input and Collapsible components and accompanying styles were brought
over from the adminpanel.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>

client/web/src/index.css

@@ -45,7 +45,7 @@
   }
 
   .description {
-    @apply text-neutral-500 leading-snug
+    @apply text-neutral-500 leading-snug;
   }
 
   /**
@@ -144,6 +144,48 @@
   .toggle-small:checked:enabled:active::after {
     @apply w-[0.675rem] translate-x-[0.55rem];
   }
+
+  /**
+   * .input defines default text input field styling. These styles should
+   * correspond to .button, sharing a similar height and rounding, since .input
+   * and .button are commonly used together.
+   */
+
+  .input,
+  .input-wrapper {
+    @apply appearance-none leading-tight rounded-md bg-white border border-gray-300 hover:border-gray-400 transition-colors w-full h-input;
+  }
+
+  .input {
+    @apply px-3;
+  }
+
+  .input::placeholder,
+  .input-wrapper::placeholder {
+    @apply text-gray-400;
+  }
+
+  .input:disabled,
+  .input-wrapper:disabled {
+    @apply border-gray-300;
+    @apply bg-gray-0;
+    @apply cursor-not-allowed;
+  }
+
+  .input:focus,
+  .input-wrapper:focus-within {
+    @apply outline-none ring border-gray-400;
+  }
+
+  .input-error {
+    @apply border-red-200;
+  }
+}
+
+@layer utilities {
+  .h-input {
+    @apply h-[2.375rem];
+  }
 }
 
 /**