CLDR-16499 CLA wip - basic work

- update to client api to reduce excess
- improved cla flow

tools/cldr-apps/js/src/esm/cldrClient.mjs

@@ -3,6 +3,17 @@ import { getSessionId } from "./cldrStatus.mjs";
 import { SURVEY_TOOL_SESSION_HEADER } from "./cldrAjax.mjs";
 
 const OAS3_ROOT = "/openapi"; // Path to the 'openapi' (sibling to cldr-apps). Needs to be a host-relative URL.
+let client = null;
+
+function makeClient() {
+  return SwaggerClient(OAS3_ROOT, {
+    requestInterceptor: (obj) => {
+      // add the session header to each request
+      obj.headers[SURVEY_TOOL_SESSION_HEADER] = getSessionId();
+      return obj;
+    },
+  });
+}
 
 /**
  * Create a promise to a swagger client for ST operations.
@@ -16,13 +27,10 @@ const OAS3_ROOT = "/openapi"; // Path to the 'openapi' (sibling to cldr-apps). N
  * @returns Promise<SwaggerClient>
  */
 function getClient() {
-  return new SwaggerClient(OAS3_ROOT, {
-    requestInterceptor: (obj) => {
-      // add the session header to each request
-      obj.headers[SURVEY_TOOL_SESSION_HEADER] = getSessionId();
-      return obj;
-    },
-  });
+  if (!client) {
+    client = makeClient();
+  }
+  return client;
 }
 
 export { getClient };

tools/cldr-apps/js/src/esm/cldrNotify.mjs

@@ -36,12 +36,14 @@ const NO_TIMEOUT = 0;
  *
  * @param {String} message the title, displayed at the top
  * @param {String} description the more detailed description
+ * @param {Function} onClick optional function called when clicking
  */
-function open(message, description) {
+function open(message, description, onClick) {
   notification.open({
     message: message,
     description: description,
     duration: MEDIUM_DURATION,
+    onClick,
   });
 }
 

tools/cldr-apps/js/src/md/cla.md

@@ -1,6 +1,3 @@
-#### The Unicode Consortium
-#### Individual Contributor License Agreement
-
 Thank you for your interest in The Unicode Consortium, a nonprofit California corporation incorporated as Unicode, Inc. (hereafter "the Consortium"). In order to clarify the intellectual property license granted with Contributions from any person or entity, the Consortium must have a Contributor License Agreement (CLA) on file that has been executed by each Contributor, indicating agreement to the license terms below. This license is for your protection as a Contributor as well as the protection of the Consortium and its users; it does not change your rights to use your own Contributions for any other purpose. Read this document carefully before signing and keep a copy for your records.
 
 You accept and agree to the following terms and conditions for Your present and future Contributions submitted to the Consortium. Except for the license granted herein to the Consortium and recipients of products distributed by the Consortium, You reserve all right, title, and interest in and to Your Contributions.

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

@@ -8,6 +8,7 @@
       <li>
         <ul>
           <li><a href="#account///">Account Settings</a></li>
+          <li><a href="#cla///">Sign CLA</a></li>
         </ul>
       </li>
       <li v-if="!isAdmin && !accountLocked">

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

@@ -1,27 +1,53 @@
 <template>
   <div>
+    <a-alert
+      v-if="needCla"
+      type="warning"
+      message="Please read and sign the below CLA to begin contributing."
+      show-icon
+    />
+    <a-alert
+      v-else-if="readonlyCla"
+      type="info"
+      message="Your organization has signed the CLA, it may not be modified."
+      show-icon
+    />
+    <a-alert
+      v-else
+      type="success"
+      message="The CLA has been signed"
+      show-icon
+    />
+
+    <!-- CLA text -->
+    <a-spin v-if="loading" />
     <div class="cla" v-html="claHtml" />
     <hr />
-    <div v-if="needCla">
+    <div>
       Your Name:
-      <a-input v-model:value="userName">
+      <a-input :disabled="!needCla" v-model:value="userName">
         <template #prefix>
           <i class="glyphicon glyphicon-user" />
         </template>
       </a-input>
       Your Email:
-      <a-input v-model:value="userEmail">
+      <a-input :disabled="!needCla" v-model:value="userEmail">
         <template #prefix>
           <i class="glyphicon glyphicon-envelope" />
         </template>
       </a-input>
-      Your Employer (or 'none'):<a-input v-model:value="userEmployer">
+      Your Employer (or 'none'):<a-input
+        :disabled="!needCla"
+        v-model:value="userEmployer"
+      >
         <template #prefix>
           <i class="glyphicon glyphicon-briefcase" />
         </template>
       </a-input>
-      <i class="pleaseChoose" v-if="userSign == 0">Please choose one:</i><br />
-      <a-radio-group v-model:value="userSign">
+      <i class="pleaseChoose" v-if="needCla && userSign == 0"
+        >Please choose one:</i
+      ><br />
+      <a-radio-group :disabled="!needCla" v-model:value="userSign">
         <a-radio :style="radioStyle" :value="1">
           My employer has already signed the CLA and is listed on Unicode’s
           <a href="https://www.unicode.org/policies/corporate-cla-list/"
@@ -36,22 +62,41 @@
       <br />
       <button
         @click="sign"
-        v-if="userSign != 0 && userName && userEmail && userEmployer"
+        v-if="
+          needCla &&
+          userSign != 0 &&
+          userName &&
+          userEmail &&
+          userEmployer &&
+          !readonlyCla
+        "
       >
         Sign
       </button>
+      <a-alert
+        type="info"
+        v-else-if="needCla"
+        message="Please fill in the above fields."
+      />
       <hr />
     </div>
-    <div v-else>
-      <h2>The above CLA has already been signed.</h2>
-      <button @click="revoke">Revoke</button>
+    <div v-if="!needCla">
+      <a-alert
+        v-if="!readonlyCla"
+        type="warning"
+        message="If the CLA is revoked, you will not be able to continue contributing to CLDR. You will have an opportunity to re-sign if corrections are needed."
+      />
+      <button v-if="!readonlyCla" @click="revoke">Revoke</button>
     </div>
+    <a-spin v-if="loading" />
   </div>
 </template>
 
 <script setup>
 import * as cldrStatus from "../esm/cldrStatus.mjs";
 import * as cldrClient from "../esm/cldrClient.mjs";
+import * as cldrNotify from "../esm/cldrNotify.mjs";
+
 import { ref } from "vue";
 import { marked } from "../esm/cldrMarked.mjs";
 import claMd from "../md/cla.md";
@@ -62,52 +107,127 @@ const user = cldrStatus.getSurveyUser();
 
 if (!user) window.location.replace("#///"); // need a user
 
-let needCla = !user.claSigned;
-
-const userName = user.name;
-const userEmail = user.email;
-let userEmployer = user.org;
+let readonlyCla = ref(false);
+let needCla = ref(!user?.claSigned);
+let loading = ref(false);
+const userName = ref(user?.name);
+const userEmail = ref(user?.email);
+let userEmployer = ref(user?.org);
 let userSign = ref(0);
 const radioStyle = {
   display: "flex",
 };
 
-async function sign() {
+async function loadData() {
+  if (!user) return;
+  loading.value = true;
   const client = await cldrClient.getClient();
-  const result = await client.apis.user.signCla(
-    {},
-    {
-      requestBody: {
-        email: userEmail,
-        name: userName,
-        employer: userEmployer,
-        corporate: userSign == 1,
-        signed: null,
-      },
+  try {
+    const { body } = await client.apis.user.getCla();
+    const { corporate, email, employer, name, readonly, signed } = body;
+    readonlyCla.value = readonly;
+    userName.value = name;
+    userEmail.value = email;
+    userEmployer.value = employer;
+    userSign.value = corporate ? 1 : 2;
+  } catch (e) {
+    loading.value = false;
+    if (e.statusCode === 401) {
+      return; // unauthorized, nothing to do
+    } else if (e.statusCode === 404) {
+      // not signed
+      return;
+    } else {
+      throw e;
+    }
+  }
+  loading.value = false;
+}
+
+// load the existing signing data
+loadData().then(
+  () => {},
+  (err) => cldrNotify.exception(err, "Loading prior CLA data")
+);
+
+async function sign() {
+  loading.value = true;
+  try {
+    const client = await cldrClient.getClient();
+    const result = await client.apis.user.signCla(
+      {},
+      {
+        requestBody: {
+          email: userEmail.value, // unwrap refs
+          name: userName.value,
+          employer: userEmployer.value,
+          corporate: userSign == 1,
+        },
+      }
+    );
+    user.claSigned = true; // update global user obj
+    needCla.value = false;
+    cldrNotify.open(
+      `CLA Signed`,
+      `The CLA has been signed. You may now contribute to the SurveyTool!`,
+      () => (window.location.hash = "#///")
+    );
+  } catch (e) {
+    if (e.statusCode === 423) {
+      cldrNotify.error(
+        "CLA Sign error",
+        "Your organization has already signed the CLA, it cannot be modified."
+      );
+    } else if (e.statusCode == 406) {
+      cldrNotify.error(
+        "CLA Error",
+        `Double check your input fields, the CLA could not be signed.`
+      );
+    } else {
+      cldrNotify.exception(
+        e,
+        `${e.statusCode || "error"} trying to sign the CLA.`
+      );
     }
-  );
-  // assume OK! :)
-  needCla = false;
+  }
+  loading.value = false;
 }
 
 async function revoke() {
-  const client = await cldrClient.getClient();
-  const result = await client.apis.user.revokeCla();
-  needCla = true;
+  loading.value = true;
+  try {
+    const client = await cldrClient.getClient();
+    const result = await client.apis.user.revokeCla();
+    needCla.value = true;
+    user.claSigned = false; // update global user obj
+    cldrNotify.open(`CLA Revoked`, `The CLA has been revoked.`);
+  } catch (e) {
+    if (e.statusCode === 423) {
+      cldrNotify.error(
+        "CLA Revoke error",
+        "Your organization signed the CLA, it cannot be modified."
+      );
+    } else if (e.statusCode === 404) {
+      cldrNotify.error("CLA Revoke error", "You have not signed the CLA.");
+      needCla.value = true;
+      user.claSigned = false; // update global user obj
+    } else {
+      cldrNotify.exception(
+        e,
+        `${e.statusCode || "error"} trying to revoke a CLA.`
+      );
+    }
+  }
+  loading.value = false;
 }
 </script>
 
 <style scoped>
 .cla {
-  /* height: 50vh;
-    overflow-y: scroll; */
-}
-
-.cla h1 {
-  font-size: 10% !important;
-}
-
-.cla h2 {
-  font-size: 10% !important;
+  padding: 1em;
+  border: 1px solid gray;
+  margin: 0.5em;
+  background-color: bisque;
+  font-size: small;
 }
 </style>