Adjust Candid UI login button (#535)

* Adjust Candid UI login button tooltip * Adjust hover animation * Adjust wording
dfinity · Mar 15, 2024 · 8e6b8a7 · 8e6b8a7
1 parent 6559b0d
commit 8e6b8a7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/tools/ui/src/auth/auth.ts b/tools/ui/src/auth/auth.ts
@@ -47,10 +47,10 @@ async function insertLoginForm() {
       provider = "https://identity.internetcomputer.org";
     }
     if (!provider) {
-      throw new Error("Please provide internet identity url in ii parameter");
+      throw new Error("Please provide a URL to your local Internet Identity service using the `ii` query parameter");
     }
     if (provider && !is_valid_url(provider)) {
-      throw new Error("Please provide a valid internet identity url in ii parameter");
+      throw new Error("Please provide a URL to your local Internet Identity service using the `ii` query parameter");
     }
     const cid = Principal.fromText(params.get("id")!);
     let origin = params.get("origin");
@@ -59,9 +59,9 @@ async function insertLoginForm() {
     }
     if (origin) {
       if (!is_valid_url(origin)) {
-        throw new Error("Please provide a valid derivationOrigin url in origin parameter");
+        throw new Error("Please provide a valid URL in the `origin` query parameter");
       }
-      buttonLogin.title = "derivationOrigin is enabled. Remember to disable alternative origin in the production canister.";
+      console.warn("`derivationOrigin` is enabled. Remember to disable alternative origins in the production canister.");
     }
 
     buttonLogin.addEventListener("click", async () => {
@@ -79,6 +79,7 @@ async function insertLoginForm() {
       await authClient?.login(config);
     });
   } catch (err) {
+    console.error(err);
     buttonLogin.disabled = true;
     buttonLogin.classList.add("disabled");
     buttonLogin.title = (err as any).toString();

diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
@@ -213,10 +213,11 @@ input[type='checkbox'] ~ .popup-form {
 }
 .btn-auth svg {
   transition: transform ease-out .05s;
+  transform: scale(.8);
 }
-.btn-auth:not(:hover) svg {
+.btn-auth:hover:not(.disabled) svg {
   transition: transform ease-out .1s;
-  transform: scale(.8);
+  transform: scale(.9);
 }
 button {
   padding: 0;