BI-2539 - Add GitHub as Alternative OAuth Provider

.env.development

@@ -18,3 +18,4 @@ VUE_APP_BI_REFERENCE_SOURCE=${BRAPI_REFERENCE_SOURCE}
 
 # feature flags
 VUE_APP_BRAPI_VENDOR_SUBMISSION_ENABLED=${BRAPI_VENDOR_SUBMISSION_ENABLED}
+VUE_APP_ALTERNATE_AUTHENTICATION_ENABLED=${ALTERNATE_AUTHENTICATION_ENABLED}

src/assets/scss/main.scss

@@ -579,6 +579,10 @@ table tr.is-edited + .detail {
   margin-bottom: 7em;
 }
 
+.githubBtn {
+  margin: 1em auto;
+}
+
 .program-selection-level {
   .level-item:not(:last-child) {
     margin-right:0.5em !important;
@@ -621,7 +625,7 @@ a.is-underlined {
   text-decoration: underline;
 }
 
-#connect-orcid-button{
+#connect-orcid-button #connect-github-button {
   border: 1px solid #D3D3D3;
   padding: .3em;
   background-color: #fff;
@@ -635,7 +639,7 @@ a.is-underlined {
   vertical-align: middle;
 }
 
-#connect-orcid-button:hover{
+#connect-orcid-button:hover #connect-github-button:hover {
   border: 1px solid #338caf;
   color: #338caf;
 }

src/components/layouts/InfoSideBarLayout.vue

@@ -131,6 +131,19 @@
         <p>
           To access to your breeding program, please log in.
         </p>
+      <div>
+        <button
+            v-if="alternateAuthenticationEnabled()"
+            id="connect-github-button"
+            class="button githubBtn"
+            v-bind:class="{'is-loading': githubLoginProcessing}"
+            v-bind:disabled="githubLoginProcessing"
+            v-on:click="githubLogin"
+        >
+          SIGN IN with GitHub
+        </button>
+      </div>
+      <div>
         <button
             id="connect-orcid-button"
             class="button orcidBtn"
@@ -149,6 +162,7 @@
               alt="ORCID iD icon"
           >
         </button>
+      </div>
         <p class="is-size-7 has-text-left">
           To acknowledge that you have used your iD and that it has been authenticated, we display
           the ORCID iD icon
@@ -191,6 +205,7 @@
     public isLoginModalActive: boolean = false;
     public isLoginServerErrorModalActive: boolean = false;
     public loginProcessing: boolean = false;
+    public githubLoginProcessing: boolean = false;
     private orcidLogoUrl: string = 'https://orcid.org/sites/default/files/images/orcid_24x24.png';
     @Prop()
     public loginRedirect!: boolean;
@@ -234,9 +249,28 @@
       window.location.href = process.env.VUE_APP_BI_API_ROOT+'/sso/start';
     }
 
+    async githubLogin() {
+      // Check the server can be contacted
+      this.githubLoginProcessing = true;
+      try {
+        await ServerManagementService.checkHealth();
+      } catch (error) {
+        this.isLoginServerErrorModalActive = true;
+        this.githubLoginProcessing = false;
+        return;
+      }
+
+      // Start login process
+      window.location.href = process.env.VUE_APP_BI_API_ROOT+'/sso/start/github';
+    }
+
     get sandboxConfig() {
       return process.env.VUE_APP_SANDBOX;
     }
 
+    alternateAuthenticationEnabled() {
+      return process.env.VUE_APP_ALTERNATE_AUTHENTICATION_ENABLED === 'true';
     }
+
+  }
 </script>

src/views/account/AccountSignUp.vue

@@ -27,23 +27,37 @@
         <p>
           To activate your account, please log in.
         </p>
-        <button
-            id="connect-orcid-button"
-            class="button orcidBtn"
-            v-bind:class="{'is-loading': loginProcessing}"
-            v-bind:disabled="loginProcessing"
-            v-on:click="orcidLogin"
-        >
-          SIGN IN with ORCID
-          <img
-              id="orcid-id-icon"
-              src="https://orcid.org/sites/default/files/images/orcid_24x24.png"
-              width="24"
-              height="24"
-              class="is-pulled-right"
-              alt="ORCID iD icon"
+        <div>
+          <button
+              v-if="alternateAuthenticationEnabled()"
+              id="connect-github-button"
+              class="button githubBtn"
+              v-bind:class="{'is-loading': loginGithubProcessing}"
+              v-bind:disabled="loginGithubProcessing"
+              v-on:click="githubLogin"
+          >
+            SIGN IN with GitHub
+          </button>
+        </div>
+        <div>
+          <button
+              id="connect-orcid-button"
+              class="button orcidBtn"
+              v-bind:class="{'is-loading': loginProcessing}"
+              v-bind:disabled="loginProcessing"
+              v-on:click="orcidLogin"
           >
-        </button>
+            SIGN IN with ORCID
+            <img
+                id="orcid-id-icon"
+                src="https://orcid.org/sites/default/files/images/orcid_24x24.png"
+                width="24"
+                height="24"
+                class="is-pulled-right"
+                alt="ORCID iD icon"
+            >
+          </button>
+        </div>
         <p class="is-size-7 has-text-left">
           To acknowledge that you have used your iD and that it has been authenticated, we display
           the ORCID iD icon
@@ -79,6 +93,7 @@
   })
   export default class AccountSignUp extends Vue {
     public loginProcessing: boolean = false;
+    public loginGithubProcessing: boolean = false;
     public accountTokenCookieName: string = Vue.prototype.$cookieNames.accountToken;
     public isLoginServerErrorModalActive: boolean = false;
     @Prop()
@@ -110,6 +125,28 @@
       // Start login process
       window.location.href = process.env.VUE_APP_BI_API_ROOT+'/sso/start';
     }
+
+    async githubLogin() {
+      // Check the server can be contacted
+      this.loginGithubProcessing = true;
+      try {
+        await ServerManagementService.checkHealth();
+      } catch (error) {
+        this.isLoginServerErrorModalActive = true;
+        this.loginGithubProcessing = false;
+        return;
+      }
+
+      // Set the cookie to pass back their account token. Timeout is an hour
+      Vue.$cookies.set(this.accountTokenCookieName, this.accountToken, 60*60);
+
+      // Start login process
+      window.location.href = process.env.VUE_APP_BI_API_ROOT+'/sso/start/github';
+    }
+
+    alternateAuthenticationEnabled() {
+      return process.env.VUE_APP_ALTERNATE_AUTHENTICATION_ENABLED === 'true';
+    }
   }
 </script>
 

vue.config.js

@@ -28,6 +28,7 @@ process.env.VUE_APP_BI_API_V1_PATH = process.env.VUE_APP_BI_API_ROOT + "/v1";
 process.env.VUE_APP_LOG_LEVEL = process.env.VUE_APP_LOG_LEVEL || 'error';
 process.env.VUE_APP_BI_REFERENCE_SOURCE = process.env.VUE_APP_BI_REFERENCE_SOURCE || 'breedinginsight.org';
 process.env.VUE_APP_BRAPI_VENDOR_SUBMISSION_ENABLED = ('true' === process.env.VUE_APP_BRAPI_VENDOR_SUBMISSION_ENABLED);
+process.env.VUE_APP_ALTERNATE_AUTHENTICATION_ENABLED = ('true' === process.env.VUE_APP_ALTERNATE_AUTHENTICATION_ENABLED);
 
 module.exports = {
   devServer: {