@social-mail/social-mail-client 1.2.641 → 1.2.642

package/src/public/store/StoreUrlService.ts

@@ -3,21 +3,28 @@ import { toBase36 } from "../../common/toBase36";
 import { IStoreItem } from "../../model/model";
 
 export type IStorePageParameters = {
-    page: "buy",
-    productID: any,
-    currency: string
-} | {
-    page: "detail",
-    productID: any,
-    currency: any,
-} | {
-    page: "order",
-    orderID: any,
-} | {
-    page: "orders"
-} |  {
-    page: "checkout",
-    orderID: any
+    login?: {
+        storeID: any;
+    },
+    buy?: {
+        productID: any,
+        currency: string
+    },
+    detail?: {
+        storeID: any,
+        productID: any,
+        currency: any,
+    },
+    order?: {
+        storeID: any;
+        orderID: any;
+    }
+    orders?: {
+        storeID: any,
+    },
+    checkout?: {
+        orderID: any;
+    }
 };
 
 export const StoreUrlService = {
@@ -26,7 +33,7 @@ export const StoreUrlService = {
         const storeID = toBase36(p.storeID);
         const productID = toBase36(p.variantForID ?? p.storeItemID);
         if (AppLocation.isLocalTesting) {
-            return `?detail=${storeID}/${productID}`;
+            return `?detail=store/${storeID}/${productID}`;
         }
         return `/store/${storeID}/${productID}/${encodeURIComponent(p.name)}`;
     },
@@ -42,29 +49,57 @@ export const StoreUrlService = {
         }
 
         const {
-            1: route,
-            2: p1,
-            3: p2
+            1: root,
+            2: route,
+            3: p1,
+            4: p2
         } = /^\/([^\/]+)\/([^\/]+)\/?([^\/]+)?\/?/.exec(pathname) ?? [];
 
+        if (root !== "store") {
+            return {};
+        }
+
         switch(route) {
+            case "login":
+                return {
+                    login: {
+                        storeID: p1
+                    }
+                };
+            case "orders":
+                return {
+                    orders: {
+                        storeID: p1
+                    }
+                };
+            case "orders":
+                return {
+                    order: {
+                        storeID: p1,
+                        orderID: p2
+                    }
+                };
             case "buy":
                 return {
-                    page: "buy",
-                    productID: p1,
-                    currency: p2 || "INR"
+                    buy: {
+                        productID: p1,
+                        currency: p2 || "INR"
+                    }
                 };
             case "checkout":
                 return {
-                    page: "checkout",
-                    orderID: p1
+                    checkout: {
+                        orderID: p1
+                    }
                 };
         }
 
         return {
-            page: "detail",
-            productID: p1,
-            currency: p2 || "INR"
+            detail: {
+                storeID: route,
+                productID: p1,
+                currency: p2 || "INR"
+            }
         };
 
     }

package/src/public/user/SiteLogin.tsx

@@ -0,0 +1,251 @@
+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 { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar";
+import PhoneEditor from "../../common/controls/phone-editor/PhoneEditor";
+import { EmailIconButton, EmailIconTextButton, SaveIconTextButton, UploadIconButton } from "../../common/controls/buttons/IconButton";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import EntityService from "../../services/EntityService";
+import { IVerificationToken, VerificationToken, VerificationTokenAddress } from "../../model/model";
+import Loader from "../../common/controls/Loader";
+import { AtomDisposableList } from "@web-atoms/core/dist/core/AtomDisposableList";
+import { StringHelper } from "@web-atoms/core/dist/core/StringHelper";
+import QRCodeControl from "../../common/controls/qrcode/QRCode";
+
+    styled.css `
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100vh;
+
+        background-color: canvas;
+
+        display: grid;
+        align-items: center;
+        justify-items: center;
+
+    `.installGlobal("site-login");
+
+    styled.css `
+    & [styler-layout=component] {
+        position: relative;
+    }
+    `.installGlobal("body");
+
+
+export interface IVerification {
+    id: any;
+    accessCode: string;
+    code: string;
+}
+
+export interface IUserModel {
+    emailAddress?: string;
+    phoneNumber?: string;
+    name?: string;
+
+    email?: IVerification;
+    phone?: IVerification;
+    captcha?: IVerification;
+}
+
+const verifyModes = [
+    { label: "Email", value: "email" },
+    { label: "Cell Phone", value: "phone" }
+];
+
+export default class SiteLogin extends AtomControl {
+
+    @InjectProperty
+    entityService: EntityService;
+
+    model: IUserModel = { emailAddress: "", phoneNumber: "", name: "" };
+
+    verifyMode: string = "email";
+
+    constructor(app, e = document.createElement("site-login")) {
+        super(app, e);
+        this.element.setAttribute("site-login", "true");
+        this.pushInit();
+    }
+
+    async init() {
+
+        this.renderer = <div><Loader/></div>;
+
+        await this.verifyCaptcha();
+    }
+
+    async verifyCaptcha() {
+
+        const captcha = await this.entityService.save(VerificationToken.create({
+            type: "captcha"
+        }));
+
+        const { verificationID: id, accessCode } = captcha;
+
+        this.model.captcha = {
+            id,
+            accessCode,
+            code: ""
+        };
+
+        this.renderer = <div>
+            <Form>
+                <FormField label="Captcha">
+                    <img src={`/api/users/captcha/${id}/${accessCode}`}/>
+                </FormField>
+                <FormField label="Enter 5 Digit Code">
+                    <input
+                        type="tel"
+                        value={Bind.twoWaysImmediate(() => this.model.captcha.code)}/>
+                </FormField>
+                <div>
+                    <UploadIconButton data-submit-event="verify-captcha"/>
+                </div>
+            </Form>
+        </div>;
+
+        await this.waitForEvents("verify-captcha");
+
+        const v = await this.entityService.invoke(VerificationToken, "verifyCode", captcha, id, accessCode, this.model.captcha.code);
+        if (!v.verified) {
+            alert("Verification failed, try again");
+            await this.verifyCaptcha();
+            return;
+        }
+
+        await this.displayCheckUserExists();
+
+    }
+
+
+    async displayCheckUserExists() {
+        this.renderer = <div>
+            <Form>
+                <FormField label="Verify">
+                    <ToggleButtonBar items={verifyModes} value={Bind.twoWaysImmediate(() => this.verifyMode)} />
+                </FormField>
+                <FormField label="Email" style-display={Bind.oneWay(() => this.verifyMode === "email")}>
+                    <input value={this.model.emailAddress} />
+                </FormField>
+                <FormField label="Cell Phone" style-display={Bind.oneWay(() => this.verifyMode === "phone")}>
+                    <PhoneEditor value={Bind.twoWaysImmediate(() => this.model.phoneNumber)} />
+                </FormField>
+                <div>
+                    <EmailIconTextButton
+                        data-submit-event="proceed-verification"
+                        />
+                </div>
+            </Form>
+        </div>;
+
+        await this.waitForEvents("proceed-verification");
+
+        const isEmail = this.verifyMode === "email";
+
+        const type = isEmail ? "email" : "sms";
+
+        const address = isEmail ? this.model.emailAddress : this.model.phoneNumber;
+
+        const ve = VerificationToken.create({
+            type: "email",
+            addresses: [
+                VerificationTokenAddress.create({
+                    address
+                })
+            ]
+        });
+
+        await this.entityService.save(ve, (c) => c.include((x) => x.addresses));
+
+        if (!isEmail) {
+            this.renderer = <div>
+                <QRCodeControl
+                    smsConfig={ve.smsConfig}
+                    />
+            </div>;
+
+            for (let index = 0; index < 5; index++) {
+                const v = await this.entityService.query(VerificationToken, "get", ve.verificationID, ve.accessCode)
+                    .firstOrDefault();
+                if (v.verified) {
+                    ve.verified = true;
+                    break;
+                }
+            }
+
+            if (!ve.verified) {
+                await this.displayCheckUserExists();
+                return;
+            }
+        }
+
+    }
+
+    @Action({ onEvent: "verify-email"})
+    async verifyEmail() {
+
+        const address = this.model.emailAddress;
+
+        const ve = VerificationToken.create({
+            type: "email",
+            addresses: [
+                VerificationTokenAddress.create({
+                    address
+                })
+            ]
+        });
+        await this.entityService.save(ve, (c) => c);
+
+        this.renderer = <div>
+             <Form>
+                <FormField label="Code">
+                    
+                </FormField>
+            </Form>
+        </div>;
+    }
+
+    @Action({ onEvent: "verify-phone"})
+    async verifyPhone() {
+        const address = this.model.emailAddress;
+
+        const ve = VerificationToken.create({
+            type: "email",
+            addresses: [
+                VerificationTokenAddress.create({
+                    address
+                })
+            ]
+        });
+        await this.entityService.save(ve, (c) => c);
+
+        this.renderer = <div>
+             <Form>
+                <FormField label="Code">
+                    
+                </FormField>
+            </Form>
+        </div>;
+    }
+
+    private waitForEvents<T = any>( ... names: string[]): Promise<CustomEvent<T>> {
+        return new Promise((resolve, reject) => {
+
+            const d = new AtomDisposableList();
+            for (const n of names) {
+                const name = StringHelper.fromHyphenToCamel(n);
+                d.add(this.bindEvent(this.element, name, (ce: CustomEvent) => {
+                    d.dispose();
+                    resolve(ce);
+                } ));
+            }
+        });
+    }
+}

package/src/public/user/WebSiteUserService.ts

@@ -0,0 +1,39 @@
+import DISingleton from "@web-atoms/core/dist/di/DISingleton";
+import { IUser, LoginSession } from "../../model/model";
+import { Inject } from "@web-atoms/core/dist/di/Inject";
+import EntityService from "../../services/EntityService";
+import SocialMailApp from "../../common/SocialMailApp";
+import SiteLogin from "./SiteLogin";
+import { App } from "@web-atoms/core/dist/App";
+
+@DISingleton()
+export default class WebSiteUserService {
+
+    @Inject
+    entityService: EntityService;
+
+    @Inject
+    app: App;
+
+    user: IUser = null;
+
+    public async getUser() {
+        this.user ??= (await this.entityService.query(LoginSession, "currentUser").firstOrDefault())?.user;
+        SocialMailApp.user = this.user;
+        if (this.user?.userID) {
+            // let start syncing...
+            // this.app.resolve(LocalDbService).syncAll(this.user.userID).catch(console.error);
+            return this.user;
+        }
+
+
+        // request login..
+        const sl = new SiteLogin(this.app);
+
+        const c = document.body.querySelector(`[styler-layout="component"]`) ?? document.body;
+        c.appendChild(sl.element);
+
+        return this.user;
+    }
+
+}