@sparkle-learning/core 0.0.19 → 0.0.20

package/dist/collection/components/mini-apps/sparkle-mood/sparkle-mood.js

@@ -1,7 +1,9 @@
-import { Component, State, Host, getAssetPath, h } from '@stencil/core';
-import { SparkleGlobal, MyMoodTemplate } from "../../../util";
+import { Component, State, Prop, Host, getAssetPath, h } from '@stencil/core';
+import { SparkleGlobal, MyMoodTemplate, MyMoodTemplateJSON } from "../../../util";
 import { EnvironmentConfigService } from "../../../services/environment/environment-config.service";
 import { AssetsService } from "../../../services/core/assets.service";
+import { FeedService } from '../../../services/feed.service';
+import feedStore from '../../../stores/feed.store';
 export class SparkleMood {
   constructor() {
     this.feelingItems = ["Anger", "Fear", "Disgust", "Happiness", "Sadness", "Suprise", "Neutral", "Anxiety", "Love", "Depression", "Contempt", "Pride", "Shame", "Envy"];
@@ -31,20 +33,23 @@ export class SparkleMood {
     }
     else if (this.currentStep == "LOCATION") {
       const sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
-      console.log(sparkleConfig);
       const tocData = await AssetsService.getInstance().loadJsonFile(sparkleConfig.tocPath);
       var model = {
         CourseId: tocData.id,
-        PostText: MyMoodTemplate(this.feeling, this.intensity, this.location),
+        PostText: MyMoodTemplate(this.feeling, this.intensity, getAssetPath(`../assets/img/mood/` + this.location)),
+        PostTextJSON: MyMoodTemplateJSON(this.feeling, this.intensity, getAssetPath(`../assets/img/mood/` + this.location)),
         ExternalResourceUrl: "",
         IsPublic: this.public,
         MiniAppId: SparkleGlobal.MY_MOOD_APP_ID,
       };
-      console.log(model);
-      //      this.store.dispatch(new fromRootStore.PostMood(model));
+      const result = await FeedService.getInstance().createPost(model);
+      if (result.Succeeded) {
+        this.history.replace('/home');
+      }
     }
   }
   render() {
+    const buttonLabel = this.currentStep == "LOCATION" ? "SUBMIT" : "NEXT";
     return (h(Host, null,
       h("div", { class: `${this.currentStep == "FEELING" ? '' : 'hide'}` },
         h("ion-list", null,
@@ -64,7 +69,7 @@ export class SparkleMood {
               h("ion-radio", { slot: "start", value: item })))))),
       h("div", { class: `${this.currentStep == "LOCATION" ? '' : 'hide'}` },
         h("ion-list", null,
-          h("ion-radio-group", { name: "location", value: this.location, onIonChange: (ev) => this.location = getAssetPath(`../assets/img/mood/` + ev.detail.value) },
+          h("ion-radio-group", { name: "location", value: this.location, onIonChange: (ev) => this.location = ev.detail.value },
             h("ion-list-header", null,
               h("ion-label", null,
                 h("h3", null, "LOCATION"))),
@@ -77,7 +82,9 @@ export class SparkleMood {
             h("ion-checkbox", { slot: "start", onChange: (ev) => this.public = ev.detail.checked, checked: true })))),
       h("ion-item", { lines: "none" },
         this.currentStep != "FEELING" && h("ion-button", { size: "default", slot: "start", onClick: () => this.back() }, "BACK"),
-        h("ion-button", { slot: "end", color: "primary", size: "default", onClick: () => this.next() }, this.currentStep == "LOCATION" ? "SUBMIT" : "NEXT"))));
+        h("ion-button", { slot: "end", color: "primary", size: "default", onClick: () => this.next(), disabled: feedStore.state.createPostLoading },
+          feedStore.state.createPostLoading && h("ion-spinner", { name: "dots" }),
+          buttonLabel))));
   }
   static get is() { return "sparkle-mood"; }
   static get originalStyleUrls() { return {
@@ -86,7 +93,30 @@ export class SparkleMood {
   static get styleUrls() { return {
     "$": ["sparkle-mood.css"]
   }; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
   static get states() { return {
+    "loading": {},
     "feeling": {},
     "intensity": {},
     "location": {},

package/dist/collection/components/sparkle-course-root/sparkle-course-root.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-course-root/sparkle-course-root.js

@@ -5,6 +5,7 @@ import { AssetsService } from "../../services/core/assets.service";
 import { AuthStore } from "../../stores/auth.store";
 import { AuthService } from "../../services/auth/auth.service";
 import { initSetupConfig as initSetupSparkleConfig } from '../../services/environment/environment-config';
+import userStore from '../../stores/user.store';
 export class SparkleCourseRoot {
   constructor() {
     this.history = null;
@@ -63,20 +64,21 @@ export class SparkleCourseRoot {
     await sidebar.show();
   }
   renderPage(path) {
-    return (h("stencil-route", { url: "/" + path, routeRender: props => [this.renderHeaderAndMenu(), h("sparkle-page", { path: "" },
+    return (h("stencil-route", { url: "/" + path, routeRender: props => [this.renderHeaderAndMenu(), h("sparkle-page", { history: this.history, path: "" },
           path == "login" && h("sparkle-login", null),
-          path == "signup" && h("sparkle-signup", null),
-          path == "forgot-password" && h("sparkle-forgot-password", null),
-          path == "home/my-mood" && h("sparkle-mood", null),
-          path == "home/my-health" && h("sparkle-health", null),
-          path == "home/my-goals" && h("sparkle-goals", null),
-          path == "home/great-white-wall" && h("sparkle-gww", null))
+          path == "signup" && h("sparkle-signup", { history: this.history }),
+          path == "forgot-password" && h("sparkle-forgot-password", { history: this.history }),
+          path == "reset-password" && h("sparkle-reset-password", { history: this.history }))
       ] }));
   }
   renderPrivatePage(path) {
-    return (h(PrivateRoute, { url: "/" + path, render: () => [this.renderHeaderAndMenu(), h("sparkle-page", { path: "" },
+    return (h(PrivateRoute, { url: "/" + path, render: () => [this.renderHeaderAndMenu(), h("sparkle-page", { history: this.history, path: "" },
           path == "profile" && h("sparkle-user-profile", null),
-          path == "enrollment" && h("sparkle-user-enrollment", null))
+          path == "enrollment" && h("sparkle-user-enrollment", null),
+          path == "home/my-mood" && h("sparkle-mood", { history: this.history }),
+          path == "home/my-health" && h("sparkle-health", { history: this.history }),
+          path == "home/my-goals" && h("sparkle-goals", null),
+          path == "home/great-white-wall" && h("sparkle-gww", null))
       ] }));
   }
   renderHeaderAndMenu() {
@@ -87,11 +89,11 @@ export class SparkleCourseRoot {
   }
   renderHeader() {
     return [
-      h("sparkle-header", { courseName: this.tocData.name, toggleClickFn: this.toggleMenu, signoutClickFn: this.signout, authUser: AuthStore.state.isAuthenticated }, this.renderLogo())
+      h("sparkle-header", { courseName: this.tocData.name, toggleClickFn: this.toggleMenu, signoutClickFn: this.signout, authUser: AuthStore.state.isAuthenticated, imageUrl: userStore.state.user.ProfileImage }, this.renderLogo())
     ];
   }
-  signout() {
-    AuthService.getInstance().signOut();
+  async signout() {
+    await AuthService.getInstance().signOut();
     this.history.replace('/login', {});
   }
   renderLogo() {
@@ -111,24 +113,21 @@ export class SparkleCourseRoot {
               this.renderHeaderAndMenu(),
               h("sparkle-unauthorized", null)
             ] }),
-          h("stencil-route", { url: "/course/:page*", routeRender: props => [this.renderHeaderAndMenu(), h("sparkle-page", { path: `/course/${props.match.params.page || 'index'}.json`, onClick: this.handlePageClick })] }),
-          h("stencil-route", { url: "/presentation/course/:page*", routeRender: props => h("sparkle-page", { presentation: true, path: `/course/${props.match.params.page || 'index'}.json`, onClick: this.handlePageClick }) }),
-          h("stencil-route", { url: "/presentation/teacher/:page*", routeRender: props => [
+          h("stencil-route", { url: "/course/:page*", routeRender: props => [this.renderHeaderAndMenu(), h("sparkle-page", { history: this.history, path: `/course/${props.match.params.page || 'index'}.json`, onClick: this.handlePageClick })] }),
+          h("stencil-route", { url: "/presentation/course/:page*", routeRender: props => h("sparkle-page", { history: this.history, presentation: true, path: `/course/${props.match.params.page || 'index'}.json`, onClick: this.handlePageClick }) }),
+          h("stencil-route", { url: "/presentation/teacher/course/:page*", routeRender: props => [
               h("sparkle-facilitator-header", { courseName: this.tocData.name, toggleStudentClickFn: this.toggleStudentSidebar }, this.renderLogo()),
-              h("sparkle-facilitator-page", { path: `/course/${props.match.params.page || 'index'}-notes.json`, onClick: this.handlePageClick }),
-              h("sparkle-sidebar", { position: "right", "header-text": "Online Students", id: "onlineStudents" },
-                h("ion-button", { color: "primary" }, "Primary"),
-                ",",
-                h("sparkle-online-students", null))
+              h("sparkle-facilitator-page", { notesPath: `/course/${props.match.params.page || 'index'}-notes.json`, path: `/course/${props.match.params.page || 'index'}.json`, onClick: this.handlePageClick }),
             ] }),
-          this.renderPage("home/my-mood"),
-          this.renderPage("home/my-health"),
-          this.renderPage("home/my-goals"),
-          this.renderPage("home/great-white-wall"),
-          h(PrivateRoute, { url: "/home/:page*", render: props => [this.renderHeaderAndMenu(), h("sparkle-page", { path: `/course/home/${props.match.params.page || 'index'}.json`, onClick: this.handlePageClick })] }),
+          this.renderPrivatePage("home/my-mood"),
+          this.renderPrivatePage("home/my-health"),
+          this.renderPrivatePage("home/my-goals"),
+          this.renderPrivatePage("home/great-white-wall"),
+          h(PrivateRoute, { url: "/home/:page*", render: props => [this.renderHeaderAndMenu(), h("sparkle-page", { history: this.history, path: `/course/home/${props.match.params.page || 'index'}.json`, onClick: this.handlePageClick })] }),
           this.renderPage("login"),
           this.renderPage("signup"),
           this.renderPage("forgot-password"),
+          this.renderPage("reset-password"),
           this.renderPrivatePage("profile"),
           this.renderPrivatePage("enrollment")))));
   }

package/dist/collection/components/sparkle-emoji/sparkle-emoji.css

@@ -1,16 +1,16 @@
-:host {
-  display: inline-block;
-}
-
-span.xs {
-  font-size: 1em;
-}
-span.sm {
-  font-size: 2em;
-}
-span.md {
-  font-size: 3em;
-}
-span.lg {
-  font-size: 4em;
-}
+:host {
+  display: inline-block;
+}
+
+span.xs {
+  font-size: 1em;
+}
+span.sm {
+  font-size: 2em;
+}
+span.md {
+  font-size: 3em;
+}
+span.lg {
+  font-size: 4em;
+}

package/dist/collection/components/sparkle-feed-post/sparkle-feed-post.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-feedback/sparkle-feedback.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-feedback/sparkle-feedback.js

@@ -1,5 +1,6 @@
 import { Component, Element, State, Host, h } from '@stencil/core';
 import { StudentService } from "../../services/student.service";
+import { toastController } from '@ionic/core';
 export class SparkleFeedback {
   constructor() {
     this.formControls = {
@@ -48,9 +49,21 @@ export class SparkleFeedback {
         Type: this.formControls.type.value
       });
       console.log(result);
-      if (result) {
+      if (result.Succeeded) {
+        const toast = await toastController.create({
+          message: "Feedback submitted successfully",
+          duration: 3000
+        });
+        toast.present();
         this.dismiss();
       }
+      else {
+        const toast = await toastController.create({
+          message: result.Message,
+          duration: 3000
+        });
+        toast.present();
+      }
     }
   }
   dismiss(data) {

package/dist/collection/components/sparkle-forgot-password/sparkle-forgot-password.js

@@ -1,5 +1,6 @@
-import { Component, State, h, getAssetPath } from '@stencil/core';
+import { Component, State, Prop, h, getAssetPath } from '@stencil/core';
 import { AccountService } from "../../services/account.service";
+import { AuthStore } from '../../stores';
 export class SparkleForgotPassword {
   constructor() {
     this.formControls = {
@@ -34,11 +35,18 @@ export class SparkleForgotPassword {
       }
     }
     if (isFormValid) {
-      console.log('submit');
       let result = await AccountService.getInstance().forgotPassword({
-        Email: this.formControls.email.value
+        Email: this.formControls.email.value,
+        ClientURL: window.location.origin + "/reset-password"
       });
-      console.log(result);
+      if (result.Succeeded) {
+        this.history.replace('/login', {});
+      }
+      else if (result.Failed) {
+        if (result.Errors.length > 0) {
+          this.validationErrors = result.Errors;
+        }
+      }
     }
   }
   render() {
@@ -46,6 +54,7 @@ export class SparkleForgotPassword {
       h("div", null,
         h("div", { class: "login-logo" },
           h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })),
+        h("sparkle-validation-error", { errors: this.validationErrors }),
         h("form", { novalidate: "true", onSubmit: (e) => this.handleSubmit(e) },
           h("ion-list", { "no-lines": true },
             h("ion-item", { lines: "none" }, "Enter your email address and we will send you a link to reset your password."),
@@ -56,7 +65,9 @@ export class SparkleForgotPassword {
               h("p", { hidden: this.formControls.email.isValid || this.submitted === false, class: "ion-padding-left" }, "Email is required")),
             h("br", null),
             h("div", { class: "ion-padding" },
-              h("ion-button", { type: "submit", expand: "block" }, "SEND PASSWORD RESET EMAIL")))))
+              h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading },
+                AuthStore.state.loading && h("ion-spinner", { name: "dots" }),
+                " SEND PASSWORD RESET EMAIL")))))
     ];
   }
   static get is() { return "sparkle-forgot-password"; }
@@ -66,7 +77,30 @@ export class SparkleForgotPassword {
   static get styleUrls() { return {
     "$": ["sparkle-forgot-password.css"]
   }; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
   static get states() { return {
+    "validationErrors": {},
     "formControls": {},
     "submitted": {}
   }; }

package/dist/collection/components/sparkle-login/sparkle-login.js

@@ -102,7 +102,9 @@ export class PageLogin {
               h("stencil-route-link", { slot: "end", url: "/forgot-password", exact: true }, "Forgot Password?"))),
           h("ion-row", null,
             h("ion-col", null,
-              h("ion-button", { type: "submit", expand: "block" }, "Log In"))),
+              h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading },
+                AuthStore.state.loading && h("ion-spinner", { name: "dots" }),
+                " Log In"))),
           h("ion-item", { lines: "none" },
             h("span", null,
               " Not registered yet? ",

package/dist/collection/components/sparkle-poll/sparkle-poll.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-quiz/sparkle-quiz-feedback/sparkle-quiz-feedback.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-quiz/sparkle-quiz-input/sparkle-quiz-input.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-quiz/sparkle-quiz-poll/sparkle-quiz-poll.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-quiz/sparkle-quiz-select/sparkle-quiz-select.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-quiz-container/sparkle-quiz-container.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-reset-password/sparkle-reset-password.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-reset-password/sparkle-reset-password.js

@@ -0,0 +1,126 @@
+import { Component, State, Prop, Host, getAssetPath, h } from '@stencil/core';
+import { AccountService } from "../../services/account.service";
+import { AuthStore } from '../../stores';
+export class SparkleResetPassword {
+  constructor() {
+    this.formControls = {
+      password: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+      confirmPassword: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+    };
+    this.submitted = false;
+  }
+  componentDidLoad() {
+    console.log(this.history.location.query.code);
+    console.log(this.history.location.query.email);
+  }
+  changeFormValue(controlName, value) {
+    this.formControls = Object.assign(Object.assign({}, this.formControls), { [controlName]: Object.assign(Object.assign({}, this.formControls[controlName]), { value: value, isValid: this.formControls[controlName].validate(value) }) });
+  }
+  async handleSubmit(e) {
+    e.preventDefault();
+    this.submitted = true;
+    let isFormValid = true;
+    //Run all validation functions
+    for (let controlName in this.formControls) {
+      let control = this.formControls[controlName];
+      control.validate(control.value);
+      if (!control.isValid) {
+        isFormValid = false;
+      }
+    }
+    if (isFormValid) {
+      let result = await AccountService.getInstance().resetPassword({
+        Email: this.history.location.query.email,
+        Token: this.history.location.query.code,
+        Password: this.formControls.password.value,
+        ConfirmPassword: this.formControls.confirmPassword.value,
+      });
+      if (result.Succeeded) {
+        this.history.replace('/login', {});
+      }
+      else if (result.Failed) {
+        if (result.Errors.length > 0) {
+          this.validationErrors = result.Errors;
+        }
+      }
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "login-logo" },
+        h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })),
+      h("sparkle-validation-error", { errors: this.validationErrors }),
+      h("form", { novalidate: "true", onSubmit: (e) => this.handleSubmit(e) },
+        h("ion-item", null,
+          h("ion-label", { position: "stacked", color: "primary" }, "Password"),
+          h("ion-input", { name: "password", type: "password", value: this.formControls.password.value, onInput: (ev) => this.changeFormValue("password", ev.target.value) })),
+        h("ion-text", { color: "danger" },
+          h("p", { hidden: this.formControls.password.isValid || this.submitted === false, class: "ion-padding-start" }, "Password is required")),
+        h("ion-item", null,
+          h("ion-label", { position: "stacked", color: "primary" }, "Confirm Password"),
+          h("ion-input", { name: "confirmPassword", type: "password", value: this.formControls.confirmPassword.value, onInput: (ev) => this.changeFormValue("confirmPassword", ev.target.value) })),
+        h("ion-text", { color: "danger" },
+          h("p", { hidden: this.formControls.confirmPassword.isValid || this.submitted === false, class: "ion-padding-start" }, "Confirm Password is required")),
+        h("br", null),
+        h("div", { class: "ion-padding" },
+          h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading },
+            AuthStore.state.loading && h("ion-spinner", { name: "dots" }),
+            " Reset Password")))));
+  }
+  static get is() { return "sparkle-reset-password"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-reset-password.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-reset-password.css"]
+  }; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "validationErrors": {},
+    "formControls": {},
+    "submitted": {}
+  }; }
+}

package/dist/collection/components/sparkle-root/sparkle-root.css

@@ -37,3 +37,19 @@
     overflow-y: hidden;
   }
 }
+
+#messagesList {
+  display: grid;
+  font-size: 12px;
+  font-weight: bold;
+  grid-template-columns: 1fr minmax(0, var(--page-width, 720px)) 1fr;
+  line-height: 2;
+  margin-left: var(--page-margin-left);
+  margin-top: var(--header-height);
+  overflow-x: hidden;
+  transform: var(--page-transform, none);
+  margin-top: 56px;
+  padding: 4px;
+  background: #e50739;
+  color: #fff;
+}

package/dist/collection/components/sparkle-root/sparkle-root.js

@@ -2,8 +2,17 @@ import { Component, Host, h, Prop } from '@stencil/core';
 import { setupConfig as setupSparkleConfig } from '../../services/environment/environment-config';
 import { HttpService } from '../../services/httpService';
 import { StudentService } from '../../services/student.service';
+import { EnvironmentConfigService } from '../../services/environment/environment-config.service';
 import { AuthStore } from "../../stores/auth.store";
+import { SignalRService } from '../../services/signalR.service';
+import { injectHistory } from '@stencil/router';
 export class SparkleRoot {
+  constructor() {
+    this.history = null;
+    this.handleStudentNavigationChange = (url) => {
+      this.history.replace(url, {});
+    };
+  }
   async componentWillLoad() {
     setupSparkleConfig({
       sparkle: Object.assign(Object.assign({}, this.config), { prod: true })
@@ -11,12 +20,14 @@ export class SparkleRoot {
     //return Promise.reject();
     await HttpService.getInstance();
     await HttpService.init();
-    if (sparkle && sparkle.auth.getToken()) {
+    var sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
+    if (sparkleConfig && sparkleConfig.auth && sparkleConfig.auth.getToken()) {
       AuthStore.state.isAuthenticated = true;
     }
     ;
     AuthStore.onChange("isAuthenticated", async (isAuthenticated) => {
       if (isAuthenticated) {
+        console.log('authenticated');
         await StudentService.getInstance().fetchUserConfiguration();
       }
     });
@@ -25,6 +36,17 @@ export class SparkleRoot {
     }
     //SignalRAspNetCoreHelper.initSignalR();
   }
+  componentDidLoad() {
+    SignalRService.getInstance().connection.on("NavigateStudentTo", this.handleStudentNavigationChange);
+    AuthStore.onChange("isAuthenticated", async (isAuthenticated) => {
+      if (isAuthenticated) {
+        SignalRService.getInstance().start();
+      }
+    });
+    if (AuthStore.state.isAuthenticated) {
+      SignalRService.getInstance().start();
+    }
+  }
   render() {
     return (h(Host, null,
       h("slot", null)));
@@ -59,3 +81,4 @@ export class SparkleRoot {
     }
   }; }
 }
+injectHistory(SparkleRoot);