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

package/src/common/pages/user/forgot/ForgotPassword.tsx

@@ -0,0 +1,229 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import styled from "@web-atoms/core/dist/style/styled";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { CountrySelect, formatForCountry, isdForCountry } from "../../../controls/countries/CountrySelect";
+import MaskedInput from "@web-atoms/web-controls/dist/basic/MaskedInput";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import PopupService from "@web-atoms/core/dist/web/services/PopupService";
+import PasswordBox from "@web-atoms/web-controls/dist/basic/PasswordBox";
+
+const 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();
+
+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;
+    } = {
+        username: "",
+        password: "",
+        passwordAgain: "",
+        phoneNumber: "",
+        country: "US",
+        phoneNumberText: "",
+        phone: {
+            code: ""
+        },
+        captcha: {
+            code: ""
+        }
+    };
+
+    async init() {
+
+        this.hideToolbar = true;
+
+        this.title = "Reset Password";
+
+        const { id } = await FetchBuilder.put("/api/users/captcha").responseAsJson<{ id }>();
+        this.model.captcha.id = id;
+
+
+        this.render(<div class={css}>
+            <div data-layout="center-all">
+                <Form data-border="frame">
+                    <h3>
+                        To reset password, enter following.
+                    </h3>
+
+                    <FormField label="Username">
+                        <input
+                            autofocus={true}
+                            value={Bind.twoWaysImmediate(() => this.model.username)}/>
+                    </FormField>
+
+                    <FormField label="Phone Number">
+                        <div data-layout="row">
+                            <CountrySelect
+                                value={Bind.twoWaysImmediate(() => this.model.country)}
+                                />
+                            <MaskedInput
+                                data-mask={Bind.oneWayAsync(() => formatForCountry(this.model.country))}
+                                value={Bind.twoWaysImmediate(() => this.model.phoneNumberText)}
+                                />
+                        </div>
+                    </FormField>
+
+
+                    <FormField label="Captcha">
+                        <img src={`/api/users/captcha/${id}`}/>
+                    </FormField>
+                    <FormField label="Enter 5 Digit Code">
+                        <input
+                            type="tel"
+                            value={Bind.twoWaysImmediate(() => this.model.captcha.code)}/>
+                    </FormField>
+                    <div data-layout="row">
+                        <button
+                            data-layout="go-button"
+                            data-submit-event="ask-code"
+                            >Next</button>
+                    </div>
+
+                </Form>
+            </div>
+        </div>);
+    }
+
+    @Action({ onEvent: "ask-code"})
+    async resetPassword() {
+
+        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 = await isdForCountry(model.country);
+        const phoneNumber = model.phoneNumberText.replace(/[^0-9]/g,"");
+        model.phoneNumber = isdCode.startsWith("+") ? isdCode + phoneNumber: `+${isdCode}${phoneNumber}`;
+
+        const { userID, phone, captcha } = await FetchBuilder.post("/api/users/password/reset/")
+            .jsonBody(this.model)
+            .responseAsJson<{ phone: IVerification, captcha: IVerification, userID: any }>();
+
+        if (captcha?.verified) {
+            model.captcha.verified = captcha.verified;
+        }
+
+        if (userID) {
+            await 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 = <div  class={css}>
+            <div data-layout="center-all">
+                <Form data-border="frame">
+                    <h3>
+                        Enter verification code.
+                    </h3>
+                    <FormField label="Code">
+                        <input type="tel" value={Bind.twoWaysImmediate(() => this.model.phone.code)}/>
+                    </FormField>
+                    <div data-layout="row">
+                        <button
+                            data-layout="go-button"
+                            data-submit-event="ask-code">Next</button>
+                    </div>
+
+                </Form>
+            </div>
+        </div>;
+    }
+
+    askPasswords() {
+        this.renderer = <div  class={css}>
+            <div data-layout="center-all">
+                <Form data-border="frame">
+                    <h3>
+                        Enter new password.
+                    </h3>
+                    <FormField label="Password">
+                        <PasswordBox
+                            value={Bind.twoWaysImmediate(() => this.model.password)}
+                            />
+                    </FormField>
+                    <FormField label="Password Again">
+                        <PasswordBox
+                            value={Bind.twoWaysImmediate(() => this.model.passwordAgain)}
+                            />
+                    </FormField>
+                    <div data-layout="row">
+                        <button
+                            data-layout="go-button"
+                            data-submit-event="ask-code">Next</button>
+                    </div>
+
+                </Form>
+            </div>
+        </div>;
+    }
+
+}

package/src/common/pages/user/login/LoginPage.tsx

@@ -14,6 +14,11 @@ import PasswordStrength from "../../../controls/password/PasswordStrength";
 import { Validators } from "../../../validators/Validators";
 import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar";
 import { SaveIconTextButton } from "../../../controls/buttons/IconButton";
+import styled from "@web-atoms/core/dist/style/styled";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import ForgotPassword from "../forgot/ForgotPassword";
+import PopupService from "@web-atoms/core/dist/web/services/PopupService";
+import AppForm from "../../../form/AppForm";
 
 const authTypes = [{
     label: "Authenticator (TOTP)",
@@ -37,6 +42,16 @@ export default class LoginPage extends ContentPage {
     private authType = "totp";
 
     async init() {
+
+        this.footerRenderer = () => <div data-layout="row">
+            <a
+                target="_blank"
+                data-margin-left="auto"
+                href="https://socialmail.me">Social Mail</a>
+        </div>;
+
+        this.hideToolbar = true;
+
         this.model = LoginSession.create({});
         this.model.userName = "";
         this.model.checkPassword = "";
@@ -44,23 +59,34 @@ export default class LoginPage extends ContentPage {
         this.model.oneTimePassword = "";
         this.render(<div>
             <div data-layout="center-all">
-                <Form>
+                <AppForm>
+                    <h3>
+                        Sign in to continue
+                    </h3>
                     <FormField label="Username">
-                        <input value={Bind.twoWaysImmediate(() => this.model.userName)}/>
+                        <input
+                            autofocus={true}
+                            value={Bind.twoWaysImmediate(() => this.model.userName)}/>
                     </FormField>
                     <FormField label="Password">
                         <PasswordBox
                             value={Bind.twoWaysImmediate(() => this.model.checkPassword)}
                             />
                     </FormField>
-                    <div>
+                    <div data-layout="row">
                         <button
                             data-layout="accent-button"
                             data-submit-event="login"
                             text="Login"
                             />
                     </div>
-                </Form>
+
+                    { <div data-layout="row">
+                        <span
+                            data-click-event="forgot-password"
+                            data-layout="link">Forgot password?</span>
+                    </div>}
+                </AppForm>
             </div>
         </div>);
     }
@@ -78,41 +104,73 @@ export default class LoginPage extends ContentPage {
             return;
         }
 
+        this.showAuthenticator();
+
+    }
+
+    showAuthenticator() {
         this.renderer = <div data-layout="center-all">
-            <Form>
-                <FormField label="Enter">
-                    <ToggleButtonBar items={authTypes} value={Bind.twoWays(() => this.authType)}/>
-                </FormField>
+            <AppForm>
+                <h4>Enter Authenticator Code</h4>
                 <FormField
-                    label="Code"
-                    style-display={Bind.oneWay(() => this.authType === "totp")}>
-                    <input type="tel" value={Bind.twoWaysImmediate(() => this.model.timeToken)}/>
+                    label="Code">
+                    <input
+                        autofocus={true}
+                        type="tel" value={Bind.twoWaysImmediate(() => this.model.timeToken)} />
                 </FormField>
+                <div data-layout="row">
+                    <button
+                        event-click={() => this.showOTP()}
+                        data-layout="link">
+                        Enter One Time Password instead.
+                    </button>
+                </div>
+                <div data-layout="command-row">
+                    <SaveIconTextButton
+                        event-click={() => this.login()}
+                        text="Go" />
+                </div>
+            </AppForm>
+        </div>;
+    }
+
+    showOTP() {
+        this.renderer = <div data-layout="center-all">
+            <AppForm>
+                <h4>Enter One Time Password</h4>
                 <FormField
-                    label="One Time Password"
-                    style-display={Bind.oneWay(() => this.authType !== "totp")}>
-                    <input type="tel" value={Bind.twoWaysImmediate(() => this.model.oneTimePassword)}/>
+                    label="Password">
+                    <input
+                        autofocus={true}
+                        type="tel" value={Bind.twoWaysImmediate(() => this.model.oneTimePassword)} />
                 </FormField>
+                <div data-layout="row">
+                    <button
+                        event-click={() => this.showAuthenticator()}
+                        data-layout="link">
+                        Enter Authenticator Code instad.
+                    </button>
+                </div>
                 <div data-layout="command-row">
                     <SaveIconTextButton
                         event-click={() => this.login()}
-                        text="Go"
-                        />
+                        text="Go" />
                 </div>
-            </Form>
+            </AppForm>
         </div>;
-
     }
 
+
     async showChangePassword() {
         this.model.newPassword = "";
 
         this.renderer = <div>
             <div data-layout="center-all">
-                <Form>
+                <AppForm>
                     <div>Update your password, your one time password is expired.</div>
                     <FormField
                         label="Password"
+                        autofocus={true}
                         required={true}
                         error={Bind.oneWay(() => Validators.isValidPassword(this.password)
                             ? ""
@@ -137,10 +195,21 @@ export default class LoginPage extends ContentPage {
                             data-submit-event="login"
                             text="Change Password & Login"/>
                     </div>
-                </Form>
+                </AppForm>
             </div>
         </div>;
 
     }
 
+    @Action({ onEvent: "forgot-password"})
+    async forgotPassword() {
+        if (/socialmail\.me/i.test(location.href)) {
+            PageNavigator.openPage(ForgotPassword);
+            return;
+        }
+        await PopupService.alert({
+            message: "Please contact your administrator"
+        });
+    }
+
 }

package/src/common/pages/user/multi-factor/MultiFactorSetupPage.tsx

@@ -10,6 +10,7 @@ import Bind from "@web-atoms/core/dist/core/Bind";
 import Action from "@web-atoms/core/dist/view-model/Action";
 import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import { DateFormats } from "../../../date/DateFormats";
+import AppForm from "../../../form/AppForm";
 
 export default class MultiFactorSetupPage extends ContentPage {
 
@@ -33,7 +34,7 @@ export default class MultiFactorSetupPage extends ContentPage {
 
         if (multiFactor) {
             this.renderer = <div data-layout="center-page-900px">
-                <Form>
+                <AppForm>
                     <FormField label="Methods">
                         <AtomRepeater
                             for="table"
@@ -57,7 +58,7 @@ export default class MultiFactorSetupPage extends ContentPage {
                             text="Disable"
                             />
                     </div>
-                </Form>
+                </AppForm>
             </div>;
             return;
         }
@@ -67,7 +68,7 @@ export default class MultiFactorSetupPage extends ContentPage {
         || this.model.authFactors.filter((i) => i.method === "one-time").length < 8;
 
         this.renderer = <div data-layout="center-page-900px">
-            <Form>
+            <AppForm>
                 <FormField label="Methods">
                     <AtomRepeater
                         for="table"
@@ -106,7 +107,7 @@ export default class MultiFactorSetupPage extends ContentPage {
                         text="Disable"
                         />
                 </div>}
-            </Form>
+            </AppForm>
         </div>;
     }
 
@@ -151,7 +152,7 @@ export default class MultiFactorSetupPage extends ContentPage {
         const authFactor = await this.userService.createAuthFactor(this.model);
         this.authFactor = authFactor;
         this.renderer = <div data-layout="center-page-900px">
-            <Form>
+            <AppForm>
                 <FormField label="">
                     <div>Scan following QR Code in any compatible Authenticator App. Enter the generated code and hit the verify button.</div>
                 </FormField>
@@ -173,7 +174,7 @@ export default class MultiFactorSetupPage extends ContentPage {
                         text="Verify"
                         />
                 </div>
-            </Form>
+            </AppForm>
         </div>;
     }
 
@@ -194,7 +195,7 @@ export default class MultiFactorSetupPage extends ContentPage {
         }
         text += "\r\n";
         this.renderer = <div data-layout="center-page-900px">
-            <Form>
+            <AppForm>
                 <FormField label="One Time Passwords">
                     <div>Please copy and save these passwords somewhere safe. You can use
                         them if you cannot access Authenticator app.
@@ -215,7 +216,7 @@ export default class MultiFactorSetupPage extends ContentPage {
                         text="Go"
                         />
                 </div>
-            </Form>
+            </AppForm>
         </div>;
     }
 

package/src/common/pages/user/multi-factor/SetupMultiFactorPage.tsx

@@ -10,6 +10,7 @@ import Bind from "@web-atoms/core/dist/core/Bind";
 import Action from "@web-atoms/core/dist/view-model/Action";
 import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import { DateFormats } from "../../../date/DateFormats";
+import AppForm from "../../../form/AppForm";
 
 export default class SetupMultiFactorPage extends PopupWindowPage {
 
@@ -61,7 +62,7 @@ export default class SetupMultiFactorPage extends PopupWindowPage {
         const authFactor = await this.userService.createAuthFactor(this.model);
         this.authFactor = authFactor;
         this.renderer = <div data-layout="center-page-900px">
-            <Form>
+            <AppForm>
                 <FormField label="">
                     <div>Scan following QR Code in any compatible Authenticator App. Enter the generated code and hit the verify button.</div>
                 </FormField>
@@ -83,7 +84,7 @@ export default class SetupMultiFactorPage extends PopupWindowPage {
                         text="Verify"
                         />
                 </div>
-            </Form>
+            </AppForm>
         </div>;
     }
 
@@ -118,7 +119,7 @@ export default class SetupMultiFactorPage extends PopupWindowPage {
 
         text += "\r\n";
         this.renderer = <div data-layout="center-page-900px">
-            <Form>
+            <AppForm>
                 <FormField label="One Time Passwords">
                     <div>Please copy and save these one time codes somewhere safe. You can use
                         them if you cannot access Authenticator app.
@@ -139,7 +140,7 @@ export default class SetupMultiFactorPage extends PopupWindowPage {
                         text="Setup Authenticator"
                         />
                 </div>
-            </Form>
+            </AppForm>
         </div>;
     }
 

package/src/site-editor/blocks/Billboard.tsx

@@ -71,10 +71,10 @@ StylerSets.register("low", styled.css `
 );
 
 export const Billboard = Block({
-    className: "fad fa-symbols",
+    className: "fad fa-text-size",
     title: "Add Billboard",
     factory: () => <section styler-layout="billboard">
-        <h1></h1>
-        <h4></h4>
+        <h1 styler-color="border-color">Billboard</h1>
+        <h4>Billboard</h4>
     </section>
 });

package/src/site-editor/blocks/OutlineText.tsx

@@ -0,0 +1,27 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { Block } from "./Block";
+import styled from "@web-atoms/core/dist/style/styled";
+import { StylerSets } from "../styler/StylerSets";
+
+    styled.css `
+        -webkit-text-fill-color: transparent;
+        -webkit-text-stroke-color: currentColor;
+        -webkit-text-stroke-width: 1px;
+        text-decoration: none;
+        font-style: normal;
+        font-weight: 900;
+        text-align: center;
+        padding-left: 7px;
+        font-family: monospace;
+        font-size: 1.5rem;
+    `.installGlobal(".editor-outlined-text");
+
+export const OutlineText = Block({
+    className: "editor-outlined-text",
+    title: "Add Text with Outline",
+    text:"A",
+    factory: () => <div
+        styler-text-outline="size1px">
+            Outline
+    </div>
+});

package/src/site-editor/drag-drop/DragDropHelper.ts

@@ -23,12 +23,14 @@ export function InstallDragDropHelper(editor: HtmlPageEditor) {
     const dropTarget = (editor as any).dropTarget as SelectedElement;
 
     document.addEventListener("dragstart", (e) => {
+        setTimeout(() => document.body.contentEditable = "false", 0);
         dragged = e.target as HTMLElement;
         e.dataTransfer.dropEffect = "move";
         e.dataTransfer.setDragImage(dragged, 0, 0);
     });
 
     document.addEventListener("dragover", (e) => {
+        setTimeout(() => document.body.contentEditable = "false", 0);
         const target = dropTarget.getDropTarget( dragged, e.target as HTMLElement);
         e.preventDefault();
         e.dataTransfer.dropEffect = "copy";
@@ -68,6 +70,7 @@ export function InstallDragDropHelper(editor: HtmlPageEditor) {
         e.preventDefault();
         dropTarget.clear();
         dragged = null;
+        setTimeout(() => document.body.contentEditable = "true", 0);
     });
 
     document.addEventListener("drop", (e) => {
@@ -87,6 +90,7 @@ export function InstallDragDropHelper(editor: HtmlPageEditor) {
             target.appendChild(insert);
             dropTarget.clear();
             editor.commit();
+            setTimeout(() => document.body.contentEditable = "true", 0);
             return;
         }
         switch(dropTarget.dropAnchor) {
@@ -101,10 +105,12 @@ export function InstallDragDropHelper(editor: HtmlPageEditor) {
         }
         editor.commit();
         dropTarget.clear();
+        setTimeout(() => document.body.contentEditable = "true", 0);
     });
 
     document.addEventListener("dragleave", (e) => {
         dropTarget.clear();
+        setTimeout(() => document.body.contentEditable = "true", 0);
     });
 
     setTimeout(() => {

package/src/site-editor/editor/HtmlPageEditor.tsx

@@ -34,6 +34,7 @@ import { descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI"
 import { PriceTable } from "../blocks/PriceBox";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import { Billboard } from "../blocks/Billboard";
+import { OutlineText } from "../blocks/OutlineText";
 
     styled.css `
         display: grid;
@@ -286,6 +287,7 @@ export default class HtmlPageEditor extends AtomControl {
                 <PriceTable/>
                 <TypeWriterComponent/>
                 <Billboard/>
+                <OutlineText/>
             </EditorToolbar>
             <div data-element="editor"
                 style-max-width={Bind.oneWay(() => this.maxWidth > 768 ? "" : this.maxWidth + "px" )}>

package/src/site-editor/editor/SelectedElement.tsx

@@ -66,7 +66,7 @@ export class SelectedElement {
         const isDropTarget = /^(main|section)$/i;
 
         // check if dragged has root only....
-        if (isDropTarget.test(dragged.tagName)) {
+        if (isDropTarget.test(dragged?.tagName)) {
             let start = target;
             while (!isDropTarget.test(start.tagName)) {
                 start = start.parentElement;