1.2.1

changelog.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 2024-10-04 - 1.2.1 - fix(core)
+Added logging for user email login process and fixed client URL parsing
+
+- Added info logging when loginWithEmail is requested and when a user is found.
+- Ensured reception client parses the URL correctly in IdpClient and IdpRequests classes.
+- Updated login process flow in idp-logincontainer and idp-loginprompt elements.
+- Improved element loading mechanism with updated state management in viewcontainer.
+
+## 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.1",
   "description": "An identity provider software managing user authentications, registrations, and sessions.",
   "main": "dist_ts/index.js",
   "typings": "dist_ts/index.d.ts",
@@ -22,8 +22,8 @@
     "@api.global/typedsocket": "^3.0.1",
     "@consentsoftware_private/catalog": "^1.0.73",
     "@design.estate/dees-catalog": "^1.1.8",
-    "@design.estate/dees-domtools": "^2.0.23",
-    "@design.estate/dees-element": "^2.0.15",
+    "@design.estate/dees-domtools": "^2.0.60",
+    "@design.estate/dees-element": "^2.0.38",
     "@push.rocks/lik": "^6.0.15",
     "@push.rocks/qenv": "^6.0.5",
     "@push.rocks/smartdata": "^5.2.10",
@@ -36,15 +36,15 @@
     "@push.rocks/smartpath": "^5.0.5",
     "@push.rocks/smartpromise": "^4.0.4",
     "@push.rocks/smartrx": "^3.0.7",
-    "@push.rocks/smartstate": "^2.0.0",
+    "@push.rocks/smartstate": "^2.0.19",
     "@push.rocks/smarttime": "^4.0.8",
     "@push.rocks/smartunique": "^3.0.9",
-    "@push.rocks/smarturl": "^3.0.7",
+    "@push.rocks/smarturl": "^3.1.0",
     "@push.rocks/taskbuffer": "^3.1.7",
     "@push.rocks/webjwt": "^1.0.9",
     "@push.rocks/websetup": "^3.0.15",
     "@push.rocks/webstore": "^2.0.20",
-    "@serve.zone/platformclient": "^1.0.6",
+    "@serve.zone/platformclient": "^1.0.11",
     "@tsclass/tsclass": "^4.1.2",
     "@uptime.link/webwidget": "^1.1.2"
   },
@@ -54,7 +54,7 @@
     "@git.zone/tsrun": "^1.2.8",
     "@git.zone/tswatch": "^2.0.1",
     "@push.rocks/projectinfo": "^5.0.1",
-    "@types/node": "^22.7.2"
+    "@types/node": "^22.7.4"
   },
   "private": true,
   "repository": {
@@ -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';
@@ -99,7 +99,7 @@ export class IdpDemo {
         username: 'user@example.com',
         password: 'password123',
       });
-      if(response.refreshToken) {
+      if (response.refreshToken) {
         await idpClient.storeJwt(response.jwt);
         console.log("Logged in successfully, JWT stored.");
       } else {
@@ -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) {
@@ -219,7 +219,7 @@ export class OrganizationManager {
       organizationSlug: slug,
       action: 'manifest',
     });
-    if(response.resultingOrganization) {
+    if (response.resultingOrganization) {
       console.log(`Organization ${name} created successfully.`);
     } else {
       console.log(`Organization creation failed.`);
@@ -247,7 +247,7 @@ export const refreshJwt = async (client: IdpClient) => {
   const response = await client.requests.refreshJwt.fire({
     refreshToken: currentJwt.data.refreshToken
   });
-  if(response.jwt) {
+  if (response.jwt) {
     await client.storeJwt(response.jwt);
     console.log("JWT refreshed and stored.");
     return response.jwt;
@@ -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.1',
   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 paths from './ffb.paths.js';
+import * as plugins from './plugins.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
-import * as lointReception from '../../dist_ts_interfaces/index.js';
+// Project scope
+import * as lointReception from '../dist_ts_interfaces/index.js';
+export { lointReception };
 
-export { lointReception, };
-
-// @apiglobal scope
+// @api.global scope
+import * as typedserver from '@api.global/typedserver';
 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 };
 
-
-// @pushrocks scope
+// @push.rocks 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 };
+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,6 +1,7 @@
-import * as plugins from './plugins.js';
+import * as plugins from '../plugins.js';
 import { LoginSession } from './classes.loginsession.js';
 import { Reception } from './classes.reception.js';
+import { logger } from './logging.js';
 
 export class LoginSessionManager {
   // refs
@@ -81,12 +82,14 @@ export class LoginSessionManager {
       new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_LoginWithEmail>(
         'loginWithEmail',
         async (requestDataArg) => {
+          logger.log('info', `loginWithEmail requested for: ${requestDataArg.email}`);
           const existingUser = await this.receptionRef.userManager.CUser.getInstance({
             data: {
               email: requestDataArg.email,
             },
           });
           if (existingUser) {
+            logger.log('info', `loginWithEmail found user: ${existingUser.data.email}`);
             this.emailTokenMap.findOneAndRemoveSync(
               (itemArg) => itemArg.email === existingUser.data.email
             );
@@ -103,6 +106,8 @@ export class LoginSessionManager {
               );
             });
             this.receptionRef.receptionMailer.sendLoginWithEMailMail(existingUser, loginEmailToken);
+          } else {
+            logger.log('info', `loginWithEmail did not find user: ${requestDataArg.email}`);
           }
           return {
             status: 'ok',

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 paths from './paths.js';
+import * as plugins from '../plugins.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) {
-    this.smartdataDb = new plugins.smartdata.SmartdataDb({
-      mongoDbUser: await this.receptionRef.serviceQenv.getEnvVarOnDemand('MONGO_DB_USER'),
-      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'),
-    });
+  public async start() {
+    console.log(this.receptionRef.options.mongoDescriptor);
+    this.smartdataDb = new plugins.smartdata.SmartdataDb(this.receptionRef.options.mongoDescriptor);
     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;
@@ -229,6 +229,7 @@ export class ReceptionMailer {
   }
 
   public sendLoginWithEMailMail(userArg: User, validationTokenArg: string) {
+    console.log(`sending login email to ${userArg.data.email}`);
     this.receptionRef.szPlatformClient.emailConnector.sendEmail({
       from: 'workspace.global <noreply@mail.workspace.global>',
       title: 'Click to login!',

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(
-          {
-            fromName: 'w...global',
-            toNumber: parseInt(this.collectedData.userData.mobileNumber),
-          }
-        );
-    } else {
-      console.log('Not sending SMS in automated test mode');
-      this.smsCode = '123456';
-    }
+    this.smsCode =
+      await this.registrationSessionManagerRef.receptionRef.szPlatformClient.smsConnector.sendSmsVerifcation(
+        {
+          fromName: this.registrationSessionManagerRef.receptionRef.options.name,
+          toNumber: parseInt(this.collectedData.userData.mobileNumber),
+        }
+      );
   }
 
   /**

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

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_idpclient/classes.idpclient.ts

@@ -15,16 +15,16 @@ export class IdpClient {
   public rolesReplaySubject = new plugins.smartrx.rxjs.ReplaySubject(1);
   public organizationsReplaySubject = new plugins.smartrx.rxjs.ReplaySubject(1);
 
-  public receptionTrUrl: string;
+  public parsedReceptionUrl: plugins.smarturl.Smarturl;
   constructor(receptionBaseUrlArg: string, appDataArg?: plugins.lointReception.data.IApp) {
-    this.receptionTrUrl = receptionBaseUrlArg
-    if (this.receptionTrUrl.endsWith('/')) {
-      this.receptionTrUrl = this.receptionTrUrl.slice(0, -1);
+    if (receptionBaseUrlArg.endsWith('/')) {
+      receptionBaseUrlArg = receptionBaseUrlArg.slice(0, -1);
     }
-    if (!this.receptionTrUrl.endsWith('/typedrequest')) {
-      this.receptionTrUrl = `${this.receptionTrUrl}/typedrequest`;
+    if (!receptionBaseUrlArg.endsWith('/typedrequest')) {
+      receptionBaseUrlArg = `${receptionBaseUrlArg}/typedrequest`;
     }
-    console.log(`reception client connecting to ${this.receptionTrUrl}`);
+    this.parsedReceptionUrl = plugins.smarturl.Smarturl.createFromUrl(receptionBaseUrlArg);
+    console.log(`reception client connecting to ${this.parsedReceptionUrl.toString()}`);
     if (!appDataArg) {
       appDataArg = {
         id: '', // TODO
@@ -39,6 +39,11 @@ export class IdpClient {
 
   public requests = new IdpRequests(this);
 
+  public checkWetherOnReceptionDomain() {
+    return plugins.smarturl.Smarturl.createFromUrl(window.location.href).hostname ===
+      this.parsedReceptionUrl.hostname;
+  }
+
   /**
    * app data can be transferred when redirecting to the sso domain using query params
    * this message retrieves the app data when on the sso domain
@@ -123,7 +128,7 @@ export class IdpClient {
     }
     const refreshJwtReq =
       new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_RefreshJwt>(
-        `${this.receptionTrUrl}/typedrequest`,
+        this.parsedReceptionUrl.toString(),
         'refreshJwt'
       );
     const response = await refreshJwtReq.fire({
@@ -146,7 +151,7 @@ export class IdpClient {
     const extractedJwt = await this.helpers.extractDataFromJwtString(jwt);
     const getTransferToken =
       new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_ExchangeRefreshTokenAndTransferToken>(
-        `${this.receptionTrUrl}/typedrequest`,
+        this.parsedReceptionUrl.toString(),
         'exchangeRefreshTokenAndTransferToken'
       );
     const response = await getTransferToken.fire({
@@ -184,7 +189,7 @@ export class IdpClient {
     if (transferToken) {
       const getTransferToken =
         new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_ExchangeRefreshTokenAndTransferToken>(
-          `${this.receptionTrUrl}/typedrequest`,
+          this.parsedReceptionUrl.toString(),
           'exchangeRefreshTokenAndTransferToken'
         );
       const response = await getTransferToken.fire({
@@ -231,15 +236,14 @@ export class IdpClient {
       } else {
         if (requireLoginArg) {
           const urlInstance = plugins.smarturl.Smarturl.createFromUrl(
-            'https://sso.workspace.global/',
+            this.parsedReceptionUrl.clone().set('path', '/login').toString(),
             {
               searchParams: {
                 appdata: plugins.smartjson.stringifyBase64(this.appData),
-                action: 'login',
               },
             }
           );
-          if (!globalThis.location.href.startsWith('https://sso.workspace.global/')) {
+          if (!globalThis.location.href.startsWith(this.parsedReceptionUrl.toString())) {
             globalThis.location.href = urlInstance.toString();
           }
         }
@@ -265,7 +269,7 @@ export class IdpClient {
     } else {
       // we are in the sso page
       await this.enableTypedSocket();
-      console.log(`logging out against ${this.receptionTrUrl}`)
+      console.log(`logging out against ${this.parsedReceptionUrl.toString()}`);
       const logoutTr =
         this.typedsocket.createTypedRequest<plugins.lointReception.request.ILogoutRequest>(
           'logout'
@@ -292,7 +296,7 @@ export class IdpClient {
     this.typedsocketDeferred.claim();
     this.typedsocket = await plugins.typedsocket.TypedSocket.createClient(
       this.typedrouter,
-      `${this.receptionTrUrl}/`
+      this.parsedReceptionUrl.toString()
     );
     this.typedsocketDeferred.resolve(this.typedsocket);
     return this.typedsocketDeferred.promise;

ts_idpclient/classes.idprequests.ts

@@ -12,21 +12,21 @@ export class IdpRequests {
 
   public get afterRegistrationEmailClicked () {
     return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_AfterRegistrationEmailClicked>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
       'afterRegistrationEmailClicked'
     );
   }
 
   public get setData() {
     return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_SetDataForRegistration>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
       'setDataForRegistration'
     );
   }
 
   public get mobileNumberVerification () {
     return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_MobileVerificationForRegistration>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
       'mobileVerificationForRegistration'
     );
   }
@@ -34,28 +34,28 @@ export class IdpRequests {
 
   public get finishRegistration() {
     return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_FinishRegistration>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
       'finishRegistration'
     );
   }
 
   public get loginWithUserNameAndPassword () {
     return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_LoginWithEmailOrUsernameAndPassword>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
       'loginWithEmailOrUsernameAndPassword'
     );
   } 
 
   public get obtainJwt () {
     return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_RefreshJwt>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
       'refreshJwt'
     );
   }
 
   public get obtainOneTimeToken () {
     return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_ExchangeRefreshTokenAndTransferToken>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
       'exchangeRefreshTokenAndTransferToken'
     );
   }

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.1',
   description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }

ts_web/elements/idp-logincontainer.ts

@@ -12,6 +12,7 @@ import {
 } from '@design.estate/dees-element';
 
 import { commitinfo } from '../../dist_ts/00_commitinfo_data.js';
+import { IdpState } from '../idp.state.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -23,23 +24,6 @@ declare global {
 export class IdpLogincontainer extends DeesElement {
   public static demo = () => html`<idp-logincontainer></idp-logincontainer>`;
 
-  @query('.loginPromptContainer')
-  loginPromptContainer: HTMLDivElement;
-
-  @query('.loginManagerContainer')
-  loginManagerContainer: HTMLDivElement
-
-  @query('.transferManagerContainer')
-  transferManagerContainer: HTMLDivElement
-
-  public receptionClient = new plugins.idpClient.IdpClient('https://reception.lossless.one:443', {
-    appUrl: 'https://sso.workspace.global/',
-    description: 'the central sso app for workspace.global',
-    logoUrl: 'https://assetbroker.lossless.one/some',
-    name: 'sso.workspace.global',
-    id: null,
-  });
-
   constructor() {
     super();
   }
@@ -69,50 +53,38 @@ export class IdpLogincontainer extends DeesElement {
         pointer-events: none;
       }
 
-      .loginPromptContainer.show {
-        opacity: 1;
-        pointer-events: all;
-        transform: translate3d(0px, 0px, 0px);
-      }
-
-      .loginManagerContainer.show {
-        opacity: 1;
-        pointer-events: all;
-        transform: translate3d(0px, 0px, 0px);
-      }
-
-      .transferManagerContainer.show {
+      .mainContainer.show {
         opacity: 1;
         pointer-events: all;
         transform: translate3d(0px, 0px, 0px);
       }
 
       .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')};
-        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')};
+        background: ${cssManager.bdTheme('#ffffff', '#111111')};
+        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')};
         border-radius: 16px;
         overflow: hidden;
       }
 
-      img {
-        width: 130px;
-        min-height: 34.9px;
-        display: block;
-        margin: auto;
-        margin-top: 16px;
-        margin-bottom: 25px;
-        filter: ${cssManager.bdTheme('invert(1)', '')};
+      h1 {
+        font-size: 24px;
+        font-family: 'Cal Sans';
+        text-align: center;
+        letter-spacing:0.0125em;
+      }
+
+      .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%;
@@ -131,41 +103,12 @@ export class IdpLogincontainer extends DeesElement {
 
   render() {
     return html`
-      <div class="mainContainer loginPromptContainer">
+      <div class="mainContainer">
         <div class="loginblock">
-          <img
-            src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
-          />
-          <idp-login></idp-login>
-          <div class="legalinfo">
-            <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
-            | <a href="https://task.vc/" target="_blank">Company Website</a>
-            | <a href="https://support.task.vc/" target="_blank">Support</a>
-            | SSO v${commitinfo.version}
+          <h1>idp.global</h1>
+          <div class="contentSpacer">
+            <idp-login></idp-login>
           </div>
-        </div>
-      </div>
-
-      <div class="mainContainer loginManagerContainer">
-        <div class="loginblock">
-          <img
-            src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
-          />
-          <div class="legalinfo">
-            <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
-            | <a href="https://task.vc/" target="_blank">Company Website</a>
-            | <a href="https://support.task.vc/" target="_blank">Support</a>
-            | SSO v${commitinfo.version}
-          </div>
-        </div>
-      </div>
-
-      <div class="mainContainer transferManagerContainer">
-        <div class="loginblock">
-          <img
-            src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
-          />
-          <idp-transfermanager></idp-transfermanager>
           <div class="legalinfo">
             <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
             | <a href="https://task.vc/" target="_blank">Company Website</a>
@@ -177,88 +120,10 @@ export class IdpLogincontainer extends DeesElement {
     `;
   }
 
-  public async showComponent(componentNameArg: 'loginPrompt' | 'loginManager' | 'transferManager') {
-    const domtoolsInstance = await this.domtoolsPromise;
-    const containerItems: HTMLDivElement[] = [
-      this.loginPromptContainer,
-      this.loginManagerContainer,
-      this.transferManagerContainer,
-    ];
-    const show = async (itemArg: HTMLDivElement) => {
-      for (const containerItem of containerItems) {
-        if (containerItem !== itemArg) {
-          containerItem.classList.remove('show');
-        }
-      }
-      await domtoolsInstance.convenience.smartdelay.delayFor(200);
-      itemArg.classList.add('show');
-      await domtoolsInstance.convenience.smartdelay.delayFor(200);
-    };
-    switch (componentNameArg) {
-      case 'loginPrompt':
-        await show(this.loginPromptContainer);
-        break;
-      case 'loginManager':
-        await show(this.loginManagerContainer);
-        break;
-      case 'transferManager':
-        await show(this.transferManagerContainer);
-        break;
-    }
-  }
-
-  public async determineNextAction() {
-    const domtoolsInstance = await this.domtoolsPromise;
-    let action: plugins.idpInterfaces.data.TLoginAction;
-    if (domtoolsInstance.router.queryParams.getQueryParam('action')) {
-      action = domtoolsInstance.router.queryParams.getQueryParam('action');
-    }
-
-    if (window.location.pathname === '/afterregistration') {
-      await this.domtools.convenience.smartdelay.delayFor(1000);
-      await this.receptionClient.determineLoginStatus();
-      await this.receptionClient.getTransferTokenAndSwitchToLocation('https://account.workspace.global')
-    } else if (!(await this.receptionClient.determineLoginStatus()) && action === 'login') {
-      this.showComponent('loginPrompt');
-    } else if ((await this.receptionClient.determineLoginStatus()) && action === 'login') {
-      await this.showComponent('transferManager');
-      const wgTransferManager = this.shadowRoot.querySelector('idp-transfermanager');
-      await wgTransferManager.handleTransfer();
-    } else if ((await this.receptionClient.determineLoginStatus()) && action === 'manage') {
-      this.showComponent('loginManager');
-    } else if (action === 'logout') {
-      console.log('logging out, since requested action is "logout"');
-      await this.receptionClient.logout();
-    } else {
-      this.showComponent('loginPrompt');
-    }
-  }
-
   public async firstUpdated() {
-    const domtoolsInstance = await this.domtoolsPromise;
-    await domtoolsInstance.convenience.smartdelay.delayFor(0);
-    console.log(`your are loggedin: ${await await this.receptionClient.determineLoginStatus()}`);
-    let appData: plugins.idpInterfaces.data.IApp;
-
-    if (domtoolsInstance.router.queryParams.getQueryParam('appdata')) {
-      appData = domtoolsInstance.convenience.smartjson.parseBase64(
-        domtoolsInstance.router.queryParams.getQueryParam('appdata')
-      );
-    }
-
-    const idpLogin = this.shadowRoot.querySelector('idp-login');
-    const idpTransferManager = this.shadowRoot.querySelector('idp-transfermanager');
-    idpLogin.appData = appData;
-    idpTransferManager.appData = appData;
-
-    await this.determineNextAction();
-    idpLogin.jwtObserable.subscribe({
-      next: async (jwtArg) => {
-        console.log('loggedIn');
-        await this.receptionClient.storeJwt(jwtArg);
-        await this.determineNextAction();
-      },
+    requestAnimationFrame(async () => {
+      this.shadowRoot.querySelector('.mainContainer').classList.add('show');
+      this.shadowRoot.querySelector('idp-login').focus();
     });
-    idpLogin.dispatchJwt();
   }
 }

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,109 +56,43 @@ 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;
-        transition: all 0.2s ease;
-        will-change: transform;
-        cursor: pointer;
-      }
-
-      .registerButton:hover {
-        color: #fff;
-        transform: scale(1.02);
+        margin-top: 16px;
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="loginbox box ${this.activePane === 'login' ? 'active' : ''}">
-        <div class="boxcontent">
-          <dees-form
-            id="loginForm"
-            @formData="${(eventArg) => {
-              this.login({
-                emailAddress: eventArg.detail.data.emailAddress,
-                passwordArg: eventArg.detail.data.password,
-              });
-            }}"
-          >
-            <dees-input-text
-              id="loginEmailInput"
-              .required=${true}
-              key="emailAddress"
-              label="Email-Address or Username"
-            ></dees-input-text>
-            <dees-input-text
-              .id=${'loginPasswordInput'}
-              .key=${'password'}
-              .label=${'Password'}
-              .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>
-      </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 class="boxcontent">
+        <dees-form
+          id="loginForm"
+          @formData="${(eventArg) => {
+            this.login({
+              emailAddress: eventArg.detail.data.emailAddress,
+              passwordArg: eventArg.detail.data.password,
+            });
+          }}"
+        >
+          <dees-input-text
+            id="loginEmailInput"
+            .required=${true}
+            key="emailAddress"
+            label="Email-Address or Username"
+          ></dees-input-text>
+          <dees-input-text
+            .id=${'loginPasswordInput'}
+            .key=${'password'}
+            .label=${'Password'}
+            .isPasswordBool=${true}
+          ></dees-input-text>
+          <dees-form-submit id="loginSubmitButton"></dees-form-submit>
+        </dees-form>
+        <dees-button type="discreet" class="registerButton">Register instead</dees-button>
       </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)';
@@ -192,12 +122,12 @@ export class IdpLogin extends DeesElement {
     const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
     const loginRequestWithUsernameAndPassword =
       new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
-        IdpLogin.receptionUrl,
+        '/typedrequest',
         'loginWithEmailOrUsernameAndPassword'
       );
     const loginRequestWithEmail =
       new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmail>(
-        IdpLogin.receptionUrl,
+        '/typedrequest',
         'loginWithEmail'
       );
 
@@ -238,29 +168,6 @@ export class IdpLogin extends DeesElement {
     }
   };
 
-  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>(
-        IdpLogin.receptionUrl,
-        '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.`);
@@ -281,7 +188,7 @@ export class IdpLogin extends DeesElement {
     // a refreshToken binds dierctly 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>(
-      IdpLogin.receptionUrl,
+      '/typedrequest',
       'refreshJwt'
     );
     const responseJwt = await refreshJwt.fire({
@@ -297,4 +204,8 @@ export class IdpLogin extends DeesElement {
       return null;
     }
   }
+
+  public async focus() {
+    (this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText).focus();
+  }
 }

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-registration-stepper.ts

@@ -14,7 +14,6 @@ import {
 
 @customElement('idp-registration-stepper')
 export class IdpRegistrationStepper extends DeesElement {
-  public idpState = IdpState.getSingletonInstance();
 
   @state()
   private usedSubTemplate: TemplateResult;
@@ -66,6 +65,7 @@ export class IdpRegistrationStepper extends DeesElement {
   }
 
   public async firstUpdated() {
+    const idpState = await IdpState.getSingletonInstance();
     await this.domtoolsPromise;
     this.domtools.router.on(`/finishregistration`, async (routeArg) => {
       this.storedData.validationTokenUrlParam = routeArg.queryParams.validationtoken;
@@ -82,7 +82,7 @@ export class IdpRegistrationStepper extends DeesElement {
       // lets verify the info;
       let tokenErrorMessage: string;
       const resAfterRegEmailClicked =
-        await this.idpState.idpClient.requests.afterRegistrationEmailClicked
+        await idpState.idpClient.requests.afterRegistrationEmailClicked
           .fire({
             token: this.storedData.validationTokenUrlParam,
           })
@@ -130,7 +130,7 @@ export class IdpRegistrationStepper extends DeesElement {
             validationFunc: async (stepperArg, elementArg) => {
               const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
               deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await this.idpState.idpClient.requests.setData
+                const response = await idpState.idpClient.requests.setData
                   .fire({
                     token: this.storedData.validationTokenUrlParam,
                     userData: {
@@ -172,7 +172,7 @@ export class IdpRegistrationStepper extends DeesElement {
             validationFunc: async (stepperArg, elementArg) => {
               const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
               deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await this.idpState.idpClient.requests.mobileNumberVerification
+                const response = await idpState.idpClient.requests.mobileNumberVerification
                   .fire({
                     token: this.storedData.validationTokenUrlParam,
                     mobileNumber: eventArg.detail.data.mobileNumber,
@@ -208,7 +208,7 @@ export class IdpRegistrationStepper extends DeesElement {
             validationFunc: async (stepperArg, elementArg) => {
               const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
               deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await this.idpState.idpClient.requests.mobileNumberVerification.fire({
+                const response = await idpState.idpClient.requests.mobileNumberVerification.fire({
                   token: this.storedData.validationTokenUrlParam,
                   verificationCode: eventArg.detail.data.verificationCode,
                 });
@@ -244,7 +244,7 @@ export class IdpRegistrationStepper extends DeesElement {
             validationFunc: async (stepperArg, elementArg) => {
               const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
               deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await this.idpState.idpClient.requests.setData.fire({
+                const response = await idpState.idpClient.requests.setData.fire({
                   token: this.storedData.validationTokenUrlParam,
                   userData: {
                     username: null,
@@ -256,13 +256,13 @@ export class IdpRegistrationStepper extends DeesElement {
                   },
                 });
                 const finishRegistrationResponse =
-                  await this.idpState.idpClient.requests.finishRegistration.fire({
+                  await idpState.idpClient.requests.finishRegistration.fire({
                     token: this.storedData.validationTokenUrlParam,
                   });
                 deesForm.setStatus('pending', 'User created!');
                 await this.domtools.convenience.smartdelay.delayFor(500);
                 deesForm.setStatus('pending', 'Obtaining Refresh Token...');
-                const loginResponse = await this.idpState.idpClient.requests.loginWithUserNameAndPassword.fire(
+                const loginResponse = await idpState.idpClient.requests.loginWithUserNameAndPassword.fire(
                   {
                     username: this.storedData.email,
                     password: eventArg.detail.data.password,
@@ -271,13 +271,13 @@ export class IdpRegistrationStepper extends DeesElement {
                 this.storedData.refreshToken = loginResponse.refreshToken;
 
                 deesForm.setStatus('pending', 'Obtaining JWT...');
-                const jwtResponse = await this.idpState.idpClient.requests.obtainJwt.fire({
+                const jwtResponse = await idpState.idpClient.requests.obtainJwt.fire({
                   refreshToken: this.storedData.refreshToken,
                 });
 
                 deesForm.setStatus('pending', 'Obtaining Transfer Token...');
-                await this.idpState.idpClient.setJwt(jwtResponse.jwt);
-                await this.idpState.idpClient.getTransferTokenAndSwitchToLocation('https://sso.workspace.global/afterregistration');
+                await idpState.idpClient.setJwt(jwtResponse.jwt);
+                await idpState.idpClient.getTransferTokenAndSwitchToLocation('https://sso.workspace.global/afterregistration');
               });
             },
           },

ts_web/elements/idp-welcome.ts

@@ -12,6 +12,7 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 import type { IdpViewcontainer } from '../views/viewcontainer.js';
+import { IdpState } from '../idp.state.js';
 
 @customElement('idp-welcome')
 export class IdpWelcome extends DeesElement {
@@ -36,6 +37,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 +48,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;
       }
 
@@ -60,8 +66,9 @@ export class IdpWelcome extends DeesElement {
       
       <div class="textbox">
         Do you want to sign in or register?
-        <dees-button @click=${() => {
-          this.viewContainer.loadElement(elements.IdpLogincontainer);
+        <dees-button @click=${async () => {
+          const idpState = await IdpState.getSingletonInstance();
+          idpState.domtools.router.pushUrl('/login');
         }}>Sign In</dees-button>
         <dees-button @click=${() => {}}>Register</dees-button>
       </div>

ts_web/elements/index.ts

@@ -1,5 +1,6 @@
 export * from './idp-registration-stepper.js';
 export * from './idp-logincontainer.js';
 export * from './idp-loginprompt.js';
+export * from './idp-registerprompt.js';
 export * from './idp-transfermanager.js';
 export * from './idp-welcome.js';

ts_web/idp.state.ts

@@ -1,17 +1,54 @@
 import * as plugins from './plugins.js';
+import { domtools } from '@design.estate/dees-element'
 
 export class IdpState {
   // STATIC
-  public static getSingletonInstance() {
-    if (!this.instance) {
-      this.instance = new IdpState();
+  private static idpStateDeferred = plugins.smartpromise.defer<IdpState>();
+  public static async getSingletonInstance() {
+    if (!this.idpStateDeferred.claimed) {
+      this.idpStateDeferred.claim();
+      const newIdpState = new IdpState();
+      await newIdpState.init();
+      this.idpStateDeferred.resolve(newIdpState);
     }
-    return this.instance;
+    return this.idpStateDeferred.promise;
   }
 
-  private static instance: IdpState;
-
   // INSTANCE
   public receptionUrl = 'https://reception.lossless.one/typedrequest';
   public idpClient = new plugins.idpClient.IdpClient(this.receptionUrl);
+  public domtools: domtools.DomTools;
+  public mainStatePart: plugins.deesDomtools.plugins.smartstate.StatePart<'main', {
+    view: 'welcome' | 'login' | 'register';
+  }>
+
+  public async init() {
+    const domtoolsInstance = await domtools.DomTools.setupDomTools();
+    this.domtools = domtoolsInstance;
+    const state = new plugins.deesDomtools.plugins.smartstate.Smartstate<'main'>();
+    this.mainStatePart = await state.getStatePart('main', {
+      view: 'welcome',
+    }, 'soft');
+    this.domtools.router.on('/', async () => {
+      await this.mainStatePart.setState({
+        ...this.mainStatePart.getState(),
+        view: 'welcome',
+      })
+    });
+
+    this.domtools.router.on('/login', async () => {
+      await this.mainStatePart.setState({
+        ...this.mainStatePart.getState(),
+        view: 'login',
+      })
+    });
+
+    this.domtools.router.on('/register', async () => {
+      await this.mainStatePart.setState({
+        ...this.mainStatePart.getState(),
+        view: 'register',
+      })
+    });
+    this.domtools.router._handleRouteState();
+  }
 }

ts_web/index.ts

@@ -58,8 +58,6 @@ const run = async () => {
 
 
   render(mainTemplate, document.body);
-  const viewContainer: IdpViewcontainer = document.querySelector('idp-viewcontainer');
-  viewContainer.loadElement(IdpWelcome);
 
 
 };

ts_web/plugins.ts

@@ -13,6 +13,13 @@ export { typedrequest };
 
 // @design.estate scope
 import * as deesCatalog from '@design.estate/dees-catalog';
+import * as deesDomtools from '@design.estate/dees-domtools';
 import * as deesElement from '@design.estate/dees-element';
 
-export { deesCatalog, deesElement };
+export { deesCatalog, deesDomtools, deesElement };
+
+// @push.rocks scope
+import * as smartpromise from '@push.rocks/smartpromise';
+import * as smarturl from '@push.rocks/smarturl';
+
+export { smartpromise, smarturl };

ts_web/views/viewcontainer.ts

@@ -1,4 +1,6 @@
+import { IdpState } from '../idp.state.js';
 import * as plugins from '../plugins.js';
+import * as elements from '../elements/index.js';
 
 import {
   customElement,
@@ -32,21 +34,20 @@ export class IdpViewcontainer extends DeesElement {
         min-width: 100vh;
         min-height: 100vh;
       }
-      
-     `,
+    `,
   ];
 
   public render(): TemplateResult {
     return html`
       <style></style>
-      <div class="viewContainer">
-
-      </div>
+      <div class="viewContainer"></div>
     `;
   }
 
   public currentElement: plugins.deesElement.DeesElement;
   public async loadElement(viewElement: typeof plugins.deesElement.DeesElement) {
+    const idpState = await IdpState.getSingletonInstance();
+
     // Wait until the viewContainer itself is rendered
     await this.updateComplete;
 
@@ -74,4 +75,24 @@ export class IdpViewcontainer extends DeesElement {
     // Set the new element as the current element
     this.currentElement = newElement;
   }
+
+  public async firstUpdated() {
+    const idpState = await IdpState.getSingletonInstance();
+    idpState.mainStatePart
+      .select((stateArg) => stateArg.view)
+      .subscribe(async (viewArg) => {
+        switch (viewArg) {
+          case 'welcome':
+            await this.loadElement(elements.IdpWelcome);
+            break;
+          case 'login':
+            console.log('now on /login');
+            await this.loadElement(elements.IdpLogincontainer);
+            break;
+          case 'register':
+            await this.loadElement(elements.IdpRegistrationPrompt);
+            break;
+        }
+      });
+  }
 }