reset error on retry, keyframes

apps/login/tailwind.config.js

@@ -50,6 +50,28 @@ module.exports = {
   theme: {
     extend: {
       colors,
+      animation: {
+        shake: "shake .8s cubic-bezier(.36,.07,.19,.97) both;",
+      },
+      keyframes: {
+        shake: {
+          "10%, 90%": {
+            transform: "translate3d(-1px, 0, 0)",
+          },
+
+          "20%, 80%": {
+            transform: "translate3d(2px, 0, 0)",
+          },
+
+          "30%, 50%, 70%": {
+            transform: "translate3d(-4px, 0, 0)",
+          },
+
+          "40%, 60%": {
+            transform: "translate3d(4px, 0, 0)",
+          },
+        },
+      },
     },
   },
   plugins: [require("@tailwindcss/forms")],

apps/login/ui/GlobalNav.tsx

@@ -13,7 +13,7 @@ export function GlobalNav() {
   const close = () => setIsOpen(false);
 
   return (
-    <div className="fixed top-0 z-10 flex w-full flex-col border-b border-divider-light dark:border-divider-dark bg-background-light-700 dark:bg-background-dark-700 lg:bottom-0 lg:z-auto lg:w-72 lg:border-r">
+    <div className="fixed top-0 z-10 flex w-full flex-col border-b border-divider-light dark:border-divider-dark bg-white/80 dark:bg-black/80 lg:bottom-0 lg:z-auto lg:w-72 lg:border-r">
       <div className="flex h-14 items-center py-4 px-4 lg:h-auto">
         <Link
           href="/"
@@ -46,7 +46,7 @@ export function GlobalNav() {
 
       <div
         className={clsx("overflow-y-auto lg:static lg:block", {
-          "fixed inset-x-0 bottom-0 top-14 mt-px bg-background-light-500 dark:bg-background-dark-500":
+          "fixed inset-x-0 bottom-0 top-14 mt-px bg-white/80 dark:bg-black/80 backdrop-blur-lg":
             isOpen,
           hidden: !isOpen,
         })}

apps/login/ui/PasswordForm.tsx

@@ -28,6 +28,7 @@ export default function PasswordForm({ loginName }: Props) {
   const router = useRouter();
 
   async function submitPassword(values: Inputs) {
+    setError("");
     setLoading(true);
     const res = await fetch("/session", {
       method: "PUT",
@@ -62,7 +63,7 @@ export default function PasswordForm({ loginName }: Props) {
 
   return (
     <form className="w-full">
-      <div className="">
+      <div className={`${error && "transform-gpu animate-shake"}`}>
         <TextInput
           type="password"
           autoComplete="password"