TEMPORARY UI - needs rebase

tools/cldr-apps/js/src/views/SignCla.vue

@@ -12,6 +12,12 @@
       message="Your organization has signed the CLA, it may not be modified."
       show-icon
     />
+    <a-alert
+      v-else-if="userGithubSign"
+      type="success"
+      :message="'The CLA was signed as the GitHub user @' + userGithubSign"
+      show-icon
+    />
     <a-alert
       v-else
       type="success"
@@ -114,22 +120,32 @@ const userName = ref(user?.name);
 const userEmail = ref(user?.email);
 let userEmployer = ref(user?.org);
 let userSign = ref(0);
+let userGithubSign = ref(null);
 const radioStyle = {
   display: "flex",
 };
 
 async function loadData() {
   if (!user) return;
   loading.value = true;
-  const { corporate, email, employer, name, readonly, unauthorized, signed } =
-    await cldrCla.getCla();
+  const {
+    corporate,
+    email,
+    employer,
+    name,
+    readonly,
+    unauthorized,
+    signed,
+    github,
+  } = await cldrCla.getCla();
   loading.value = false;
   if (unauthorized || !signed) return;
   readonlyCla.value = readonly;
   userName.value = name;
   userEmail.value = email;
   userEmployer.value = employer;
   userSign.value = corporate ? 1 : 2;
+  userGithubSign = github;
 }
 
 // load the existing signing data

tools/cldr-apps/js/src/views/TestPanel.vue

@@ -10,15 +10,68 @@
 
   </CldrRows> -->
   </div>
+  <a v-if="loginUrl" :href="loginUrl">Login with GitHub…</a>
+  {{ loginUrl }}
+  <a-spin v-if="!loginUrl" />
+  <hr />
+
+  <p v-if="code">Code: {{ code }}</p>
+  <p>Session: {{ sessionId }}</p>
+  <p v-if="githubSessionId">Github @{{ githubSessionId }}</p>
 </template>
 
 <script>
 import CldrRows from "./CldrRows.vue";
+import * as cldrClient from "../esm/cldrClient.mjs";
+import * as cldrStatus from "../esm/cldrStatus.mjs";
 
 export default {
   components: {
     CldrRows,
   },
+  data() {
+    return {
+      loginUrl: null,
+      code: null,
+      githubSessionId: null,
+    };
+  },
+  async mounted() {
+    const u = new URL(document.location);
+    if (u.searchParams.get("code")) {
+      this.code = u.searchParams.get("code");
+    }
+    this.client = await cldrClient.getClient();
+    try {
+      await this.updateLoginUrl();
+    } catch (e) {
+      console.error(e);
+      this.loginUrl = null; // TODO: error
+    }
+    try {
+      await this.updateGithubId();
+    } catch (e) {
+      this.githubSessionId = e.toString();
+    }
+  },
+  methods: {
+    async updateLoginUrl() {
+      const { url } = (await this.client.apis.auth.oauthUrl()).body;
+      const u = new URL(url);
+      // TODO: need to send app-relative location of /cldr-apps/github-login
+      // u.searchParams.set('redirect_uri', document.location.href);
+      this.loginUrl = u;
+    },
+    async updateGithubId() {
+      const { id } = (await this.client.apis.auth.oauthSession()).body;
+      this.githubSessionId = id;
+    },
+  },
+  computed: {
+    sessionId() {
+      return cldrStatus.getSessionId();
+    },
+  },
 };
 </script>