@social-mail/social-mail-client 1.2.147 → 1.2.149

package/dist/common/controls/countries/CountrySelect.d.ts

@@ -0,0 +1,4 @@
+export declare const CountrySelect: (a: any) => any;
+export declare const isdForCountry: (countryCode: string) => Promise<string>;
+export declare const formatForCountry: (countryCode: string) => Promise<string>;
+//# sourceMappingURL=CountrySelect.d.ts.map

package/dist/common/controls/countries/CountrySelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelect.d.ts","sourceRoot":"","sources":["../../../../src/common/controls/countries/CountrySelect.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,aAAa,iBAIZ,CAAA;AAEd,eAAO,MAAM,aAAa,gBAAuB,MAAM,oBACiB,CAAC;AAEzE,eAAO,MAAM,gBAAgB,gBAAuB,MAAM,oBAUzD,CAAC"}

package/dist/common/controls/countries/CountrySelect.js

@@ -0,0 +1,49 @@
+System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/basic/DropDown", "@web-atoms/core/dist/services/FetchBuilder", "@web-atoms/core/dist/core/types"], function (_export, _context) {
+  "use strict";
+
+  var __awaiter, Bind, XNode, DropDown, FetchBuilder, UMD, countriesPromise, loadCountries, CountrySelect, isdForCountry, formatForCountry;
+  return {
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsWebControlsDistBasicDropDown) {
+      DropDown = _webAtomsWebControlsDistBasicDropDown.default;
+    }, function (_webAtomsCoreDistServicesFetchBuilder) {
+      FetchBuilder = _webAtomsCoreDistServicesFetchBuilder.default;
+    }, function (_webAtomsCoreDistCoreTypes) {
+      UMD = _webAtomsCoreDistCoreTypes.UMD;
+    }],
+    execute: function () {
+      ;
+      loadCountries = () => countriesPromise !== null && countriesPromise !== void 0 ? countriesPromise : countriesPromise = FetchBuilder.get(UMD.resolvePath("@social-mail/social-mail-client/content/json/countries.json")).responseAsJson();
+      _export("CountrySelect", CountrySelect = a => XNode.create(DropDown, Object.assign({
+        labelPath: item => {
+          var _a;
+          return ((_a = item.isdCode) === null || _a === void 0 ? void 0 : _a.startsWith("+")) ? item.isdCode : `+${item.isdCode} ${item.value}`;
+        },
+        valuePath: item => item.value,
+        items: Bind.oneTimeAsync(() => loadCountries())
+      }, a)));
+      _export("isdForCountry", isdForCountry = countryCode => __awaiter(void 0, void 0, void 0, function* () {
+        return (yield loadCountries()).find(x => x.value === countryCode).isdCode;
+      }));
+      _export("formatForCountry", formatForCountry = countryCode => __awaiter(void 0, void 0, void 0, function* () {
+        const countries = yield loadCountries();
+        const country = countries.find(c => c.value === countryCode);
+        if (country) {
+          const {
+            phoneFormat
+          } = country;
+          if (phoneFormat && phoneFormat !== "0.0") {
+            return phoneFormat;
+          }
+        }
+        return "####.####.####";
+      }));
+    }
+  };
+});
+//# sourceMappingURL=CountrySelect.js.map

package/dist/common/controls/countries/CountrySelect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Bind","_webAtomsCoreDistCoreBind","default","_webAtomsCoreDistCoreXNode","XNode","_webAtomsWebControlsDistBasicDropDown","DropDown","_webAtomsCoreDistServicesFetchBuilder","FetchBuilder","_webAtomsCoreDistCoreTypes","UMD","execute","loadCountries","countriesPromise","get","resolvePath","responseAsJson","_export","CountrySelect","a","create","Object","assign","labelPath","item","_a","isdCode","startsWith","value","valuePath","items","oneTimeAsync","isdForCountry","countryCode","__awaiter","find","x","formatForCountry","countries","country","c","phoneFormat"],"sources":["../../../../src/common/controls/countries/CountrySelect.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;MAAOA,IAAI,GAAAC,yBAAA,CAAAC,OAAA;IAAA,aAAAC,0BAAA;MACJC,KAAK,GAAAD,0BAAA,CAAAD,OAAA;IAAA,aAAAG,qCAAA;MACLC,QAAQ,GAAAD,qCAAA,CAAAH,OAAA;IAAA,aAAAK,qCAAA;MACRC,YAAY,GAAAD,qCAAA,CAAAL,OAAA;IAAA,aAAAO,0BAAA;MACVC,GAAG,GAAAD,0BAAA,CAAHC,GAAG;IAAA;IAAAC,OAAA,WAAAA,CAAA;MAQX;MAIKC,aAAa,GAAGA,CAAA,KAAMC,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAAhBA,gBAAgB,GAAKL,YAAY,CAACM,GAAG,CAACJ,GAAG,CAACK,WAAW,CAAC,6DAA6D,CAAC,CAAC,CAC5IC,cAAc,EAAc;MAAAC,OAAA,kBAEpBC,aAAa,GAAIC,CAAC,IAAKf,KAAA,CAAAgB,MAAA,CAACd,QAAQ,EAAAe,MAAA,CAAAC,MAAA;QACzCC,SAAS,EAAGC,IAAI,IAAI;UAAA,IAAAC,EAAA;UAAC,SAAAA,EAAA,GAAAD,IAAI,CAACE,OAAO,cAAAD,EAAA,uBAAAA,EAAA,CAAEE,UAAU,CAAC,GAAG,CAAC,IAAGH,IAAI,CAACE,OAAO,GAAG,IAAIF,IAAI,CAACE,OAAO,IAAIF,IAAI,CAACI,KAAK,EAAE;QAAA;QACpGC,SAAS,EAAGL,IAAI,IAAKA,IAAI,CAACI,KAAK;QAC/BE,KAAK,EAAE9B,IAAI,CAAC+B,YAAY,CAAC,MAAMnB,aAAa,EAAE;MAAC,GACzCO,CAAC,EAAG;MAAAF,OAAA,kBAEDe,aAAa,GAAUC,WAAmB,IAAIC,SAAA;QACvD,QAAC,MAAMtB,aAAa,EAAE,EAAEuB,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACR,KAAK,KAAKK,WAAW,CAAC,CAACP,OAAO;MAAA;MAAAT,OAAA,qBAE3DoB,gBAAgB,GAAUJ,WAAmB,IAAIC,SAAA;QAC1D,MAAMI,SAAS,GAAG,MAAM1B,aAAa,EAAE;QACvC,MAAM2B,OAAO,GAAGD,SAAS,CAACH,IAAI,CAAEK,CAAC,IAAKA,CAAC,CAACZ,KAAK,KAAKK,WAAW,CAAC;QAC9D,IAAIM,OAAO,EAAE;UACT,MAAM;YAAEE;UAAW,CAAE,GAAGF,OAAO;UAC/B,IAAIE,WAAW,IAAIA,WAAW,KAAK,KAAK,EAAE;YACtC,OAAOA,WAAW;;;QAG1B,OAAO,gBAAgB;MAC3B,CAAC;IAAA;EAAA;AAAA"}

package/dist/common/controls/phone-editor/PhoneEditor.d.ts

@@ -0,0 +1,5 @@
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+export default class PhoneEditor extends AtomControl {
+    protected preCreate(): void;
+}
+//# sourceMappingURL=PhoneEditor.d.ts.map

package/dist/common/controls/phone-editor/PhoneEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneEditor.d.ts","sourceRoot":"","sources":["../../../../src/common/controls/phone-editor/PhoneEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAG5E,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,WAAW;IAChD,SAAS,CAAC,SAAS,IAAI,IAAI;CAM9B"}

package/dist/common/controls/phone-editor/PhoneEditor.js

@@ -0,0 +1,25 @@
+System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "../countries/CountrySelect"], function (_export, _context) {
+  "use strict";
+
+  var XNode, AtomControl, CountrySelect, PhoneEditor;
+  _export("default", void 0);
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_countriesCountrySelect) {
+      CountrySelect = _countriesCountrySelect.CountrySelect;
+    }],
+    execute: function () {
+      _export("default", PhoneEditor = class PhoneEditor extends AtomControl {
+        preCreate() {
+          this.render(XNode.create("div", {
+            "data-layout": "row"
+          }, XNode.create(CountrySelect, null)));
+        }
+      });
+    }
+  };
+});
+//# sourceMappingURL=PhoneEditor.js.map

package/dist/common/controls/phone-editor/PhoneEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PhoneEditor","_export","setters","_webAtomsCoreDistCoreXNode","XNode","default","_webAtomsCoreDistWebControlsAtomControl","AtomControl","_countriesCountrySelect","CountrySelect","execute","preCreate","render","create"],"sources":["../../../../src/common/controls/phone-editor/PhoneEditor.tsx"],"sourcesContent":[null],"mappings":";;;yCAIqBA,WAAY;EAAAC,OAAA;EAAA;IAAAC,OAAA,aAAAC,0BAAA;MAJ1BC,KAAK,GAAAD,0BAAA,CAAAE,OAAA;IAAA,aAAAC,uCAAA;MACHC,WAAW,GAAAD,uCAAA,CAAXC,WAAW;IAAA,aAAAC,uBAAA;MACXC,aAAa,GAAAD,uBAAA,CAAbC,aAAa;IAAA;IAAAC,OAAA,WAAAA,CAAA;MAAAT,OAAA,YAEDD,WAAY,GAAnB,MAAOA,WAAY,SAAQO,WAAW;QACtCI,SAASA,CAAA;UACf,IAAI,CAACC,MAAM,CAACR,KAAA,CAAAS,MAAA;YAAA,eAAiB;UAAK,GAC9BT,KAAA,CAAAS,MAAA,CAACJ,aAAa,OACR,CACJ,CAAC;QACX;OACH;IAAA;EAAA;AAAA"}

package/dist/common/form/AppForm.d.ts

@@ -0,0 +1,3 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+export default function AppForm(a: any, ...nodes: XNode[]): any;
+//# sourceMappingURL=AppForm.d.ts.map

package/dist/common/form/AppForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppForm.d.ts","sourceRoot":"","sources":["../../../src/common/form/AppForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,iCAAiC,CAAC;AAuBpD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,KAAA,EAAE,GAAI,KAAK,EAAE,KAAK,EAAE,OAMpD"}

package/dist/common/form/AppForm.js

@@ -0,0 +1,41 @@
+System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled", "@web-atoms/web-controls/dist/basic/Form"], function (_export, _context) {
+  "use strict";
+
+  var XNode, styled, Form;
+  function AppForm(a, ...nodes) {
+    return XNode.create(Form, Object.assign({
+      "data-app-form": "app-form"
+    }, a), ...nodes);
+  }
+  _export("default", AppForm);
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_webAtomsWebControlsDistBasicForm) {
+      Form = _webAtomsWebControlsDistBasicForm.default;
+    }],
+    execute: function () {
+      styled.css`
+        padding: 10px;
+        border: solid 1px lightgray;
+        border-radius: 10px;
+        gap: 10px;
+
+        & h1, & h2, &h3, &h4, &h5, &h6 {
+            margin-block-start: 20px;
+            margin-block-end: 20px;
+        }
+
+        & input {
+            outline: none;
+            border: none;
+            border-bottom: solid 1px #80808080;
+            min-width: 250px;
+        }
+    `.installGlobal("[data-app-form=app-form]");
+    }
+  };
+});
+//# sourceMappingURL=AppForm.js.map

package/dist/common/form/AppForm.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AppForm","a","nodes","XNode","create","Form","Object","assign","_export","setters","_webAtomsCoreDistCoreXNode","default","_webAtomsCoreDistStyleStyled","styled","_webAtomsWebControlsDistBasicForm","execute","css","installGlobal"],"sources":["../../../src/common/form/AppForm.tsx"],"sourcesContent":[null],"mappings":";;;;EAuBc,SAAUA,OAAOA,CAACC,CAAC,EAAE,GAAIC,KAAc;IACjD,OAAOC,KAAA,CAAAC,MAAA,CAACC,IAAI,EAAAC,MAAA,CAAAC,MAAA;MAAA,iBACM;IAAU,GAClBN,CAAC,MACDC,KAAK,CACR;EACX;EAACM,OAAA,YANuBR,OAAO;EAAA;IAAAS,OAAA,aAAAC,0BAAA;MAvBxBP,KAAK,GAAAO,0BAAA,CAAAC,OAAA;IAAA,aAAAC,4BAAA;MACLC,MAAM,GAAAD,4BAAA,CAAAD,OAAA;IAAA,aAAAG,iCAAA;MACNT,IAAI,GAAAS,iCAAA,CAAAH,OAAA;IAAA;IAAAI,OAAA,WAAAA,CAAA;MAEPF,MAAM,CAACG,GAAI;;;;;;;;;;;;;;;;;KAiBV,CAACC,aAAa,CAAC,0BAA0B,CAAC;IAAC;EAAA;AAAA"}

package/dist/common/pages/user/forgot/ForgotPassword.d.ts

@@ -0,0 +1,24 @@
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+interface IVerification {
+    id?: string;
+    code?: string;
+    verified?: string;
+}
+export default class ForgotPassword extends ContentPage {
+    model: {
+        username: string;
+        password: string;
+        passwordAgain: string;
+        phoneNumber: string;
+        country: string;
+        phoneNumberText: string;
+        captcha: IVerification;
+        phone: IVerification;
+    };
+    init(): Promise<void>;
+    resetPassword(): Promise<void>;
+    askCode(): void;
+    askPasswords(): void;
+}
+export {};
+//# sourceMappingURL=ForgotPassword.d.ts.map

package/dist/common/pages/user/forgot/ForgotPassword.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForgotPassword.d.ts","sourceRoot":"","sources":["../../../../../src/common/pages/user/forgot/ForgotPassword.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AA4BhF,UAAU,aAAa;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,WAAW;IAEnD,KAAK,EAAE;QACH,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAC;QAChB,eAAe,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,aAAa,CAAC;QACvB,KAAK,EAAE,aAAa,CAAC;KACxB,CAaC;IAEI,IAAI;IAyDJ,aAAa;IAyDnB,OAAO;IAqBP,YAAY;CA4Bf"}

package/dist/common/pages/user/forgot/ForgotPassword.js

@@ -0,0 +1,219 @@
+System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled", "@web-atoms/web-controls/dist/basic/Form", "@web-atoms/web-controls/dist/basic/FormField", "@web-atoms/web-controls/dist/mobile-app/MobileApp", "../../../controls/countries/CountrySelect", "@web-atoms/web-controls/dist/basic/MaskedInput", "@web-atoms/core/dist/services/FetchBuilder", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/web/services/PopupService", "@web-atoms/web-controls/dist/basic/PasswordBox"], function (_export, _context) {
+  "use strict";
+
+  var __awaiter, __decorate, __metadata, Bind, XNode, styled, Form, FormField, ContentPage, CountrySelect, formatForCountry, isdForCountry, MaskedInput, FetchBuilder, Action, PopupService, PasswordBox, ForgotPassword, css;
+  _export("default", void 0);
+  return {
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_webAtomsWebControlsDistBasicForm) {
+      Form = _webAtomsWebControlsDistBasicForm.default;
+    }, function (_webAtomsWebControlsDistBasicFormField) {
+      FormField = _webAtomsWebControlsDistBasicFormField.default;
+    }, function (_webAtomsWebControlsDistMobileAppMobileApp) {
+      ContentPage = _webAtomsWebControlsDistMobileAppMobileApp.ContentPage;
+    }, function (_controlsCountriesCountrySelect) {
+      CountrySelect = _controlsCountriesCountrySelect.CountrySelect;
+      formatForCountry = _controlsCountriesCountrySelect.formatForCountry;
+      isdForCountry = _controlsCountriesCountrySelect.isdForCountry;
+    }, function (_webAtomsWebControlsDistBasicMaskedInput) {
+      MaskedInput = _webAtomsWebControlsDistBasicMaskedInput.default;
+    }, function (_webAtomsCoreDistServicesFetchBuilder) {
+      FetchBuilder = _webAtomsCoreDistServicesFetchBuilder.default;
+    }, function (_webAtomsCoreDistViewModelAction) {
+      Action = _webAtomsCoreDistViewModelAction.default;
+    }, function (_webAtomsCoreDistWebServicesPopupService) {
+      PopupService = _webAtomsCoreDistWebServicesPopupService.default;
+    }, function (_webAtomsWebControlsDistBasicPasswordBox) {
+      PasswordBox = _webAtomsWebControlsDistBasicPasswordBox.default;
+    }],
+    execute: function () {
+      css = styled.css`
+    & [data-border=frame] {
+        padding: 10px;
+        border-radius: 10px;
+        gap: 10px;
+
+        & h3 {
+            margin-block-start: 20px;
+            margin-block-end: 20px;
+        }
+
+        & input {
+            outline: none;
+            border: none;
+            border-bottom: solid 1px #80808080;
+            min-width: 250px;
+        }
+    }
+`.installLocal();
+      _export("default", ForgotPassword = class ForgotPassword extends ContentPage {
+        constructor() {
+          super(...arguments);
+          this.model = {
+            username: "",
+            password: "",
+            passwordAgain: "",
+            phoneNumber: "",
+            country: "US",
+            phoneNumberText: "",
+            phone: {
+              code: ""
+            },
+            captcha: {
+              code: ""
+            }
+          };
+        }
+        init() {
+          return __awaiter(this, void 0, void 0, function* () {
+            this.hideToolbar = true;
+            this.title = "Reset Password";
+            const {
+              id
+            } = yield FetchBuilder.put("/api/users/captcha").responseAsJson();
+            this.model.captcha.id = id;
+            this.render(XNode.create("div", {
+              class: css
+            }, XNode.create("div", {
+              "data-layout": "center-all"
+            }, XNode.create(Form, {
+              "data-border": "frame"
+            }, XNode.create("h3", null, "To reset password, enter following."), XNode.create(FormField, {
+              label: "Username"
+            }, XNode.create("input", {
+              autofocus: true,
+              value: Bind.twoWaysImmediate(() => this.model.username)
+            })), XNode.create(FormField, {
+              label: "Phone Number"
+            }, XNode.create("div", {
+              "data-layout": "row"
+            }, XNode.create(CountrySelect, {
+              value: Bind.twoWaysImmediate(() => this.model.country)
+            }), XNode.create(MaskedInput, {
+              "data-mask": Bind.oneWayAsync(() => formatForCountry(this.model.country)),
+              value: Bind.twoWaysImmediate(() => this.model.phoneNumberText)
+            }))), XNode.create(FormField, {
+              label: "Captcha"
+            }, XNode.create("img", {
+              src: `/api/users/captcha/${id}`
+            })), XNode.create(FormField, {
+              label: "Enter 5 Digit Code"
+            }, XNode.create("input", {
+              type: "tel",
+              value: Bind.twoWaysImmediate(() => this.model.captcha.code)
+            })), XNode.create("div", {
+              "data-layout": "row"
+            }, XNode.create("button", {
+              "data-layout": "go-button",
+              "data-submit-event": "ask-code"
+            }, "Next"))))));
+          });
+        }
+        resetPassword() {
+          return __awaiter(this, void 0, void 0, function* () {
+            const {
+              model
+            } = this;
+            if (model.phone.verified) {
+              if (!model.password) {
+                throw new Error("Password is required");
+              }
+            }
+            if (model.password) {
+              if (model.password.length < 7) {
+                throw new Error("Password is cannot be less than 7 characters");
+              }
+              if (/\s/i.test(model.password)) {
+                throw new Error("Password must not any whitespace characters");
+              }
+              if (model.passwordAgain !== model.password) {
+                throw new Error("Passwords do not match");
+              }
+            }
+            const isdCode = yield isdForCountry(model.country);
+            const phoneNumber = model.phoneNumberText.replace(/[^0-9]/g, "");
+            model.phoneNumber = isdCode.startsWith("+") ? isdCode + phoneNumber : `+${isdCode}${phoneNumber}`;
+            const {
+              userID,
+              phone,
+              captcha
+            } = yield FetchBuilder.post("/api/users/password/reset/").jsonBody(this.model).responseAsJson();
+            if (captcha === null || captcha === void 0 ? void 0 : captcha.verified) {
+              model.captcha.verified = captcha.verified;
+            }
+            if (userID) {
+              yield PopupService.alert({
+                message: "Password has been reset successully, please login with your new password."
+              });
+              location.href = "/";
+              return;
+            }
+            if (phone.verified) {
+              this.model.phone.verified = phone.verified;
+              this.askPasswords();
+              return;
+            }
+            if (phone.id) {
+              this.model.phone.id = phone.id;
+            }
+            this.askCode();
+          });
+        }
+        askCode() {
+          this.renderer = XNode.create("div", {
+            class: css
+          }, XNode.create("div", {
+            "data-layout": "center-all"
+          }, XNode.create(Form, {
+            "data-border": "frame"
+          }, XNode.create("h3", null, "Enter verification code."), XNode.create(FormField, {
+            label: "Code"
+          }, XNode.create("input", {
+            type: "tel",
+            value: Bind.twoWaysImmediate(() => this.model.phone.code)
+          })), XNode.create("div", {
+            "data-layout": "row"
+          }, XNode.create("button", {
+            "data-layout": "go-button",
+            "data-submit-event": "ask-code"
+          }, "Next")))));
+        }
+        askPasswords() {
+          this.renderer = XNode.create("div", {
+            class: css
+          }, XNode.create("div", {
+            "data-layout": "center-all"
+          }, XNode.create(Form, {
+            "data-border": "frame"
+          }, XNode.create("h3", null, "Enter new password."), XNode.create(FormField, {
+            label: "Password"
+          }, XNode.create(PasswordBox, {
+            value: Bind.twoWaysImmediate(() => this.model.password)
+          })), XNode.create(FormField, {
+            label: "Password Again"
+          }, XNode.create(PasswordBox, {
+            value: Bind.twoWaysImmediate(() => this.model.passwordAgain)
+          })), XNode.create("div", {
+            "data-layout": "row"
+          }, XNode.create("button", {
+            "data-layout": "go-button",
+            "data-submit-event": "ask-code"
+          }, "Next")))));
+        }
+      });
+      __decorate([Action({
+        onEvent: "ask-code"
+      }), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], ForgotPassword.prototype, "resetPassword", null);
+    }
+  };
+});
+//# sourceMappingURL=ForgotPassword.js.map

package/dist/common/pages/user/forgot/ForgotPassword.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ForgotPassword","css","_export","setters","_tslib","Bind","_webAtomsCoreDistCoreBind","default","_webAtomsCoreDistCoreXNode","XNode","_webAtomsCoreDistStyleStyled","styled","_webAtomsWebControlsDistBasicForm","Form","_webAtomsWebControlsDistBasicFormField","FormField","_webAtomsWebControlsDistMobileAppMobileApp","ContentPage","_controlsCountriesCountrySelect","CountrySelect","formatForCountry","isdForCountry","_webAtomsWebControlsDistBasicMaskedInput","MaskedInput","_webAtomsCoreDistServicesFetchBuilder","FetchBuilder","_webAtomsCoreDistViewModelAction","Action","_webAtomsCoreDistWebServicesPopupService","PopupService","_webAtomsWebControlsDistBasicPasswordBox","PasswordBox","execute","installLocal","constructor","model","username","password","passwordAgain","phoneNumber","country","phoneNumberText","phone","code","captcha","init","hideToolbar","title","id","put","responseAsJson","render","create","class","label","autofocus","value","twoWaysImmediate","oneWayAsync","src","type","resetPassword","verified","Error","length","test","isdCode","replace","startsWith","userID","post","jsonBody","alert","message","location","href","askPasswords","askCode","renderer","__decorate","onEvent"],"sources":["../../../../../src/common/pages/user/forgot/ForgotPassword.tsx"],"sourcesContent":[null],"mappings":"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"}

package/dist/common/pages/user/login/LoginPage.d.ts

@@ -6,6 +6,9 @@ export default class LoginPage extends ContentPage {
     private authType;
     init(): Promise<void>;
     login(): Promise<void>;
+    showAuthenticator(): void;
+    showOTP(): void;
     showChangePassword(): Promise<void>;
+    forgotPassword(): Promise<void>;
 }
 //# sourceMappingURL=LoginPage.d.ts.map

package/dist/common/pages/user/login/LoginPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoginPage.d.ts","sourceRoot":"","sources":["../../../../../src/common/pages/user/login/LoginPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AA0BhF,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,WAAW;IAG9C,OAAO,CAAC,WAAW,CAAe;IAElC,OAAO,CAAC,KAAK,CAAgB;IAE7B,OAAO,CAAC,QAAQ,CAAC,CAAc;IAE/B,OAAO,CAAC,QAAQ,CAAU;IAEpB,IAAI;IA8BJ,KAAK;IAsCL,kBAAkB;CAuC3B"}
+{"version":3,"file":"LoginPage.d.ts","sourceRoot":"","sources":["../../../../../src/common/pages/user/login/LoginPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AA+BhF,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,WAAW;IAG9C,OAAO,CAAC,WAAW,CAAe;IAElC,OAAO,CAAC,KAAK,CAAgB;IAE7B,OAAO,CAAC,QAAQ,CAAC,CAAc;IAE/B,OAAO,CAAC,QAAQ,CAAU;IAEpB,IAAI;IAmDJ,KAAK;IAgBX,iBAAiB;IA0BjB,OAAO;IA2BD,kBAAkB;IAyClB,cAAc;CAUvB"}

package/dist/common/pages/user/login/LoginPage.js

@@ -1,7 +1,7 @@
-System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/mobile-app/MobileApp", "@web-atoms/web-controls/dist/basic/Form", "@web-atoms/web-controls/dist/basic/FormField", "../../../../model/model", "@web-atoms/core/dist/core/Bind", "@web-atoms/web-controls/dist/basic/PasswordBox", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/core/InjectProperty", "../../../../services/LoginService", "../../../controls/password/PasswordStrength", "../../../validators/Validators", "@web-atoms/web-controls/dist/basic/ToggleButtonBar", "../../../controls/buttons/IconButton"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/mobile-app/MobileApp", "@web-atoms/web-controls/dist/basic/FormField", "../../../../model/model", "@web-atoms/core/dist/core/Bind", "@web-atoms/web-controls/dist/basic/PasswordBox", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/core/InjectProperty", "../../../../services/LoginService", "../../../controls/password/PasswordStrength", "../../../validators/Validators", "../../../controls/buttons/IconButton", "@web-atoms/web-controls/dist/PageNavigator", "../forgot/ForgotPassword", "@web-atoms/core/dist/web/services/PopupService", "../../../form/AppForm"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, XNode, ContentPage, Form, FormField, LoginSession, Bind, PasswordBox, Action, InjectProperty, LoginService, PasswordStrength, Validators, ToggleButtonBar, SaveIconTextButton, LoginPage, authTypes;
+  var __awaiter, __decorate, __metadata, XNode, ContentPage, FormField, LoginSession, Bind, PasswordBox, Action, InjectProperty, LoginService, PasswordStrength, Validators, SaveIconTextButton, PageNavigator, ForgotPassword, PopupService, AppForm, LoginPage, authTypes;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -12,8 +12,6 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_webAtomsWebControlsDistMobileAppMobileApp) {
       ContentPage = _webAtomsWebControlsDistMobileAppMobileApp.ContentPage;
-    }, function (_webAtomsWebControlsDistBasicForm) {
-      Form = _webAtomsWebControlsDistBasicForm.default;
     }, function (_webAtomsWebControlsDistBasicFormField) {
       FormField = _webAtomsWebControlsDistBasicFormField.default;
     }, function (_modelModel) {
@@ -32,10 +30,16 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
       PasswordStrength = _controlsPasswordPasswordStrength.default;
     }, function (_validatorsValidators) {
       Validators = _validatorsValidators.Validators;
-    }, function (_webAtomsWebControlsDistBasicToggleButtonBar) {
-      ToggleButtonBar = _webAtomsWebControlsDistBasicToggleButtonBar.default;
     }, function (_controlsButtonsIconButton) {
       SaveIconTextButton = _controlsButtonsIconButton.SaveIconTextButton;
+    }, function (_webAtomsWebControlsDistPageNavigator) {
+      PageNavigator = _webAtomsWebControlsDistPageNavigator.default;
+    }, function (_forgotForgotPassword) {
+      ForgotPassword = _forgotForgotPassword.default;
+    }, function (_webAtomsCoreDistWebServicesPopupService) {
+      PopupService = _webAtomsCoreDistWebServicesPopupService.default;
+    }, function (_formAppForm) {
+      AppForm = _formAppForm.default;
     }],
     execute: function () {
       authTypes = [{
@@ -53,6 +57,14 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
         }
         init() {
           return __awaiter(this, void 0, void 0, function* () {
+            this.footerRenderer = () => XNode.create("div", {
+              "data-layout": "row"
+            }, XNode.create("a", {
+              target: "_blank",
+              "data-margin-left": "auto",
+              href: "https://socialmail.me"
+            }, "Social Mail"));
+            this.hideToolbar = true;
             this.model = LoginSession.create({});
             this.model.userName = "";
             this.model.checkPassword = "";
@@ -60,19 +72,27 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
             this.model.oneTimePassword = "";
             this.render(XNode.create("div", null, XNode.create("div", {
               "data-layout": "center-all"
-            }, XNode.create(Form, null, XNode.create(FormField, {
+            }, XNode.create(AppForm, null, XNode.create("h3", null, "Sign in to continue"), XNode.create(FormField, {
               label: "Username"
             }, XNode.create("input", {
+              autofocus: true,
               value: Bind.twoWaysImmediate(() => this.model.userName)
             })), XNode.create(FormField, {
               label: "Password"
             }, XNode.create(PasswordBox, {
               value: Bind.twoWaysImmediate(() => this.model.checkPassword)
-            })), XNode.create("div", null, XNode.create("button", {
+            })), XNode.create("div", {
+              "data-layout": "row"
+            }, XNode.create("button", {
               "data-layout": "accent-button",
               "data-submit-event": "login",
               text: "Login"
-            }))))));
+            })), XNode.create("div", {
+              "data-layout": "row"
+            }, XNode.create("span", {
+              "data-click-event": "forgot-password",
+              "data-layout": "link"
+            }, "Forgot password?"))))));
           });
         }
         login() {
@@ -85,40 +105,59 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
               yield this.showChangePassword();
               return;
             }
-            this.renderer = XNode.create("div", {
-              "data-layout": "center-all"
-            }, XNode.create(Form, null, XNode.create(FormField, {
-              label: "Enter"
-            }, XNode.create(ToggleButtonBar, {
-              items: authTypes,
-              value: Bind.twoWays(() => this.authType)
-            })), XNode.create(FormField, {
-              label: "Code",
-              "style-display": Bind.oneWay(() => this.authType === "totp")
-            }, XNode.create("input", {
-              type: "tel",
-              value: Bind.twoWaysImmediate(() => this.model.timeToken)
-            })), XNode.create(FormField, {
-              label: "One Time Password",
-              "style-display": Bind.oneWay(() => this.authType !== "totp")
-            }, XNode.create("input", {
-              type: "tel",
-              value: Bind.twoWaysImmediate(() => this.model.oneTimePassword)
-            })), XNode.create("div", {
-              "data-layout": "command-row"
-            }, XNode.create(SaveIconTextButton, {
-              "event-click": () => this.login(),
-              text: "Go"
-            }))));
+            this.showAuthenticator();
           });
         }
+        showAuthenticator() {
+          this.renderer = XNode.create("div", {
+            "data-layout": "center-all"
+          }, XNode.create(AppForm, null, XNode.create("h4", null, "Enter Authenticator Code"), XNode.create(FormField, {
+            label: "Code"
+          }, XNode.create("input", {
+            autofocus: true,
+            type: "tel",
+            value: Bind.twoWaysImmediate(() => this.model.timeToken)
+          })), XNode.create("div", {
+            "data-layout": "row"
+          }, XNode.create("button", {
+            "event-click": () => this.showOTP(),
+            "data-layout": "link"
+          }, "Enter One Time Password instead.")), XNode.create("div", {
+            "data-layout": "command-row"
+          }, XNode.create(SaveIconTextButton, {
+            "event-click": () => this.login(),
+            text: "Go"
+          }))));
+        }
+        showOTP() {
+          this.renderer = XNode.create("div", {
+            "data-layout": "center-all"
+          }, XNode.create(AppForm, null, XNode.create("h4", null, "Enter One Time Password"), XNode.create(FormField, {
+            label: "Password"
+          }, XNode.create("input", {
+            autofocus: true,
+            type: "tel",
+            value: Bind.twoWaysImmediate(() => this.model.oneTimePassword)
+          })), XNode.create("div", {
+            "data-layout": "row"
+          }, XNode.create("button", {
+            "event-click": () => this.showAuthenticator(),
+            "data-layout": "link"
+          }, "Enter Authenticator Code instad.")), XNode.create("div", {
+            "data-layout": "command-row"
+          }, XNode.create(SaveIconTextButton, {
+            "event-click": () => this.login(),
+            text: "Go"
+          }))));
+        }
         showChangePassword() {
           return __awaiter(this, void 0, void 0, function* () {
             this.model.newPassword = "";
             this.renderer = XNode.create("div", null, XNode.create("div", {
               "data-layout": "center-all"
-            }, XNode.create(Form, null, XNode.create("div", null, "Update your password, your one time password is expired."), XNode.create(FormField, {
+            }, XNode.create(AppForm, null, XNode.create("div", null, "Update your password, your one time password is expired."), XNode.create(FormField, {
               label: "Password",
+              autofocus: true,
               required: true,
               error: Bind.oneWay(() => Validators.isValidPassword(this.password) ? "" : "Password must contain one symbol, one number and should be minimum 7 characters")
             }, XNode.create(PasswordBox, {
@@ -139,11 +178,25 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
             })))));
           });
         }
+        forgotPassword() {
+          return __awaiter(this, void 0, void 0, function* () {
+            if (/socialmail\.me/i.test(location.href)) {
+              PageNavigator.openPage(ForgotPassword);
+              return;
+            }
+            yield PopupService.alert({
+              message: "Please contact your administrator"
+            });
+          });
+        }
       });
       __decorate([InjectProperty, __metadata("design:type", LoginService)], LoginPage.prototype, "userService", void 0);
       __decorate([Action({
         onEvent: "login"
       }), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], LoginPage.prototype, "login", null);
+      __decorate([Action({
+        onEvent: "forgot-password"
+      }), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], LoginPage.prototype, "forgotPassword", null);
     }
   };
 });