@mindful-web/marko-web-identity-x 1.0.0

package/.eslintignore

@@ -0,0 +1 @@
+*.marko.js

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Parameter1 LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,200 @@
+# Mindful Web Marko Wrapper for IdentityX
+
+## Installation
+
+1. Include `@mindful-web/marko-web-identity-x` as a project/website dependency.
+
+2. Include IdentityX tenant configuration within your site
+```js
+// your-site/config/identity-x.js
+const IdentityX = require('@mindful-web/marko-web-identity-x/config');
+
+const config = new IdentityX({
+  appId: '<MY-APPLICATION-ID>',
+});
+module.exports = config;
+```
+
+3. Create an IdentityX router to load the IdentityX middleware.
+```js
+// your-site/server/routes/identity-x.js
+const IdentityX = require('@mindful-web/marko-web-identity-x');
+const config = require('../../config/identity-x');
+const authenticate = require('../templates/user/authenticate');
+const login = require('../templates/user/login');
+const logout = require('../templates/user/logout');
+const register = require('../templates/user/register');
+const profile = require('../templates/user/profile');
+
+module.exports = (app) => {
+  IdentityX(app, config);
+
+  app.get(config.getEndpointFor('authenticate'), (req, res) => {
+    res.marko(authenticate);
+  });
+
+  app.get(config.getEndpointFor('login'), (req, res) => {
+    res.marko(login);
+  });
+
+  app.get(config.getEndpointFor('logout'), (req, res) => {
+    res.marko(logout);
+  });
+
+  app.get(config.getEndpointFor('register'), (req, res) => {
+    res.marko(register);
+  });
+
+  app.get(config.getEndpointFor('profile'), (req, res) => {
+    res.marko(profile);
+  });
+};
+```
+
+4. Include the IdentityX router **before all other routes!**
+```js
+// your-site/server/routes/index.js
+const IdentityX = require('./identity-x');
+
+module.exports = (app) => {
+  IdentityX(app);
+  // ...
+};
+```
+
+5. Create `login`, `logout`, `authenticate`, `register` and `profile` templates. These templates must include the relevant `<marko-web-identity-x-form-...>` component.
+```marko
+<marko-web-default-page-layout>
+  <@page>
+    <marko-web-identity-x-form-authenticate />
+  </@page>
+</marko-web-default-page-layout>
+```
+
+5. Include the Browser plugin.
+```js
+// your-site/browser/index.js
+import IdentityX from '@mindful-web/marko-web-identity-x/browser';
+
+IdentityX(Browser);
+// ...
+
+export default Browser;
+```
+
+## Usage
+
+Include the `<marko-web-identity-x-form-authenticate>` component in the template where users land after authenticating (/user/authenticate).
+
+Include the `<marko-web-identity-x-form-login>` component to display the login form.
+
+Include the `<marko-web-identity-x-form-register>` component to display the register form.
+
+Include the `<marko-web-identity-x-form-logout>` component to display the logout form.
+
+Include the `<marko-web-identity-x-form-profile>` component to display the user profile form.
+
+Include the `<marko-web-identity-x-context>` component where you'd like access to IdentityX context.
+```marko
+<!-- your-site/server/templates/some-page.marko -->
+<marko-web-identity-x-context|{ user, hasUser }|>
+  <if(hasUser)>
+    <h1>Hello ${user.givenName}!</h1>
+  </if>
+</marko-web-identity-x-context>
+```
+
+Include the `<marko-web-identity-x-access>` component where you'd like to ensure access levels are met:
+```marko
+<!-- your-site/server/templates/content/index.marko -->
+$ const { isRequired, accessLevels } = getAsObject(content, 'userRegistration');
+<marko-web-identity-x-access|context|
+  enabled=isRequired
+  required-access-level-ids=accessLevels
+>
+  $ const {
+    canAccess,
+    isLoggedIn,
+    requiresAccessLevel,
+    hasRequiredAccessLevel,
+    messages,
+  } = context;
+  <if(!canAccess)>
+    <if(isLoggedIn && !hasRequiredAccessLevel)>
+      $!{messages.loggedInNoAccess}
+    </if>
+    <else-if(!isLoggedIn && requiresAccessLevel)>
+      $!{messages.loggedOutNoAccess}
+    </else-if>
+    <else-if(!isLoggedIn)>
+      <h5>You must be logged-in to access this content.</h5>
+      <cms-browser-component name="IdentitySignInForm" />
+    </else-if>
+  </if>
+  <else>
+    <p>This is secret content only some can see!</p>
+  </else>
+</marko-web-identity-x-access>
+```
+
+## Customization
+
+You can change the default IdentityX Vue components by passing them to the component loader in your site's browser config:
+```diff
+import IdentityX from '@mindful-web/marko-web-identity-x/browser';
++ import MyLoginComponent from './my-login-component.vue';
+
+-IdentityX(Browser);
++IdentityX(Browser, {
++  CustomLoginComponent: MyLoginComponent,
++});
+```
+
+## Vue Event emission
+
+This package emits the following events via the EventBus/global Vue root. Each payload will be an
+object and will include a `label` field tied to the `eventLabel` prop of the emitting component.
+Each payload _may_ include additional data, as relevant.
+
+All components support passing an object of `additionalEventData`, which when present will append
+data both to the submission (for backend hook handling) and to the emitted event payload.
+### Submission events
+
+| Event name | Event payload | Details |
+| - | - | - |
+| `identity-x-login-link-sent` | `{ label, ...additionalEventData  }` | Fires when a user submits their email to start the login handshake.
+| `identity-x-authenticated` | `{ label, ...additionalEventData, mustReVerifyProfile, isProfileComplete, requiresCustomFieldAnswers }` | Fires when a user has completed the login handshake and is now fully authenticated.
+| `identity-x-logout` | `{ label, ...additionalEventData  }` | Fires when a user has logged out successfully.
+| `identity-x-profile-updated` | `{ label, ...additionalEventData }` | Fires when a user has submitted an update to their profile/fields.
+| `identity-x-comment-post-submitted` | `{ label, ...additionalEventData }` | Fires when a user posts a comment to a comment stream
+| `identity-x-comment-report-submitted` | `{ label, ...additionalEventData, id }` | Fires when a user reports a comment on a comment stream
+| `identity-x-comment-stream-login-link-sent` | `{ label, ...additionalEventData }` | Fires when a user starts login from a comment stream
+
+### View events
+
+Each component will emit an event when the component is displayed.
+
+| Event name | Event payload | Details |
+| - | - | - |
+| `identity-x-authenticate-displayed` | `{ label, ...additionalEventData  }`
+| `identity-x-login-displayed` | `{ label, ...additionalEventData }`
+| `identity-x-logout-displayed` | `{ label, ...additionalEventData  }`
+| `identity-x-profile-displayed` | `{ label, ...additionalEventData }`
+| `identity-x-comment-stream-displayed` | `{ label, ...additionalEventData }`
+| `identity-x-comment-stream-loaded` | `{ label, ...additionalEventData }`
+| `identity-x-comment-stream-loaded-more` | `{ label, ...additionalEventData }`
+
+### Error events
+
+Each component will emit an event when an error is encountered and include the error message as the
+`message` attribute of the emitted payload.
+
+| Event name | Event payload |
+| - | - |
+| `identity-x-authenticate-errored` | `{ label, message: '...', ...additionalEventData }`
+| `identity-x-login-errored` | `{ label, message: '...', ...additionalEventData }`
+| `identity-x-logout-errored` | `{ label, message: '...', ...additionalEventData }`
+| `identity-x-profile-errored` | `{ label, message: '...', ...additionalEventData }`
+| `identity-x-comment-post-errored` | `{ label, message: '...', ...additionalEventData }`
+| `identity-x-comment-report-errored` | `{ label, message: '...', ...additionalEventData }`
+| `identity-x-comment-stream-errored` | `{ label, message: '...', ...additionalEventData }`

package/api/fragment-types.json

@@ -0,0 +1 @@
+{"__schema":{"types":[{"kind":"INTERFACE","name":"FieldInterface","possibleTypes":[{"name":"SelectField"},{"name":"BooleanField"}]}]}}

package/api/fragments/active-user.js

@@ -0,0 +1,108 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+fragment ActiveUserFragment on AppUser {
+  id
+  email
+  verified
+  verifiedCount
+  givenName
+  familyName
+  displayName
+  organization
+  organizationTitle
+  lastLoggedIn
+  countryCode
+  regionCode
+  postalCode
+  city
+  street
+  addressExtra
+  mobileNumber
+  phoneNumber
+  receiveEmail
+  mustReVerifyProfile
+  externalIds {
+    id
+    identifier { value type }
+    namespace { provider tenant type }
+  }
+  regionalConsentAnswers { id given date }
+  customAttributes
+  customBooleanFieldAnswers(input: {
+    onlyActive: true
+    sort: { field: createdAt, order: asc }
+  }) {
+    id
+    hasAnswered
+    answer
+    value
+    field {
+      id
+      label
+      active
+      required
+      externalId {
+        id
+        namespace { provider tenant type }
+        identifier { value type }
+      }
+    }
+  }
+  customSelectFieldAnswers(input: {
+    onlyActive: true
+    sort: { field: createdAt, order: asc }
+  }) {
+    id
+    hasAnswered
+    answers { id label externalIdentifier writeInValue }
+    field {
+      id
+      label
+      active
+      multiple
+      required
+      externalId {
+        id
+        namespace { provider tenant type }
+        identifier { value type }
+      }
+      options: choices {
+        id
+        label
+        ... on SelectFieldOption {
+          canWriteIn
+        }
+        ... on SelectFieldOptionGroup {
+          options {
+            id
+            label
+            canWriteIn
+          }
+        }
+      }
+    }
+  }
+  customTextFieldAnswers(input: {
+    onlyActive: true
+    sort: { field: createdAt, order: asc }
+  }) {
+    id
+    hasAnswered
+    value
+    field {
+      id
+      label
+      active
+      required
+      externalId {
+        id
+        namespace { provider tenant type }
+        identifier { value type }
+      }
+    }
+  }
+}
+
+`;

package/api/mutations/add-external-user-id.js

@@ -0,0 +1,24 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+mutation AddExternalUserId($input: SetAppUserExternalIdMutationInput!) {
+  addAppUserExternalId(input: $input) {
+    id
+    email
+    externalIds {
+      id
+      identifier {
+        value
+        type
+      }
+      namespace {
+        provider
+        tenant
+        type
+      }
+    }
+  }
+}
+
+`;

package/api/mutations/create-app-user.js

@@ -0,0 +1,11 @@
+const gql = require('graphql-tag');
+const userFragment = require('../fragments/active-user');
+
+module.exports = gql`
+  mutation LoginCreateAppUser($email: String!) {
+    createAppUser(input: { email: $email }) {
+      ...ActiveUserFragment
+    }
+  }
+  ${userFragment}
+`;

package/api/mutations/delete-app-user-for-current-application.js

@@ -0,0 +1,7 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+  mutation DeleteAppUserForCurrentApplication($input: DeleteAppUserForCurrentApplicationInput!) {
+    deleteAppUserForCurrentApplication(input: $input)
+  }
+`;

package/api/mutations/impersonate-app-user.js

@@ -0,0 +1,12 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+  mutation ImpersonateAppUser($input: ImpersonateAppUserMutationInput!) {
+    impersonateAppUser(input: $input) {
+      token {
+        id
+        value
+      }
+    }
+  }
+`;

package/api/mutations/logout-app-user.js

@@ -0,0 +1,11 @@
+const gql = require('graphql-tag');
+const userFragment = require('../fragments/active-user');
+
+module.exports = gql`
+  mutation LogoutAppUser($input: LogoutAppUserWithDataMutationInput!) {
+    logoutAppUserWithData(input: $input) {
+      ...ActiveUserFragment
+    }
+  }
+  ${userFragment}
+`;

package/api/mutations/send-change-email-link.js

@@ -0,0 +1,7 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+  mutation SendChangeEmailLink($input: SendOwnAppUserChangeEmailLinkMutationInput!) {
+    sendOwnAppUserChangeEmailLink(input: $input)
+  }
+`;

package/api/mutations/send-login-link.js

@@ -0,0 +1,7 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+  mutation LoginSendLoginLink($input: SendAppUserLoginLinkMutationInput!) {
+    sendAppUserLoginLink(input: $input)
+  }
+`;

package/api/mutations/set-custom-attributes.js

@@ -0,0 +1,15 @@
+const gql = require('graphql-tag');
+const userFragment = require('../fragments/active-user');
+
+module.exports = gql`
+mutation UpdateOwnAppUserCustomAttributes($input: UpdateOwnAppUserCustomAttributesMutationInput!) {
+  updateOwnAppUserCustomAttributes(input: $input) {
+    id
+    customAttributes
+    ...ActiveUserFragment
+  }
+}
+
+${userFragment}
+
+`;

package/api/queries/check-content-access.js

@@ -0,0 +1,19 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+
+query CheckContentAccess($input: CheckContentAccessQueryInput!) {
+  checkContentAccess(input: $input) {
+    canAccess
+    isLoggedIn
+    hasRequiredAccessLevel
+    requiresAccessLevel
+    requiredAccessLevels {
+      id
+      name
+    }
+    messages
+  }
+}
+
+`;

package/api/queries/get-active-context.js

@@ -0,0 +1,45 @@
+const gql = require('graphql-tag');
+const userFragment = require('../fragments/active-user');
+
+module.exports = gql`
+
+query GetActiveAppContext {
+  activeAppContext {
+    application {
+      id
+      name
+      organization {
+        id
+        name
+        consentPolicy
+        emailConsentRequest
+        regionalConsentPolicies(input: { status: enabled }) {
+          id
+          message
+          countries {
+            id
+          }
+          required
+        }
+      }
+    }
+    user {
+      ...ActiveUserFragment
+    }
+    mergedTeams {
+      id
+      name
+      photoURL
+    }
+    mergedAccessLevels {
+      id
+      name
+    }
+    hasTeams
+    hasUser
+  }
+}
+
+${userFragment}
+
+`;

package/api/queries/load-user-by-external-id.js

@@ -0,0 +1,14 @@
+const gql = require('graphql-tag');
+const userFragment = require('../fragments/active-user');
+
+module.exports = gql`
+  query LoadUserByExternalId(
+    $identifier: AppUserExternalIdentifierInput!,
+    $namespace: AppUserExternalNamespaceInput!
+  ) {
+    appUserByExternalId(input: { identifier: $identifier, namespace: $namespace }) {
+      ...ActiveUserFragment
+    }
+  }
+  ${userFragment}
+`;

package/api/queries/load-user-by-id.js

@@ -0,0 +1,11 @@
+const gql = require('graphql-tag');
+const userFragment = require('../fragments/active-user');
+
+module.exports = gql`
+  query LoadUserById($id: String!) {
+    appUserById(input: { id: $id }) {
+      ...ActiveUserFragment
+    }
+  }
+  ${userFragment}
+`;

package/api/queries/load-user.js

@@ -0,0 +1,11 @@
+const gql = require('graphql-tag');
+const userFragment = require('../fragments/active-user');
+
+module.exports = gql`
+  query LoadUserByEmail($email: String!) {
+    appUser(input: { email: $email }) {
+      ...ActiveUserFragment
+    }
+  }
+  ${userFragment}
+`;

package/browser/.eslintrc.js

@@ -0,0 +1,11 @@
+const root = require('../../../eslintrc.browser');
+
+module.exports = {
+  ...root,
+  rules: {
+    ...root.rules,
+    'vue/no-v-html': 'off',
+    // @todo this should NOT stay on, only added because some form fields were handled wrong
+    'vue/no-mutating-props': 'off',
+  },
+};