add basic code to generate the login button

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "extends": "eslint-config-mitodl",
+  "env": {
+    "browser": true,
+    "jquery": true,
+    "jest": true
+  },
+  "globals": {
+    "RELEASE_VERSION": true
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,21 @@
+name: CI
+on: [push]
+
+jobs:
+  javascript-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.8.1
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Code formatting
+        run: yarn fmt:check

.gitignore

@@ -0,0 +1,70 @@
+# Local Environment Settings
+.pydevproject
+.settings
+.project
+.idea/
+.python-version
+.vscode/settings.json
+
+# A place to stick your files
+private/*
+
+# Autogenerated files
+*.DS_Store
+*~
+*.pem
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+build/
+develop-eggs/
+dist/
+downloads/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+public/
+node_modules
+
+# Unit test / coverage reports
+htmlcov/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+.pytest_cache/
+
+# Environments
+.env
+.venv
+env/
+venv/
+
+# webpack bundle analysis
+stats.json
+
+tsconfig.tsbuildinfo
+
+# Yarn stuff https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

index.js

@@ -0,0 +1,58 @@
+/**
+ * Generates a simple HTML login button pointing an an instance of MIT Open
+ * If already logged in, displays the user's username
+ * @function initLoginButton
+ * @param {String} containerId The id property of the container element to place the login button / status in
+ * @param {String} baseUrl The base URL of the MIT Open instance
+ * @param {String} buttonText The text to show on the Login button
+ * @param {String} buttonClass The CSS class(es) to assign to the button
+ * @param {String} loggedInTextClass The CSS class(es) to assign to the logged-in status text
+ */
+export function initLoginButton(
+  containerId,
+  baseUrl,
+  buttonText = "Login",
+  buttonClass = "",
+  loggedInTextClass = ""
+) {
+  const container = document.getElementById(containerId)
+  const parsedBaseUrl = new URL(baseUrl)
+  const reconstructedBaseUrl = `${parsedBaseUrl.protocol}//${parsedBaseUrl.hostname}${parsedBaseUrl.port !== "" ? `:${parsedBaseUrl.port}` : ""}`
+  const apiUrl = `${reconstructedBaseUrl}/api/v0/users/me?format=json`
+  const loginUrl = `${reconstructedBaseUrl}/login/ol-oidc/`
+  fetch(apiUrl, {
+    method:      "GET",
+    credentials: "include",
+    mode:        "cors",
+    headers:     {
+      Accept: "application/json"
+    }
+  })
+    .then(response => {
+      if (!response.ok) {
+        // create the login button
+        const linkButton = document.createElement("a")
+        const linkText = document.createTextNode(buttonText)
+        linkButton.appendChild(linkText)
+        linkButton.title = buttonText
+        linkButton.href = loginUrl
+        if (buttonClass !== "") {
+          linkButton.classList.add(...buttonClass.split(" "))
+        }
+        container.appendChild(linkButton)
+      }
+      return response.json()
+    })
+    .then(data => {
+      if (data["username"] !== undefined) {
+        // display the logged in user
+        const userName = data["username"]
+        const loggedInText = document.createElement("span")
+        if (loggedInTextClass !== "") {
+          loggedInText.classList.add(...loggedInTextClass.split(" "))
+        }
+        loggedInText.textContent = `Logged in as: ${userName}`
+        container.appendChild(loggedInText)
+      }
+    })
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "mit-open-login-button",
+  "version": "0.0.1",
+  "description": "A basic login button for your website to log in using MIT Open",
+  "main": "index",
+  "types": "index",
+  "repository": "https://github.com/mitodl/mit-open-login-button",
+  "author": "Carey Gumaer <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint './**/*.{js,jsx,ts,tsx}'",
+    "fmt": "yarn fmt:check --write",
+    "fmt:check": "LOG_LEVEL= prettier-eslint --list-different './**/*.{js,jsx,ts,tsx,scss}'"
+  },
+  "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "eslint": "^8.56.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-config-mitodl": "^1.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier-eslint": "^16.3.0",
+    "prettier-eslint-cli": "^8.0.1"
+  }
+}