kempo-oauth 0.1.2 → 0.1.4

package/README.md

@@ -70,3 +70,7 @@ DATABASE_URL=postgresql://kempo:kempo@localhost:5445/kempo_oauth_test SETTINGS_E
 ```
 
 Check for `(SKIPPED)` in the output: database suites skip themselves, and a skip reads as a pass. They also refuse any database not named `*_test`.
+
+## Dashboard widget
+
+Adds a **Social sign-in** widget to the kempo admin dashboard showing how many accounts are linked and which providers are offered, with a **Provider settings** button. It is declared in `widgets` in `kempo-config.json` and registered when the extension is installed or updated; people only see it if they hold its permission, and can hide, reorder or resize it from the dashboard's Customize dialog. Needs a kempo with the dashboard (see kempo's `docs/dashboard.md`); on an older kempo the entry is ignored.

package/kempo-config.json

@@ -3,6 +3,21 @@
   "git": "https://github.com/dustinpoissant/kempo-oauth",
   "public-scope": "oauth",
   "schema": "./server/db/schema.js",
+  "widgets": [
+    {
+      "key": "accounts",
+      "title": "Social sign-in",
+      "description": "How many accounts are linked to a sign-in provider and which providers are offered.",
+      "icon": "login",
+      "element": "k-oauth-widget",
+      "module": "/oauth/components/AccountsWidget.js",
+      "defaultWidth": 2,
+      "defaultHeight": 1,
+      "minWidth": 1,
+      "permission": "oauth:view",
+      "priority": 110
+    }
+  ],
   "permissions": [
     {
       "name": "oauth:view",

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "kempo-oauth",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Sign in with Google, GitHub, Facebook, X and Microsoft for kempo — OAuth 2.0 login and registration buttons, with the keys managed in the admin portal",
   "license": "MIT",
   "author": "Dustin Poissant",
   "type": "module",
   "main": "sdk.js",
   "scripts": {
-    "test": "kempo-test -l minimal",
+    "test": "node scripts/run-tests.js unit kempo-test -l minimal",
+    "test:integration": "node scripts/run-tests.js integration kempo-test -l minimal",
     "link:local": "npm install ../kempo ../kempo-server ../kempo-ui --no-save --no-legacy-peer-deps --force"
   },
   "kempo": {
@@ -42,6 +43,7 @@
     "kempo-ui": ">=0.4.53"
   },
   "devDependencies": {
+    "@electric-sql/pglite": "^0.5.9",
     "drizzle-kit": "^0.31.10",
     "kempo-testing-framework": "^1.4.11",
     "postgres": "^3.4.9"

package/public/components/AccountsWidget.js

@@ -0,0 +1,48 @@
+import DashboardWidget from '/kempo/components/DashboardWidget.js';
+import { html } from '/kempo-ui/lit-all.min.js';
+import { getAccounts } from '/oauth/sdk.js';
+
+/*
+  How many accounts are linked to a provider, and the providers available.
+*/
+export default class AccountsWidget extends DashboardWidget {
+  static properties = {
+    ...DashboardWidget.properties,
+    total: { state: true },
+    providers: { state: true }
+  };
+
+  constructor(){
+    super();
+    this.total = 0;
+    this.providers = [];
+    this.cta = { label: 'Provider settings', icon: 'settings', href: '/admin/extension/kempo-oauth/', permission: 'oauth:settings' };
+  }
+
+  /*
+    Public Methods
+  */
+
+  load = async () => {
+    const { total, providers } = await this.unwrap(getAccounts({ limit: 1 }));
+    this.total = total;
+    this.providers = providers;
+  };
+
+  /*
+    Rendering
+  */
+
+  renderContent(){
+    if(!this.total){
+      return html`<p class="tc-muted mbh">No accounts linked yet.</p><div class="small tc-muted">Providers: ${this.providers.map(provider => provider.label).join(', ')}</div>`;
+    }
+    return html`
+      <div class="h2 m0">${this.total}</div>
+      <div class="small tc-muted mb">Linked ${this.total === 1 ? 'account' : 'accounts'}</div>
+      <div class="small tc-muted">${this.providers.map(provider => provider.label).join(', ')}</div>
+    `;
+  }
+}
+
+customElements.define('k-oauth-widget', AccountsWidget);