atlassian · krazziekay · Jun 14, 2022 · Jun 9, 2022 · Jun 9, 2022 · Jun 9, 2022
@@ -0,0 +1,55 @@
+.jiraConnectGHE__content {
+  margin: 4em auto 0;
+  max-width: 508px;
+}
+.jiraConnectGHE__content__title {
+  text-align: center;
+  margin-bottom: 2em;
+}
+
+.jiraConnectGHE__options__subTitle {
+  font-size: 1rem;
+  margin-bottom: 0.5em;
+  display: inline-flex;
+}
+
+.jiraConnectGHE__prompt {
+  color: #344563;
+  font-size: 0.9rem;
+  margin-bottom: 1em;
+}
+
+.jiraConnectGHE__error {
+  display: none;
+  color: #DE350B;
+  font-size: 0.8rem;
+  margin-top: 0.125em;
+}
+
+.jiraConnectGHE__label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #6B778C;
+}
+
+.jiraConnectGHE__input {
+  width: 100%;
+  border: 2px solid #DFE1E6;
+  border-radius: 3px;
+  background: #FAFBFC;
+  padding: 0.625em 0.5em;
+}
+
+.has-error {
+  border-color: #DE350B;
+}
+
+.jiraConnectGHE__actionBtn__container {
+  margin-top: 1.25em;
+  text-align: right;
+}
+
+#gheServerBtnSpinner {
+  display: none;
+  color: #fff;
+}
@@ -0,0 +1,65 @@
+const ALLOWED_PROTOCOLS = ["http:", "https:"];
+const GITHUB_CLOUD = ["github.com", "www.github.com"];
+
+/**
+ * Method that checks the validity of the passed URL
+ *
+ * @param {string} inputURL
+ * @returns {boolean}
+ */
+const checkValidGHEUrl = inputURL => {
+	try {
+		const { protocol, hostname } = new URL(inputURL);
+
+		if (!ALLOWED_PROTOCOLS.includes(protocol)) {
+			return false;
+		}
+		// This checks whether the hostname whether there is an extension like `.com`, `.net` etc.
+		if (hostname.split('.').length < 2) {
+			return false;
+		}
+		if (GITHUB_CLOUD.includes(hostname)) {
+			// TODO: Need to alert the users that this URL is GitHub cloud and not Enterprise
+			// Waiting for design: https://softwareteams.atlassian.net/browse/ARC-1418
+			return false;
+		}
+
+		return true;
+	} catch (e) {
+		return false;
+	}
+};
+
+$("#gheServerURL").on("keyup", event => {
+	const hasUrl = event.target.value.length > 0;
+	$("#gheServerBtn").attr({
+		"aria-disabled": !hasUrl,
+		"disabled": !hasUrl
+	});
+	$("#gheServerURLError").hide();
+	$("#gheServerURL").removeClass("has-error");
+});
+
+$("#gheServerBtn").on("click", event => {
+	const btn = event.target;
+	const typedURL = $("#gheServerURL").val().replace(/\/+$/, '');
+	const isValid = checkValidGHEUrl(typedURL);
+
+	$(btn).attr({
+		"aria-disabled": !isValid,
+		"disabled": !isValid
+	});
+
+	if (isValid) {
+		$("#gheServerURLError").hide();
+		$("#gheServerBtnText").hide();
+		$("#gheServerBtnSpinner").show();
+		$("#gheServerURL").removeClass("has-error");
+
+		//	TODO: Need to add the action
+		console.log("Data for API: ", typedURL);
+	} else {
+		$("#gheServerURLError").show();
+		$("#gheServerURL").addClass("has-error");
+	}
+});
@@ -0,0 +1,103 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="ap-local-base-url" content="{{localBaseUrl}}" />
+    <meta name="public-url" content="{{APP_URL}}" />
+    <title>{{title}}</title>
+    <link
+      href="/public/aui/aui-prototyping.css"
+      rel="stylesheet"
+      integrity="DTM1Q+8lU7SzJT+FWr0JFisCSZlwfM0GiAKYy7h1s9vIKa/CIh37s9NuOCqIOgK4tmqrjLK4NuWuIPUQNsikHA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="/public/css-reset/bundle.css" media="all" />
+    <link
+      rel="stylesheet"
+      href="/public/atlassian-ui-kit/bundle.css"
+      media="all"
+    />
+    <link rel="stylesheet" href="/public/css/global.css" media="all" />
+    <link
+      rel="stylesheet"
+      href="/public/css/jira-connect-ghe.css"
+      media="all"
+    />
+    <script src="/public/js/jquery.min.js" nonce="{{nonce}}"></script>
+  </head>
+
+  <body class="aui-page-hybrid">
+    <div class="jiraConnectGHE">
+      <header class="jiraConnectGHE__header">
+         {{> navigation previousPageName="Select GitHub Version" }}
+      </header>
+
+      <section class="jiraConnectGHE__content">
+        <div class="headerImage">
+          <img
+            src="/public/assets/jira-and-github.png"
+            alt="Jira and GitHub logos"
+          />
+        </div>
+        <h2 class="jiraConnectGHE__content__title">GitHub Enterprise Server</h2>
+
+        <div class="jiraConnectGHE__prompt">
+            Connecting GitHub Enterprise Server to Jira requires opening a hole in your firewall,
+            as Atlassian’s IP addresses must be able to call your GitHub Enterprise Server.
+          <!--TODO: Add a link here-->
+          <a href="" target="_blank">Learn more.</a>
+        </div>
+
+        <div>
+          <h3 class="jiraConnectGHE__options__subTitle">
+            GitHub Enterprise Server URL&nbsp;
+            <!--TODO: Add a tooltip for this icon-->
+            <i class="aui-icon aui-iconfont-question-filled"></i>
+          </h3>
+          <div class="jiraConnectGHE__prompt">
+            Enter the URL for the server of the GitHub Enterprise organization that you want to connect. This is unique to your server.
+          </div>
+          <div>
+            <label class="jiraConnectGHE__label" for="gheServerURL">Server URL</label>
+            <input type="text" class="jiraConnectGHE__input" id="gheServerURL" placeholder="https://example.com" />
+            <div class="jiraConnectGHE__error" id="gheServerURLError">
+              <i class="aui-icon aui-iconfont-error"></i>
+              The entered URL is not valid.
+              <!--TODO: Add a link here-->
+              <a href="" target="_blank">Learn more.</a>
+            </div>
+          </div>
+
+          <div class="jiraConnectGHE__actionBtn__container">
+            <button
+              id="gheServerBtn"
+              class="aui-button aui-button-primary"
+              aria-disabled="true"
+              disabled
+            >
+              <span id="gheServerBtnText">Next</span>
+              <aui-spinner id="gheServerBtnSpinner" size="small"></aui-spinner>
+            </button>
+
+          </div>
+        </div>
+      </section>
+
+    </div>
+
+    <script src="/public/js/jira-connect-ghe.js" nonce="{{nonce}}"></script>
+    <!-- Per https://blog.developer.atlassian.com/announcement-reminder-about-deprecation-of-xdm_e-usage-and-needing-to-load-all-js-from-the-cdn/ we are required to load this from this specific CDN -->
+    <!-- DO NOT TOUCH!!! THIS IS NEEDED FOR CONNECT OR ELSE IT WILL CAUSE AN ERROR -->
+    <script
+      src="https://connect-cdn.atl-paas.net/all.js"
+      nonce="{{nonce}}"
+    ></script>
+    <script
+      src="/public/aui/aui-prototyping.js"
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+      nonce="{{nonce}}"
+    ></script>
+  </body>
+</html>