@social-mail/social-mail-client 1.2.205 → 1.2.207

package/package.json

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

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

@@ -19,16 +19,9 @@ 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";
+import AppCommands from "../../../../web/commands/AppCommands";
 
-const authTypes = [{
-    label: "Authenticator (TOTP)",
-    value: "totp"
-},
-{
-    label: "One Time Password",
-    value: "one-time"
-}
-];
+const isSocialMail = /socialmail\.(me|in)/i.test(location.href) || /\d+.\d+.\d+.\d+/i.test(location.href);
 
 export default class LoginPage extends ContentPage {
 
@@ -39,8 +32,6 @@ export default class LoginPage extends ContentPage {
 
     private password?: string = "";
 
-    private authType = "totp";
-
     async init() {
 
         this.footerRenderer = () => <div data-layout="row">
@@ -81,11 +72,16 @@ export default class LoginPage extends ContentPage {
                             />
                     </div>
 
-                    { <div data-layout="row">
+                    {isSocialMail && <div data-layout="row">
                         <span
                             data-click-event="forgot-password"
                             data-layout="link">Forgot password?</span>
                     </div>}
+                    {isSocialMail && <div data-layout="row">
+                        <a
+                            data-click-event="route"
+                            href={AppCommands.signup.displayRoute({})}>Sign Up</a>
+                    </div>}
                 </AppForm>
             </div>
         </div>);
@@ -203,7 +199,7 @@ export default class LoginPage extends ContentPage {
 
     @Action({ onEvent: "forgot-password"})
     async forgotPassword() {
-        if (/socialmail\.me/i.test(location.href)) {
+        if (isSocialMail) {
             PageNavigator.openPage(ForgotPassword);
             return;
         }

package/src/web/commands/AppCommands.ts

@@ -54,6 +54,11 @@ export default class AppCommands extends CommonCommands {
         pushPage: () => import("../page/files/preview/media/PreviewMedia")
     });
 
+    static signup = Command.create({
+        route: "/social-mail/users/signup",
+        openPage: () => import("../page/users/SignupPage")
+    });
+
     static getPreviewCommand(p: IAppFile) {
         if (FileTypes.isDocument(p)) {
             return this.previewHtml;

package/src/web/page/users/SignupPage.tsx

@@ -0,0 +1,259 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+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 styled from "@web-atoms/core/dist/style/styled";
+import Pack from "@web-atoms/core/dist/Pack";
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { CountrySelect, formatForCountry, isdForCountry } from "../../../common/controls/countries/CountrySelect";
+
+const css = styled.css `
+    & [data-page-element=content] {
+        & > * {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            justify-items: center;
+            & > * {
+                padding: 10px;
+                border-radius: 10px;
+                border: solid 1px gray;
+                & input {
+                    background: transparent;
+                    border: none;
+                    outline: none;
+                    border-bottom: solid 1px gray;
+                    &:focus {
+                        border-bottom: solid 1px purple;
+                    }
+                }
+                & [data-suggestion-popup=suggestion-popup] {
+                    & input {
+                        color: black;
+                    }
+                }
+            }
+        }
+    }
+`.installLocal();
+
+interface IVerification {
+    id?: string;
+    code?: string;
+    verified?: string;
+}
+
+@Pack
+export default class SignupPage extends ContentPage {
+
+    termsAgreed = false;
+
+    model: {
+        username: string;
+        password: string;
+        passwordAgain: string;
+        phoneNumber: string;
+        country: string;
+        phoneNumberText: string;
+        name: string;
+        captcha: IVerification;
+        phone: IVerification;
+    } = {
+        name: "",
+        username: "",
+        password: "",
+        passwordAgain: "",
+        phoneNumber: "",
+        country: "US",
+        phoneNumberText: "",
+        captcha: {
+            code: ""
+        },
+        phone: {
+            code: ""
+        }
+    };
+
+    async init() {
+
+        this.hideToolbar = true;
+
+        this.element.className = css;
+
+        this.title = "Social Mail Signup";
+
+        const { id } = await FetchBuilder.put("/api/users/captcha").responseAsJson<{ id }>();
+
+        this.model.captcha.id = id;
+
+        this.renderer = <div>
+            <div>
+                <div data-max-width="size-large">
+                    <Form>
+                        <FormField label="Your Name">
+                            <input
+                                autofocus={true}
+                                placeholder="Display Name"
+                                value={Bind.twoWaysImmediate(() => this.model.name)}/>
+                        </FormField>
+                        <FormField label="Email Address">
+                            <div data-layout="row"
+                                data-padding="auto">
+                                <input
+                                    data-border="none"
+                                    placeholder="first-last-name"
+                                    style="outline: none"
+                                    type="text"
+                                    value={Bind.twoWaysImmediate(() => this.model.username)}
+                                    />
+                                <span
+                                    text="@socialmail.me"
+                                    />
+                            </div>
+                        </FormField>
+                        <details>
+                            <summary>Username Policy</summary>
+                            Please choose username that resembles your real legal name.
+                            Any other name will be banned and blocked permanently. And you will not be able
+                            to create new username with same phone number as well.
+                        </details>
+                        <FormField label="Password">
+                            <input
+                                type="password"
+                                value={Bind.twoWaysImmediate(() => this.model.password)}
+                                />
+                        </FormField>
+                        <FormField label="Password Again">
+                            <input
+                                type="password"
+                                value={Bind.twoWaysImmediate(() => this.model.passwordAgain)}
+                                />
+                        </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>
+                        <div>
+                            We require phone number verification to prevent misuse and fraud over the email.
+                            And it will also help you in setting up two factor authentication to prevent hackers
+                            from accessing your private emails.
+                        </div>
+                        <br/>
+                        <br/>
+                        <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">
+                            <input type="checkbox" checked={Bind.twoWaysImmediate(() => this.termsAgreed)}/>
+                            <span text="I agree the "/>
+                            <a href="https://socialmail.in/terms.html" target="_blank">Terms & Conditions</a>
+                        </div>
+                        <div data-layout="row">
+                            <button
+                                data-layout="go-button"
+                                data-submit-event="signup"
+                                >Signup</button>
+                        </div>
+                    </Form>
+                </div>
+            </div>
+        </div>;
+
+    }
+
+    @Action({ onEvent: "signup"})
+    async signup() {
+
+        const { model } = this;
+
+        if (!this.termsAgreed) {
+            throw new Error("You must agree to Terms & Conditions.");
+        }
+
+        if (!model.password) {
+            throw new Error("Password is required");
+        }
+
+        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");
+        }
+
+        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 = {} as IVerification,
+            captcha = {} as IVerification
+        } = await FetchBuilder.post("/api/users/signup")
+            .jsonBody(model)
+            .responseAsJson<any>();
+
+        if (userID) {
+            location.href = "/";
+            return;
+        }
+
+        if (captcha) {
+            model.captcha.verified = captcha.verified;
+        }
+
+
+        if (phone?.verified) {
+            model.phone.verified = phone.verified;
+        }
+
+        if (phone?.id) {
+            model.phone.id = phone.id;
+            await this.askPhoneCode();
+        }
+    }
+
+    async askPhoneCode() {
+        this.renderer = <div>
+            <div>
+            <div data-max-width="size-large">
+                <h3>Phone Verification Code</h3>
+                <p>We have send text verification code on your phone number,
+                    please enter the code below to verify.
+                </p>
+                <Form>
+                    <FormField label="">
+                        <input
+                            type="tel"
+                            autofocus={true}
+                            value={Bind.twoWaysImmediate(() => this.model.phone.code)}/>
+                    </FormField>
+                    <div>
+                        <button
+                            data-layout="go-button"
+                            data-submit-event="signup"
+                            >Complete Signup</button>
+                    </div>
+
+                </Form>
+            </div>
+            </div>
+        </div>;
+    }
+
+
+}