@social-mail/social-mail-client 1.2.645 → 1.2.646

package/package.json

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

package/src/public/user/pages/IUserModel.tsx

@@ -0,0 +1,12 @@
+import { IVerification } from "./IVerification";
+
+
+export interface IUserModel {
+    emailAddress?: string;
+    phoneNumber?: string;
+    name?: string;
+
+    email?: IVerification;
+    phone?: IVerification;
+    captcha?: IVerification;
+}

package/src/public/user/pages/IVerification.tsx

@@ -0,0 +1,6 @@
+
+export interface IVerification {
+    id: any;
+    accessCode: string;
+    code: string;
+}

package/src/public/user/pages/SiteLoginPage.tsx

@@ -13,6 +13,10 @@ import PhoneEditor from "../../../common/controls/phone-editor/PhoneEditor";
 import Action from "@web-atoms/core/dist/view-model/Action";
 import QRCodeControl from "../../../common/controls/qrcode/QRCode";
 import styled from "@web-atoms/core/dist/style/styled";
+import sleep from "@web-atoms/core/dist/core/sleep";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import { IUserModel } from "./IUserModel";
+import SiteSignupPage from "./SiteSignupPage";
 
     styled.css `
     & [data-page-element=content] {
@@ -22,22 +26,6 @@ import styled from "@web-atoms/core/dist/style/styled";
     }
     `.installGlobal("[site-login-page]");
 
-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" }
@@ -166,7 +154,7 @@ export default class SiteLoginPage extends ContentPage {
                 smsConfig={ve.smsConfig} />
         </div>;
 
-        for (let index = 0; index < 5; index++) {
+        for (let index = 0; index < 100; index++) {
             const v = await this.entityService.query(VerificationToken, "get", ve.verificationID, ve.accessCode)
                 .firstOrDefault();
             if (v.verified) {
@@ -177,7 +165,10 @@ export default class SiteLoginPage extends ContentPage {
                 }
                 break;
             }
+            await sleep(5000);
         }
+
+        await this.askForSignup();
     }
 
     @Action({ onEvent: "verify-email"})
@@ -191,6 +182,12 @@ export default class SiteLoginPage extends ContentPage {
             await this.login(vt);
             return;
         }
+        await this.askForSignup();
+    }
+
+    async askForSignup() {
+        const { captcha, email, phone } = this.model;
+        PageNavigator.openPage(SiteSignupPage, { captcha, email, phone });
     }
 
     @Action({})

package/src/public/user/pages/SiteSignupPage.tsx

@@ -0,0 +1,199 @@
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { IUserModel, IVerification } from "../SiteLogin";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import PhoneEditor from "../../../common/controls/phone-editor/PhoneEditor";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import { IVerificationToken, VerificationToken } from "../../../model/model";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import EntityService from "../../../services/EntityService";
+import { EmailIconTextButton } from "../../../common/controls/buttons/IconButton";
+import QRCodeControl from "../../../common/controls/qrcode/QRCode";
+import sleep from "@web-atoms/core/dist/core/sleep";
+
+const pending = "⬜";
+const done = "✅";
+
+export default class SiteSignupPage extends ContentPage {
+
+    parameters: IUserModel;
+
+    model: IUserModel = { emailAddress: "", phoneNumber: "", name: "" };
+    emailVerified: string;
+    step = 1;
+
+    verification: IVerificationToken;
+
+    @InjectProperty
+    entityService: EntityService;
+
+    getHeader() {
+        if (this.emailVerified) {
+            <div>
+                <ol>
+                    <li>✅ Email Verified</li>
+                    <li>{this.step > 1 ? done : pending} Add Phone Number</li>
+                    <li>{this.step > 2 ? done : pending} Confirm Phone Number</li>
+                    <li>{this.step > 3 ? done : pending} Add Name/Address Details</li>
+                </ol>
+            </div>;
+        }
+        return <div>
+            <ol>
+                <li>✅ Phone Verification</li>
+                <li>{this.step > 1 ? done : pending} Add Email Address</li>
+                <li>{this.step > 2 ? done : pending} Confirm Email Address</li>
+                <li>{this.step > 3 ? done : pending} Name/Address Details</li>
+            </ol>
+        </div>;
+    }
+
+    async init() {
+
+        this.model.phone = this.parameters.phone;
+        this.model.email = this.parameters.email;
+
+        const emailVerified = this.parameters.email?.accessCode && this.parameters.email?.code;
+
+        this.emailVerified = emailVerified;
+
+        if (emailVerified) {
+            await this.askPhoneNumber();
+            return;
+        }
+
+        this.renderer = <div>
+            <Form>
+                {this.getHeader()}
+                <div>
+                    To complete signup, please verify your email address.
+                </div>
+                <FormField label="Email">
+                    <input value={Bind.twoWaysImmediate(() => this.model.emailAddress)}/>
+                </FormField>
+                <div>
+                    <button data-submit-event="verify-phone">Request Code</button>
+                </div>
+            </Form>
+        </div>;
+    }
+
+    async askPhoneNumber() {
+
+        this.model.phone = {
+            id: "",
+            code: "",
+            accessCode: ""
+        };
+
+        this.renderer = <div>
+            <Form>
+                {this.getHeader()}
+                <div>
+                    To complete signup, please verify your phone number.
+                </div>
+                <FormField label="Cell Phone">
+                    <PhoneEditor value={Bind.twoWaysImmediate(() => this.model.phoneNumber)}/>
+                </FormField>
+                <div>
+                    <button data-submit-event="verify-phone">Verify</button>
+                </div>
+            </Form>
+        </div>;
+    }
+
+    @Action({ onEvent: ""})
+    async verifyPhone() {
+        this.step = 2;
+        const isEmail = !!this.emailVerified;
+
+        const type = isEmail ? "email" : "sms";
+
+        const address = isEmail ? this.model.emailAddress : this.model.phoneNumber;
+
+        const ve = VerificationToken.create({
+            type,
+            verifyAddresses: address
+        });
+
+        this.verification = ve;
+
+        await this.entityService.save(ve, (c) => c.include((x) => x.addresses));
+
+        if (!isEmail) {
+            await this.displayPhoneVerification(ve);
+            return;
+        }
+
+        this.model.email = {
+            id: ve.verificationID,
+            accessCode: ve.accessCode,
+            code: ""
+        };
+
+        this.renderer = <div>
+            <Form>
+                {this.getHeader()}
+                <FormField label="Email Verification">
+                    <div>We have sent you the verification code in your email, please enter it again to complete the verification.</div>
+                </FormField>
+                <FormField label="Code">
+                    <input value={Bind.twoWaysImmediate(() => this.model.email.code)}/>
+                </FormField>
+                <div>
+                    <EmailIconTextButton
+                        text="Proceed"
+                        data-submit-event="verify-email"
+                        />
+                </div>
+            </Form>
+        </div>;
+    }
+
+    @Action({ onEvent: "verify-email"})
+    async verifyEmail() {
+        const v = this.verification;
+        const vt = await this.entityService.invoke(VerificationToken, "verifyCode", v, v.verificationID, v.accessCode, this.model.email.code);
+        if (!vt.verified) {
+            throw new Error("Verification failed, try again");
+        }
+        await this.askForSignup();
+    }
+
+    async displayPhoneVerification(ve: IVerificationToken) {
+        this.renderer = <div>
+            <Form>
+                {this.getHeader()}
+                <QRCodeControl
+                    smsConfig={ve.smsConfig} />
+            </Form>
+        </div>;
+
+        for (let index = 0; index < 100; index++) {
+            const v = await this.entityService.query(VerificationToken, "get", ve.verificationID, ve.accessCode)
+                .firstOrDefault();
+            if (v.verified) {
+                ve.verified = true;
+                break;
+            }
+            await sleep(5000);
+        }
+        await this.askForSignup();
+    }
+
+    async askForSignup() {
+        this.step = 3;
+
+        this.renderer = <div>
+            <Form>
+                {this.getHeader()}
+                <FormField label="Name">
+                    <input value={Bind.twoWaysImmediate(() => this.model.name)}/>
+                </FormField>
+            </Form>
+        </div>;
+    }
+
+}