feat: II login

dfinity · Oct 9, 2023 · 7b4cd13 · 7b4cd13
1 parent b80e255
commit 7b4cd13
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 14 deletions.
diff --git a/tools/ui/src/auth.ts b/tools/ui/src/auth.ts
@@ -1,9 +1,11 @@
 import { Principal } from "@dfinity/principal"
-import { authClient } from "./candid";
+import { authClient } from "./candid"
+import { refresh_actor } from "./index"
+import { dfinity_logo, copy_icon } from "./icons"
 
 export async function renderAuth(canisterId: Principal) {
   ;(await authClient?.isAuthenticated())
-    ? insertLogoutButton()
+    ? insertLogout()
     : insertLoginButton(canisterId)
 }
 
@@ -12,16 +14,24 @@ function insertLoginButton(canisterId: Principal) {
 
   const buttonLogin = document.createElement("button")
   buttonLogin.className = "btn"
-  buttonLogin.innerText = "Login with Internet Identity"
+  buttonLogin.innerHTML = `${dfinity_logo} Login with Internet Identity`
 
   buttonLogin.addEventListener("click", async () => {
     await login(canisterId)
   })
 
-  auth!.innerHTML = '';
+  auth!.innerHTML = ""
   auth!.appendChild(buttonLogin)
 }
 
+function insertLogout() {
+  const auth = document.getElementById("authentication")
+  auth!.innerHTML = ""
+
+  insertCopyId()
+  insertLogoutButton()
+}
+
 function insertLogoutButton() {
   const auth = document.getElementById("authentication")
 
@@ -33,20 +43,45 @@ function insertLogoutButton() {
     await logout()
   })
 
-  auth!.innerHTML = '';
   auth!.appendChild(buttonLogout)
 }
 
+function insertCopyId() {
+  if (!authClient) {
+    return
+  }
+
+  const auth = document.getElementById("authentication")
+
+  const copyText = document.createElement("span")
+
+  const id = authClient.getIdentity().getPrincipal().toString()
+  const idShort = id.slice(0, 5) + "..." + id.slice(-5)
+  copyText.innerText = idShort
+
+  const copyButton = document.createElement("button")
+  copyButton.innerHTML = `${copy_icon}`
+
+  copyButton.addEventListener("click", function () {
+    navigator.clipboard.writeText(id).catch((err) => {
+      console.error(err)
+    })
+  })
+
+  auth?.appendChild(copyText)
+  auth?.appendChild(copyButton)
+}
+
 async function login(canisterId: Principal) {
   const identityProvider = "https://identity.ic0.app"
   const derivationOrigin = "https://" + canisterId.toString() + ".raw.icp0.io"
 
   authClient?.login({
     identityProvider,
     derivationOrigin,
-    onSuccess: async() => {
-        window.location.reload()
-        console.log(authClient?.getIdentity())
+    onSuccess: async () => {
+      refresh_actor(canisterId)
+      await insertLogout()
     },
     onError: (err) => console.error(err),
   })

diff --git a/tools/ui/src/candid.ts b/tools/ui/src/candid.ts
@@ -84,6 +84,8 @@ export async function fetchActor(canisterId: Principal): Promise<ActorSubclass>
   authClient = authClient ?? (await AuthClient.create())
   if (await authClient.isAuthenticated()) {
     agent.replaceIdentity(authClient.getIdentity());
+    console.log("Authenticated with Internet Identity Principal")
+    console.log(authClient.getIdentity().getPrincipal().toString())
   }
 
   return Actor.createActor(candid.idlFactory, { agent, canisterId });

diff --git a/tools/ui/src/icons.ts b/tools/ui/src/icons.ts
@@ -0,0 +1,21 @@
+export const dfinity_logo = `
+<svg width="28" height="14" viewBox="0 0 358.8 179.8" xmlns="http://www.w3.org/2000/svg">
+  <linearGradient id="g1" x1="224.7853" y1="257.7536" x2="348.0663" y2="133.4581" gradientTransform="matrix(1 0 0 -1 0 272)">
+    <stop offset="0.21" stop-color="#F15A24"/>
+    <stop offset="0.6841" stop-color="#FBB03B"/>
+  </linearGradient>
+  <path fill="url(#g1)" d="M271.6,0c-20,0-41.9,10.9-65,32.4c-10.9,10.1-20.5,21.1-27.5,29.8c0,0,11.2,12.9,23.5,26.8 c6.7-8.4,16.2-19.8,27.3-30.1c20.5-19.2,33.9-23.1,41.6-23.1c28.8,0,52.2,24.2,52.2,54.1c0,29.6-23.4,53.8-52.2,54.1 c-1.4,0-3-0.2-5-0.6c8.4,3.9,17.5,6.7,26,6.7c52.8,0,63.2-36.5,63.8-39.1c1.5-6.7,2.4-13.7,2.4-20.9C358.6,40.4,319.6,0,271.6,0z"/>
+  <linearGradient id="g2" x1="133.9461" y1="106.4262" x2="10.6653" y2="230.7215" gradientTransform="matrix(1 0 0 -1 0 272)">
+    <stop offset="0.21" stop-color="#ED1E79"/>
+    <stop offset="0.8929" stop-color="#522785"/>
+  </linearGradient>
+  <path fill="url(#g2)" d="M87.1,179.8c20,0,41.9-10.9,65-32.4c10.9-10.1,20.5-21.1,27.5-29.8c0,0-11.2-12.9-23.5-26.8 c-6.7,8.4-16.2,19.8-27.3,30.1c-20.5,19-34,23.1-41.6,23.1c-28.8,0-52.2-24.2-52.2-54.1c0-29.6,23.4-53.8,52.2-54.1 c1.4,0,3,0.2,5,0.6c-8.4-3.9-17.5-6.7-26-6.7C13.4,29.6,3,66.1,2.4,68.8C0.9,75.5,0,82.5,0,89.7C0,139.4,39,179.8,87.1,179.8z"/>
+  <path fill="#29ABE2" d="M127.3,59.7c-5.8-5.6-34-28.5-61-29.3C18.1,29.2,4,64.2,2.7,68.7C12,29.5,46.4,0.2,87.2,0 c33.3,0,67,32.7,91.9,62.2c0,0,0.1-0.1,0.1-0.1c0,0,11.2,12.9,23.5,26.8c0,0,14,16.5,28.8,31c5.8,5.6,33.9,28.2,60.9,29 c49.5,1.4,63.2-35.6,63.9-38.4c-9.1,39.5-43.6,68.9-84.6,69.1c-33.3,0-67-32.7-92-62.2c0,0.1-0.1,0.1-0.1,0.2 c0,0-11.2-12.9-23.5-26.8C156.2,90.8,142.2,74.2,127.3,59.7z M2.7,69.1c0-0.1,0-0.2,0.1-0.3C2.7,68.9,2.7,69,2.7,69.1z"/>
+</svg>
+`
+
+export const copy_icon = `
+<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+</svg>
+`
diff --git a/tools/ui/src/index.ts b/tools/ui/src/index.ts
@@ -1,6 +1,9 @@
 import { fetchActor, render, getCycles, getNames } from "./candid";
 import { renderAuth } from "./auth";
 import { Principal } from "@dfinity/principal";
+import { ActorSubclass } from "@dfinity/agent";
+
+let actor: ActorSubclass | undefined;
 
 async function main() {
   const params = new URLSearchParams(window.location.search);
@@ -38,7 +41,7 @@ async function main() {
     document.title = `Canister ${cid}`;
     const canisterId = Principal.fromText(cid);
     const profiling = await getCycles(canisterId);
-    const actor = await fetchActor(canisterId);
+    actor = await fetchActor(canisterId);
     await renderAuth(canisterId);
     const names = await getNames(canisterId);
     render(canisterId, actor, profiling);
@@ -67,3 +70,7 @@ window.addEventListener("popstate", (event) => {
     window.location.reload();
   }
 });
+
+export async function refresh_actor(canisterId: Principal) {
+  actor = await fetchActor(canisterId);
+};
diff --git a/tools/ui/target_test_canister/main.mo b/tools/ui/target_test_canister/main.mo
@@ -1,9 +1,10 @@
 import Principal "mo:base/Principal";
 import Error "mo:base/Error";
 import Text "mo:base/Text";
+import Blob "mo:base/Blob";
 
 actor {
-    let owner = Principal.fromText("m4ul7-aqaaa-aaaal-qcewq-cai");
+    let owner = Principal.fromText("oigup-gpnce-ytl3m-gkuwt-hf4yc-lci5d-ijsy5-oc4ak-kz3v2-fjbl5-mae");
 
     public shared query ({ caller }) func hello() : async Text {
         if (caller != owner) {
@@ -25,22 +26,31 @@ actor {
         status_code : Nat16;
         headers : [(Text, Text)];
         body : Blob;
+        upgrade : ?Bool;
     };
 
-    public func http_request(req : HttpRequest) : async HttpResponse {
+    public query func http_request(req : HttpRequest) : async HttpResponse {
+        {
+            status_code = 200;
+            headers = [];
+            upgrade = ?true;
+            body = Text.encodeUtf8("");
+        };
+    };
+
+    public func http_request_update(req : HttpRequest) : async HttpResponse {
         if (req.url == "/.well-known/ii-alternative-origins") {
             return {
                 status_code = 200;
-                headers = [
-                    ("Access-Control-Allow-Origin", "https://identity.ic0.app")
-                ];
+                headers = [("Access-Control-Allow-Origin", "https://identity.ic0.app")];
                 body = Text.encodeUtf8(
                     "{
   \"alternativeOrigins\": [
     \"https://m4ul7-aqaaa-aaaal-qcewq-cai.raw.icp0.io\"
   ]
 }"
                 );
+                upgrade = ?false;
             };
         } else {
             throw Error.reject("Not found");