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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.148",
+  "version": "1.2.149",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/common/form/AppForm.tsx

@@ -0,0 +1,30 @@
+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";
+
+    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]");
+
+export default function AppForm(a, ... nodes: XNode[]) {
+    return <Form
+        data-app-form="app-form"
+        { ... a}>
+        { ... nodes}
+    </Form>;
+}

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

@@ -18,26 +18,7 @@ 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";
-
-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();
+import AppForm from "../../../form/AppForm";
 
 const authTypes = [{
     label: "Authenticator (TOTP)",
@@ -76,9 +57,9 @@ export default class LoginPage extends ContentPage {
         this.model.checkPassword = "";
         this.model.timeToken = "";
         this.model.oneTimePassword = "";
-        this.render(<div class={css}>
+        this.render(<div>
             <div data-layout="center-all">
-                <Form data-border="frame">
+                <AppForm>
                     <h3>
                         Sign in to continue
                     </h3>
@@ -105,7 +86,7 @@ export default class LoginPage extends ContentPage {
                             data-click-event="forgot-password"
                             data-layout="link">Forgot password?</span>
                     </div>}
-                </Form>
+                </AppForm>
             </div>
         </div>);
     }
@@ -123,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)
                             ? ""
@@ -182,7 +195,7 @@ export default class LoginPage extends ContentPage {
                             data-submit-event="login"
                             text="Change Password & Login"/>
                     </div>
-                </Form>
+                </AppForm>
             </div>
         </div>;
 

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;