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

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,30 @@ 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";
+
+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();
 
 const authTypes = [{
     label: "Authenticator (TOTP)",
@@ -37,29 +61,50 @@ 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 = "";
         this.model.timeToken = "";
         this.model.oneTimePassword = "";
-        this.render(<div>
+        this.render(<div class={css}>
             <div data-layout="center-all">
-                <Form>
+                <Form data-border="frame">
+                    <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>
+
+                    { <div data-layout="row">
+                        <span
+                            data-click-event="forgot-password"
+                            data-layout="link">Forgot password?</span>
+                    </div>}
                 </Form>
             </div>
         </div>);
@@ -143,4 +188,15 @@ export default class LoginPage extends ContentPage {
 
     }
 
+    @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"
+        });
+    }
+
 }