1.2.0

changelog.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2024-10-01 - 1.2.0 - feat(web)
+Improve UI styling and add registration prompt
+
+- Updated max-width of login container to improve layout consistency
+- Added new component for user registration
+- Improved styling for various elements including buttons and text boxes
+
+## 2024-10-01 - 1.1.1 - fix(core)
+Corrected typos and added missing keywords.
+
+- Added missing newline at the end of package.json.
+- Revised various typos and added missing keywords.
+
 ## 2024-09-29 - 1.1.0 - feat(web)
 Implement view container and update elements
 

npmextra.json

@@ -18,13 +18,18 @@
         "JWT",
         "TypeScript",
         "user login",
-        "user registration",
         "session handling",
         "email verification",
         "mobile verification",
         "user roles",
         "organization management",
-        "billing management"
+        "billing management",
+        "password reset",
+        "two-factor authentication",
+        "OAuth",
+        "API",
+        "user data",
+        "user sessions"
       ]
     }
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/idp.global",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "An identity provider software managing user authentications, registrations, and sessions.",
   "main": "dist_ts/index.js",
   "typings": "dist_ts/index.d.ts",
@@ -89,12 +89,17 @@
     "JWT",
     "TypeScript",
     "user login",
-    "user registration",
     "session handling",
     "email verification",
     "mobile verification",
     "user roles",
     "organization management",
-    "billing management"
+    "billing management",
+    "password reset",
+    "two-factor authentication",
+    "OAuth",
+    "API",
+    "user data",
+    "user sessions"
   ]
 }

readme.md

@@ -27,7 +27,7 @@ import * as domtools from '@design.estate/dees-domtools';
 import { html, render } from '@design.estate/dees-element';
 import { IdpWelcome } from './elements/idp-welcome.js';
 
-// Define asynchronous run function
+// Define an asynchronous run function
 const run = async () => {
   // Set up DOM tools
   const domtoolsInstance = await domtools.DomTools.setupDomTools();
@@ -56,10 +56,10 @@ const run = async () => {
     },
   });
 
-  // Set up service worker
+  // Set up the service worker
   const serviceWorker = await serviceworker.getServiceworkerClient();
 
-  // Render main template
+  // Render the main template
   const mainTemplate = html`
     <style>
       body {
@@ -79,7 +79,7 @@ run();
 
 ### Using the IDP Client
 
-The IDP Client is essential to communicate with the IDP server. Below is a sample on how to set up and use the IDP client:
+The IDP Client is essential to communicate with the IDP server. Below is a sample of how to set up and use the IDP client:
 
 ```typescript
 import { IdpState } from './idp.state.js';
@@ -176,7 +176,7 @@ export class IdpRegistrationStepper extends plugins.DeesElement {
         last_name: formData.LastName,
       },
     });
-    // Proceed to next steps as per the registration flow
+    // Proceed to the next steps as per the registration flow
   }
 
   private renderErrorMessage(message: string) {
@@ -290,7 +290,7 @@ const idpClient = new IdpClient('https://reception.lossless.one/typedrequest');
 getTransferToken(idpClient);
 ```
 
-This comprehensive guide should help you with a detailed understanding of setting up and using the `@idp.global/idp.global` module effectively.
+This comprehensive guide should help you understand the detailed setup and usage of the `@idp.global/idp.global` module effectively.
 
 ## License and Legal Information
 

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/idp.global',
-  version: '1.1.0',
+  version: '1.2.0',
   description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }

ts/ffb.plugins.ts

@@ -1,14 +0,0 @@
-// native scope
-import * as path from 'path';
-export { path };
-
-// @api.global scope
-import * as typedserver from '@api.global/typedserver';
-
-export { typedserver };
-
-// @pushrocks scope
-import * as qenv from '@push.rocks/qenv';
-import * as smartpath from '@push.rocks/smartpath';
-
-export { qenv, smartpath };

ts/index.ts

@@ -1,5 +1,6 @@
-import * as plugins from './ffb.plugins.js';
+import * as plugins from './plugins.js';
-import * as paths from './ffb.paths.js';
+import * as paths from './paths.js';
+import { Reception } from './reception/classes.reception.js';
 
 export const runCli = async () => {
   const serviceQenv = new plugins.qenv.Qenv('./', './.nogit', false);
@@ -8,5 +9,19 @@ export const runCli = async () => {
     domain: 'idp.global',
     serveDir: paths.distWebDir,
   });
+
+  // lets add the reception routes
+  const reception = new Reception({
+    name: (await serviceQenv.getEnvVarOnDemand('INSTANCE_NAME')) || 'idp.global',
+    mongoDescriptor: {
+      mongoDbUser: await serviceQenv.getEnvVarOnDemand('MONGO_DB_USER'),
+      mongoDbName: await serviceQenv.getEnvVarOnDemand('MONGO_DB_NAME'),
+      mongoDbPass: await serviceQenv.getEnvVarOnDemand('MONGO_DB_PASS'),
+      mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGO_DB_URL'),
+    },
+    websiteServer: websiteServer,
+  });
+  await reception.start();
+
   await websiteServer.start();
 };

ts/paths.ts

@@ -1,4 +1,4 @@
-import * as plugins from './ffb.plugins.js';
+import * as plugins from './plugins.js';
 
 export const packageDir = plugins.path.join(
   plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url),

ts/plugins.ts

@@ -1,34 +1,32 @@
-// node native
+// Native scope
 import * as path from 'path';
-
 export { path };
 
-// project scope
+// Project scope
-import * as lointReception from '../../dist_ts_interfaces/index.js';
+import * as lointReception from '../dist_ts_interfaces/index.js';
+export { lointReception };
 
-export { lointReception, };
+// @api.global scope
-
+import * as typedserver from '@api.global/typedserver';
-// @apiglobal scope
 import * as typedrequest from '@api.global/typedrequest';
 import * as typedsocket from '@api.global/typedsocket';
 
-export { typedrequest, typedsocket };
+export { typedserver, typedrequest, typedsocket };
 
 // @serve.zone scope
 import * as szPlatformClient from '@serve.zone/platformclient';
-
 export { szPlatformClient };
 
-
+// @push.rocks scope
-// @pushrocks scope
 import * as lik from '@push.rocks/lik';
 import * as projectinfo from '@push.rocks/projectinfo';
 import * as qenv from '@push.rocks/qenv';
 import * as smartdata from '@push.rocks/smartdata';
 import * as smartdelay from '@push.rocks/smartdelay';
+import * as smartjwt from '@push.rocks/smartjwt';
+import * as smartlog from '@push.rocks/smartlog';
 import * as smartmail from '@push.rocks/smartmail';
 import * as smarthash from '@push.rocks/smarthash';
-import * as smartjwt from '@push.rocks/smartjwt';
 import * as smartpath from '@push.rocks/smartpath';
 import * as smartpromise from '@push.rocks/smartpromise';
 import * as smarttime from '@push.rocks/smarttime';
@@ -41,9 +39,10 @@ export {
   qenv,
   smartdata,
   smartdelay,
-  smartmail,
   smarthash,
   smartjwt,
+  smartlog,
+  smartmail,
   smartpath,
   smartpromise,
   smarttime,
@@ -53,5 +52,4 @@ export {
 
 // @tsclass scope
 import * as tsclass from '@tsclass/tsclass';
-
 export { tsclass };

ts/reception/classes.apitoken.ts

@@ -1,5 +1,5 @@
 import { ApiTokenManager } from './classes.apitokenmanager.js';
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 
 @plugins.smartdata.Manager(() => {
   return (this as any).manager;

ts/reception/classes.apitokenmanager.ts

@@ -1,5 +1,5 @@
 import { Reception } from './classes.reception.js';
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 
 export class ApiTokenManager {
   public receptionRef: Reception;

ts/reception/classes.billingplan.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { BillingPlanManager } from './classes.billingplanmanager.js';
 import { User } from './classes.user.js';
 

ts/reception/classes.billingplanmanager.ts

@@ -1,6 +1,6 @@
 import { Reception } from './classes.reception.js';
 import { BillingPlan } from './classes.billingplan.js';
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 
 export class BillingPlanManager {
   public receptionRef: Reception;

ts/reception/classes.housekeeping.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { Reception } from './classes.reception.js';
 import { logger } from './logging.js';
 

ts/reception/classes.jwt.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { JwtManager } from './classes.jwtmanager.js';
 
 /**

ts/reception/classes.jwtmanager.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { Reception } from './classes.reception.js';
 import { Jwt } from './classes.jwt.js';
 
@@ -60,7 +60,7 @@ export class JwtManager {
 
   public async pushPublicKeyToClients() {
     const targetConnections =
-      await this.receptionRef.serviceServer.typedsocket.findAllTargetConnectionsByTag<plugins.lointReception.tags.ITag_LolePubapi>(
+      await this.receptionRef.options.websiteServer.typedserver.typedsocket.findAllTargetConnectionsByTag<plugins.lointReception.tags.ITag_LolePubapi>(
         'lole-reception',
         {
           backendToken: '',
@@ -68,7 +68,7 @@ export class JwtManager {
       );
     for (const targetConnection of targetConnections) {
       const pushPublicKeyTr =
-        this.receptionRef.serviceServer.typedsocket.createTypedRequest<plugins.lointReception.request.IReq_PushPublicKeyForValidation>(
+        this.receptionRef.options.websiteServer.typedserver.typedsocket.createTypedRequest<plugins.lointReception.request.IReq_PushPublicKeyForValidation>(
           'pushPublicKeyForValidation',
           targetConnection
         );
@@ -80,7 +80,7 @@ export class JwtManager {
 
   public async pushBlockedJwtIdListToClients() {
     const targetConnections =
-      await this.receptionRef.serviceServer.typedsocket.findAllTargetConnectionsByTag<plugins.lointReception.tags.ITag_LolePubapi>(
+      await this.receptionRef.options.websiteServer.typedserver.typedsocket.findAllTargetConnectionsByTag<plugins.lointReception.tags.ITag_LolePubapi>(
         'lole-reception',
         {
           backendToken: '',
@@ -88,7 +88,7 @@ export class JwtManager {
       );
       for (const targetConnection of targetConnections) {
         const pushPublicKeyTr =
-          this.receptionRef.serviceServer.typedsocket.createTypedRequest<plugins.lointReception.request.IReq_PushOrGetJwtIdBlocklist>(
+          this.receptionRef.options.websiteServer.typedserver.typedsocket.createTypedRequest<plugins.lointReception.request.IReq_PushOrGetJwtIdBlocklist>(
             'pushOrGetJwtIdBlocklist',
             targetConnection
           );

ts/reception/classes.loginsession.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { LoginSessionManager } from './classes.loginsessionmanager.js';
 import { User } from './classes.user.js';
 

ts/reception/classes.loginsessionmanager.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { LoginSession } from './classes.loginsession.js';
 import { Reception } from './classes.reception.js';
 

ts/reception/classes.organization.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { OrganizationManager } from './classes.organizationmanager.js';
 import { User } from './classes.user.js';
 

ts/reception/classes.organizationmanager.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { Reception } from './classes.reception.js';
 import { Organization } from './classes.organization.js';
 import { User } from './classes.user.js';

ts/reception/classes.reception.ts

@@ -1,11 +1,10 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
-import * as paths from './paths.js';
+import * as paths from '../paths.js';
 import { logger } from './logging.js';
 
 import { JwtManager } from './classes.jwtmanager.js';
 import { LoginSessionManager } from './classes.loginsessionmanager.js';
 import { RegistrationSessionManager } from './classes.registrationsessionmanager.js';
-import { ReceptionServer } from './classes.receptionserver.js';
 import { ReceptionDb } from './classes.receptiondb.js';
 import { ReceptionMailer } from './classes.receptionmailer.js';
 import { UserManager } from './classes.usermanager.js';
@@ -15,6 +14,15 @@ import { OrganizationManager } from './classes.organizationmanager.js';
 import { RoleManager } from './classes.rolemanager.js';
 import { BillingPlanManager } from './classes.billingplanmanager.js';
 
+export interface IReceptionOptions {
+  /**
+   * a name for the idp instance.
+   */
+  name: string;
+  mongoDescriptor: plugins.smartdata.IMongoDescriptor;
+  websiteServer: plugins.typedserver.utilityservers.UtilityWebsiteServer;
+}
+
 export class Reception {
   public projectinfoNpm = new plugins.projectinfo.ProjectinfoNpm(paths.packageDir);
   public typedrouter = new plugins.typedrequest.TypedRouter();
@@ -22,9 +30,6 @@ export class Reception {
   public szPlatformClient = new plugins.szPlatformClient.SzPlatformClient();
   public db = new ReceptionDb(this);
 
-  // server
-  public serviceServer = new ReceptionServer(this);
-
   // managers
   public jwtManager = new JwtManager(this);
   public loginSessionManager = new LoginSessionManager(this);
@@ -37,16 +42,25 @@ export class Reception {
   public billingPlanManager = new BillingPlanManager(this);
   housekeeping = new ReceptionHousekeeping(this);
 
-  constructor(public databaseName?: string) {}
+  constructor(public options: IReceptionOptions) {
+    if (!options.mongoDescriptor) {
+      throw new Error('mongoDescriptor is required');
+    }
+    if (!options.websiteServer) {
+      throw new Error('websiteServer is required');
+    }
+  }
 
   /**
    * starts the reception instance
    */
   public async start() {
     logger.log('info', 'starting reception');
-    await this.db.start(this.databaseName);
+    logger.log('info', 'adding typedrouter to website server');
+    this.options.websiteServer.typedrouter.addTypedRouter(this.typedrouter);
+    logger.log('info', 'starting database');
+    await this.db.start();
     await this.jwtManager.start();
-    await this.serviceServer.start();
   }
 
   /**
@@ -54,7 +68,6 @@ export class Reception {
    */
   public async stop() {
     await this.housekeeping.stop();
-    await this.serviceServer.stop();
     console.log('stopped serviceserver!');
     await this.db.stop();
   }

ts/reception/classes.receptiondb.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { Reception } from './classes.reception.js';
 
 export class ReceptionDb {
@@ -9,13 +9,9 @@ export class ReceptionDb {
     this.receptionRef = receptionRefArg;
   }
 
-  public async start(databaseNameArg?: string) {
+  public async start() {
-    this.smartdataDb = new plugins.smartdata.SmartdataDb({
+    console.log(this.receptionRef.options.mongoDescriptor);
-      mongoDbUser: await this.receptionRef.serviceQenv.getEnvVarOnDemand('MONGO_DB_USER'),
+    this.smartdataDb = new plugins.smartdata.SmartdataDb(this.receptionRef.options.mongoDescriptor);
-      mongoDbName: databaseNameArg || await this.receptionRef.serviceQenv.getEnvVarOnDemand('MONGO_DB_NAME'),
-      mongoDbPass: await this.receptionRef.serviceQenv.getEnvVarOnDemand('MONGO_DB_PASS'),
-      mongoDbUrl: await this.receptionRef.serviceQenv.getEnvVarOnDemand('MONGO_DB_URL'),
-    });
     await this.smartdataDb.init();
   }
 

ts/reception/classes.receptionmailer.ts

@@ -1,7 +1,7 @@
 import { Reception } from './classes.reception.js';
 import { RegistrationSession } from './classes.registrationsession.js';
 import { User } from './classes.user.js';
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 
 export class ReceptionMailer {
   public receptionRef: Reception;

ts/reception/classes.receptionserver.ts

@@ -1,35 +0,0 @@
-import * as plugins from './plugins.js';
-import { Reception } from './classes.reception.js';
-
-export class ReceptionServer {
-  public receptionRef: Reception;
-  public serviceServer: plugins.loleServiceServer.ServiceServer;
-  public typedsocket: plugins.typedsocket.TypedSocket;
-
-  constructor(receptionRef: Reception) {
-    this.receptionRef = receptionRef;
-    this.serviceServer = new plugins.loleServiceServer.ServiceServer({
-      serviceDomain: 'reception.lossless.one',
-      serviceName: 'reception',
-      serviceVersion: this.receptionRef.projectinfoNpm.version,
-      port: parseInt(this.receptionRef.serviceQenv.getEnvVarOnDemand('TEST_PORT')) || 3000,
-      addCustomRoutes: async (serverArg) => {
-        serverArg.addRoute(
-          '/typedrequest',
-          new plugins.loleServiceServer.HandlerTypedRouter(this.receptionRef.typedrouter)
-        );
-      },
-    });
-  }
-
-  async start() {
-    await this.serviceServer.start();
-    this.typedsocket = this.serviceServer.typedServer.typedsocket;
-    this.serviceServer.typedServer.typedrouter.addTypedRouter(this.receptionRef.typedrouter);
-  }
-
-  async stop() {
-    await this.typedsocket.stop();
-    await this.serviceServer.stop();
-  }
-}

ts/reception/classes.receptionstorage.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 
 /**
  * can be used to store binary data for users and organizations

ts/reception/classes.registrationsession.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 
 import { RegistrationSessionManager } from './classes.registrationsessionmanager.js';
 import { logger } from './logging.js';
@@ -157,18 +157,13 @@ export class RegistrationSession {
    * validate the mobile number of someone
    */
   public async sendValidationSms() {
-    if (!process.env.TEST_MODE) {
     this.smsCode =
-        await this.registrationSessionManagerRef.receptionRef.loleSmsClientInstance.sendSmsVerifcation(
+      await this.registrationSessionManagerRef.receptionRef.szPlatformClient.smsConnector.sendSmsVerifcation(
         {
-            fromName: 'w...global',
+          fromName: this.registrationSessionManagerRef.receptionRef.options.name,
           toNumber: parseInt(this.collectedData.userData.mobileNumber),
         }
       );
-    } else {
-      console.log('Not sending SMS in automated test mode');
-      this.smsCode = '123456';
-    }
   }
 
   /**

ts/reception/classes.registrationsessionmanager.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { RegistrationSession } from './classes.registrationsession.js';
 import { Reception } from './classes.reception.js';
 import { logger } from './logging.js';

ts/reception/classes.role.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 
 @plugins.smartdata.Manager()
 export class Role extends plugins.smartdata.SmartDataDbDoc<

ts/reception/classes.rolemanager.ts

@@ -2,7 +2,7 @@ import { Organization } from './classes.organization.js';
 import { Reception } from './classes.reception.js';
 import { Role } from './classes.role.js';
 import { User } from './classes.user.js';
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 
 export class RoleManager {
   // INSTANCE

ts/reception/classes.user.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { UserManager } from './classes.usermanager.js';
 
 /**

ts/reception/classes.usermanager.ts

@@ -1,6 +1,6 @@
 import { Reception } from './classes.reception.js';
 import { User } from './classes.user.js';
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 
 /**
  * a user manager

ts/reception/index.ts

@@ -1,15 +1,2 @@
 // general exports for testing
 export * from './classes.reception.js';
-
-// running it in production
-import { Reception } from './classes.reception.js';
-
-let reception: Reception;
-export const runCli = async () => {
-  reception = new Reception();
-  await reception.start();
-};
-
-export const stop = async () => {
-  await reception.stop();
-};

ts/reception/logging.ts

@@ -1,13 +1,6 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
-import * as paths from './paths.js';
+import * as paths from '../paths.js';
 
 const projectinfoNpm = new plugins.projectinfo.ProjectinfoNpm(paths.packageDir);
 
-export const logger = plugins.loleLog.createLoleLogger({
+export const logger = new plugins.smartlog.ConsoleLog();
-  companyUnit: 'Lossless Cloud',
-  containerName: 'reception',
-  containerVersion: projectinfoNpm.version,
-  sentryAppName: 'reception',
-  sentryDsn: 'https://fd929bdcad0a41c0b7853cdea04f9c96@o169278.ingest.sentry.io/5272722',
-  zone: 'servezone',
-});

ts/reception/paths.ts

@@ -1,3 +0,0 @@
-import * as plugins from './plugins.js';
-
-export const packageDir = plugins.path.join(plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url), '../');

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/idp.global',
-  version: '1.1.0',
+  version: '1.2.0',
   description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }

ts_web/elements/idp-logincontainer.ts

@@ -88,31 +88,31 @@ export class IdpLogincontainer extends DeesElement {
       }
 
       .loginblock {
-        max-width: 520px;
+        max-width: 500px;
         flex-grow: 1;
         transform: translate3d(0px, 0px, 0px);
         transition: all 0.2s;
         box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-        background: ${cssManager.bdTheme('#ffffff', '#181818')};
+        background: ${cssManager.bdTheme('#ffffff', '#111111')};
-        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')};
+        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')};
         border-radius: 16px;
         overflow: hidden;
       }
 
-      img {
+      h1 {
-        width: 130px;
+        font-size: 24px;
-        min-height: 34.9px;
+        font-family: 'Cal Sans';
-        display: block;
+        text-align: center;
-        margin: auto;
+        letter-spacing:0.0125em;
-        margin-top: 16px;
+      }
-        margin-bottom: 25px;
+
-        filter: ${cssManager.bdTheme('invert(1)', '')};
+      .contentSpacer {
+        padding: 0px 0px 16px 0px;
       }
 
       .legalinfo {
         text-align: center;
         margin: auto;
-        margin-top: 10px;
         color: ${cssManager.bdTheme('#666', '#ccc')};
         font-size: 12px;
         line-height: 100%;
@@ -133,10 +133,10 @@ export class IdpLogincontainer extends DeesElement {
     return html`
       <div class="mainContainer loginPromptContainer">
         <div class="loginblock">
-          <img
+          <h1>idp.global</h1>
-            src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
+          <div class="contentSpacer">
-          />
             <idp-login></idp-login>
+          </div>
           <div class="legalinfo">
             <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
             | <a href="https://task.vc/" target="_blank">Company Website</a>

ts_web/elements/idp-loginprompt.ts

@@ -27,10 +27,6 @@ declare global {
 @customElement('idp-login')
 export class IdpLogin extends DeesElement {
   public static demo = () => html`<idp-login></idp-login>`;
-  public static receptionUrl = 'https://reception.lossless.one/typedrequest';
-
-  @property()
-  public activePane: 'login' | 'register' = 'login';
 
   @property()
   public productOfInterest: string;
@@ -60,56 +56,18 @@ export class IdpLogin extends DeesElement {
         color: ${cssManager.bdTheme('#333333', '#ffffff')};
       }
 
-      .box {
-        opacity: 0;
-        cursor: pointer;
-        overflow: hidden;
-        transition: all 0.2s ease;
-        height: 0px;
-      }
-
-      .box.active {
-        opacity: 1 !important;
-        height: 360px;
-        cursor: auto;
-      }
-
-      .loginbox {
-      }
-
-      .registerbox {
-      }
-
       .boxcontent {
         margin: 0px 20px;
       }
 
-      .info {
-        text-align: center;
-        padding: 32px;
-        line-height: 1.5em;
-        font-size: 12px;
-        font-weight: 600;
-        color: #999;
-      }
-
       .registerButton {
-        display: block;
+        margin-top: 16px;
-        transition: all 0.2s ease;
-        will-change: transform;
-        cursor: pointer;
-      }
-
-      .registerButton:hover {
-        color: #fff;
-        transform: scale(1.02);
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="loginbox box ${this.activePane === 'login' ? 'active' : ''}">
       <div class="boxcontent">
         <dees-form
           id="loginForm"
@@ -133,36 +91,8 @@ export class IdpLogin extends DeesElement {
             .isPasswordBool=${true}
           ></dees-input-text>
           <dees-form-submit id="loginSubmitButton"></dees-form-submit>
-            <div class="info">
-              You'll go here: ${this.appData ? html`${this.appData.appUrl}` : html``}
-              <p><span class="registerButton" @click=${() => {this.activePane = 'register'}}>You can also register for a new account.</span></p>
-            </div>
         </dees-form>
-        </div>
+        <dees-button type="discreet" class="registerButton">Register instead</dees-button>
-      </div>
-      <div class="registerbox box ${this.activePane === 'register' ? 'active' : ''}">
-        <div class="boxcontent">
-          <dees-form
-            id="registrationForm"
-            @formData="${(eventArg) => {
-              this.register({
-                emailAddress: eventArg.detail.data.emailAddress,
-              });
-            }}"
-          >
-            <dees-input-text
-              .required=${true}
-              key="emailAddress"
-              label="Email-Address"
-            ></dees-input-text>
-            <dees-input-checkbox .label="${'Agree to the Terms and Conditions'}"></dees-input-checkbox>
-            <dees-form-submit>Send Verification Email</dees-form-submit>
-            <div class="info">
-              Already have an account?
-              <p><span class="registerButton" @click=${() => {this.activePane = 'login'}}>Login instead.</span></p>
-            </div>
-          </dees-form>
-        </div>
       </div>
     `;
   }
@@ -174,7 +104,7 @@ export class IdpLogin extends DeesElement {
     const loginSubmitButton: DeesFormSubmit = loginForm.querySelector('#loginSubmitButton');
     const setButtonText = async () => {
       if (loginPasswordInput.value) {
-        console.log('updating text of loginprompt.')
+        console.log('updating text of loginprompt.');
         loginSubmitButton.text = 'Login';
       } else {
         loginSubmitButton.text = 'Send magic link (or enter password)';

ts_web/elements/idp-registerprompt.ts

@@ -0,0 +1,189 @@
+import * as plugins from '../plugins.js';
+
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  type TemplateResult,
+  css,
+  cssManager,
+  state,
+  domtools,
+} from '@design.estate/dees-element';
+
+// third party catalogs
+import '@uptime.link/webwidget';
+
+import '@design.estate/dees-catalog';
+import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-registrationprompt': IdpRegistrationPrompt;
+  }
+}
+
+@customElement('idp-registrationprompt')
+export class IdpRegistrationPrompt extends DeesElement {
+  public static demo = () => html`<idp-login></idp-login>`;
+
+  @property()
+  public productOfInterest: string;
+
+  @property()
+  jwt: string;
+
+  @property({
+    reflect: true,
+    type: Object,
+  })
+  appData: plugins.idpInterfaces.data.IApp;
+
+  public jwtObserable = new domtools.plugins.smartrx.rxjs.Subject<string>();
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        font-family: 'Geist Sans';
+        display: block;
+        color: ${cssManager.bdTheme('#333333', '#ffffff')};
+      }
+
+      .box {
+        opacity: 0;
+        cursor: pointer;
+        overflow: hidden;
+        transition: all 0.2s ease;
+        height: 0px;
+      }
+
+      .boxcontent {
+        margin: 0px 20px;
+      }
+
+      .registerButton {
+        display: block;
+        transition: all 0.2s ease;
+        will-change: transform;
+        cursor: pointer;
+      }
+
+      .registerButton:hover {
+        color: #fff;
+        transform: scale(1.02);
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="boxcontent">
+        <dees-form
+          id="registrationForm"
+          @formData="${(eventArg) => {
+            this.register({
+              emailAddress: eventArg.detail.data.emailAddress,
+            });
+          }}"
+        >
+          <dees-input-text
+            .required=${true}
+            key="emailAddress"
+            label="Email-Address"
+          ></dees-input-text>
+          <dees-input-checkbox
+            .label="${'Agree to the Terms and Conditions'}"
+          ></dees-input-checkbox>
+          <dees-form-submit>Send Verification Email</dees-form-submit>
+        </dees-form>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    const domtoolsInstance = await this.domtoolsPromise;
+    const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
+    const loginPasswordInput: DeesInputText = loginForm.querySelector('#loginPasswordInput');
+    const loginSubmitButton: DeesFormSubmit = loginForm.querySelector('#loginSubmitButton');
+    const setButtonText = async () => {
+      if (loginPasswordInput.value) {
+        console.log('updating text of registrationprompt.');
+        loginSubmitButton.text = 'Login';
+      } else {
+        loginSubmitButton.text = 'Send magic link (or enter password)';
+      }
+    };
+    loginForm.changeSubject.subscribe(() => {
+      console.log(`checking button text ${loginPasswordInput.value}`);
+      setButtonText();
+    });
+    setButtonText();
+  }
+
+  private register = async (valueArg: { emailAddress: string }) => {
+    const registrationForm: DeesForm = this.shadowRoot.querySelector('#registrationForm');
+    registrationForm.setStatus('pending', 'registering...');
+    const firstSignupRequest =
+      new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_FirstRegistration>(
+        '/typedrequest',
+        'firstRegistrationRequest'
+      );
+    const response = await firstSignupRequest
+      .fire({
+        email: valueArg.emailAddress,
+        productSlugOfInterest: this.productOfInterest,
+      })
+      .catch((err) => {
+        registrationForm.setStatus('error', err.message);
+        return null;
+      });
+    if (response.status === 'ok') {
+      registrationForm.setStatus('success', 'Please check your email!');
+    }
+    console.log(response);
+  };
+
+  public async dispatchJwt(jwtArg?: string) {
+    if (jwtArg !== undefined) {
+      console.log(`dispatching jwt from loginprompt.`);
+      this.jwt = jwtArg;
+      await domtools.plugins.smartdelay.delayFor(200);
+      this.dispatchEvent(
+        new CustomEvent('leleLoginGotJwt', {
+          detail: {
+            jwt: this.jwt,
+          },
+        })
+      );
+      this.jwtObserable.next(this.jwt);
+    }
+  }
+
+  public async handleRefreshToken(refreshTokenArg: string, delayDispatchMillisArg = 0) {
+    // a refreshToken binds directly to a session.
+    // the refresh token is used on a continuous basis to get fresh and short-lived jwts
+    const refreshJwt = new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
+      '/typedrequest',
+      'refreshJwt'
+    );
+    const responseJwt = await refreshJwt.fire({
+      refreshToken: refreshTokenArg,
+    });
+
+    if (responseJwt.jwt) {
+      this.domtools.convenience.smartdelay.delayFor(delayDispatchMillisArg).then(() => {
+        this.dispatchJwt(responseJwt.jwt);
+      });
+      return responseJwt.jwt;
+    } else {
+      return null;
+    }
+  }
+}

ts_web/elements/idp-welcome.ts

@@ -36,6 +36,10 @@ export class IdpWelcome extends DeesElement {
       h1 {
         font-family: 'Cal Sans';
         text-align: center;
+        font-size: 24px;
+        margin: 24px auto;
+        padding: 0px 24px;
+        width: 500px;
         letter-spacing:0.0125em;
       }
 
@@ -43,7 +47,8 @@ export class IdpWelcome extends DeesElement {
         margin: 24px auto;
         width: 500px;
         background: #111111;
-        border-radius: 8px;
+        border-radius: 16px;
+        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')};
         padding: 24px;
       }