Merge pull request #2 from mitodl/cg/add-init-login-button

add basic code to generate the login button

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.eslintrc

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

.gitattributes

@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

.github/workflows/ci.yml

@@ -0,0 +1,22 @@
+name: CI
+on: [push]
+
+jobs:
+  javascript-tests:
+    runs-on: ubuntu-latest
+    env:
+      SKIP_YARN_COREPACK_CHECK: true
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.8.1
+          cache: "yarn"
+
+      - run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Lint
+        run: yarn lint

.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

.nvmrc

@@ -0,0 +1 @@
+v20

.pre-commit-config.yaml

@@ -1,13 +1,27 @@
 # See https://pre-commit.com for more information
 # See https://pre-commit.com/hooks.html for more hooks
+ci:
+  skip:
+    - eslint
 repos:
   - repo: [email protected]:Yelp/detect-secrets
     rev: v1.3.0
     hooks:
-    -   id: detect-secrets
+      - id: detect-secrets
         args:
           - --baseline
           - .secrets.baseline
           - --exclude-files
           - README.md
-        exclude: .*_test.*|yarn\.lock
+          - --exclude-files
+          - .yarn/
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v3.1.0
+    hooks:
+      - id: prettier
+        types_or:
+          [javascript, jsx, ts, tsx, json, scss, sass, css, yaml, markdown]
+        args:
+          - --no-config
+          - --no-semi
+        exclude: "(node_modules/|.yarn/)"

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

index.js

@@ -0,0 +1,57 @@
+/**
+ * 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 apiUrl = `${parsedBaseUrl.origin}/api/v0/users/me?format=json`
+  const loginUrl = `${parsedBaseUrl.origin}/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,24 @@
+{
+  "name": "mit-open-login-button",
+  "packageManager": "[email protected]",
+  "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}'"
+  },
+  "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-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "typescript": "^5.3.3"
+  }
+}