@social-mail/social-mail-client 1.0.19 → 1.0.21

package/node_modules/@web-atoms/web-controls/src/mobile-app/MobileApp.tsx

@@ -121,6 +121,7 @@ import Route from "@web-atoms/core/dist/core/Route";
         grid-row-start: 1;
         grid-column-start: 2;
         overflow: hidden;
+        overflow-y: visible;
         white-space: nowrap;
         text-overflow: ellipsis;
         color: var(--accent-text-color, black); 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "@web-atoms/font-awesome": "^1.0.37",
     "@web-atoms/hybrid-clr": "^1.0.21",
     "@web-atoms/module-loader": "^2.1.32",
-    "@web-atoms/web-controls": "^2.3.249",
+    "@web-atoms/web-controls": "^2.3.250",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {

package/src/admin/drawer/AdminDrawer.tsx

@@ -33,17 +33,17 @@ export default class AdminDrawer extends Drawer {
                 commandLink={AdminCommands.openHome.displayRoute({})}
                 />
             <MenuItem
-                icon="fas fa-home"
+                icon="fas fa-folder"
                 label="Domains"
                 commandLink={AdminCommands.openDomainList.displayRoute({})}
                 />
             <MenuItem
-                icon="fas fa-home"
+                icon="fas fa-user"
                 label="Users"
                 commandLink={AdminCommands.openUserList.displayRoute({})}
                 />
             <MenuItem
-                icon="fas fa-home"
+                icon="fas fa-envelope"
                 label="Mailboxes"
                 commandLink={AdminCommands.openMailboxList.displayRoute({})}
                 />

package/src/admin/pages/domains/services/AdminDomainService.ts

@@ -18,7 +18,8 @@ export default class AdminDomainService {
 
     public save(domain: IHostedDomain) {
         const clone = this.entityService.cloner(domain)
-            .include((x) => [x.domainUsers,x.domain,x.domainKeys]);
+            .include((x) =>x.domainUsers)
+            .include((x) => x.domain);
         return this.entityService.save(clone.copy);
     }
 

package/src/admin/pages/users/EditUserPage.tsx

@@ -1,65 +1,73 @@
-import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
-import { DomainUser, IUser, User } from "../../../model/model";
+import { PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { IUser } from "../../../model/model";
 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 PasswordBox from "@web-atoms/web-controls/dist/basic/PasswordBox";
 import Bind from "@web-atoms/core/dist/core/Bind";
-import RequiredFormField, { PasswordFormField, TextFormField } from "../../../common/controls/form/RequiredFormField";
+import { IPasswordValidation, Validators } from "../../../common/validators/Validators";
+import PasswordStrength from "../../../common/controls/password/PasswordStrength";
 import Action from "@web-atoms/core/dist/view-model/Action";
-import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
-import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
-import ChooseDomainPage from "../domains/choose/ChooseDomainPage";
-import AdminUserService from "./services/AdminUserService";
-import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import EntityService from "../../../services/EntityService";
+import DateTime from "@web-atoms/date-time/dist/DateTime";
+import Checkbox from "@web-atoms/web-controls/dist/basic/Checkbox";
 
-export default class EditUserPage extends ContentPage {
+export default class EditUserPage extends PopupWindowPage {
 
-    public parameters: { model?: IUser};
+    public parameters: IUser;
 
-    public model: IUser & { password?: string };
+    public model: IUser;
 
-    @InjectProperty
-    private adminUserService: AdminUserService;
+    private password: string = "";
 
     async init() {
 
-        this.model = this.parameters.model ?? {
-            ... User.create({
-                domainUsers: []
-            }),
-            password: ""
+        this.model = this.parameters;
+
+        this.model.changePassword ??= {
+            newPassword: "",
+            forceChangePasswordOnLogin: true
         };
 
-        this.renderer = <div data-layout="center-page-900px">
-            <Form>
-                <TextFormField label="Display Name" autofocus={true} required={true} value={() => this.model.displayName}/>
-                <TextFormField label="Username" required={true} value={() => this.model.userName}/>
-                { this.model.userID
-                    ? <PasswordFormField
-                        label="Password"
-                        required={true}
-                        value={() => this.model.password}/>
-                    : <PasswordFormField
-                        label="Password"
-                        placeholder="Leave empty..."
-                        value={() => this.model.password}/>
-                }
+        this.title = `Reset Password for ${this.model.displayName} (${this.model.userID}, ${this.model.userName})` ;
 
-                <div>
-                    <h5>Domains <i data-click-event="add-domain" class="fas fa-plus"/></h5>
-                    <AtomRepeater
-                        for="table"
-                        items={this.model.domainUsers}
-                        itemRenderer={(item) => <tr>
-                            <td>{item.hostedDomain.domain.name}</td>
-                        </tr>}
+        this.renderer = <div>
+            <Form>
+                { !this.model.userID && <FormField label="Display Name">
+                    <input value={Bind.twoWaysImmediate(() => this.model.displayName)}/>
+                </FormField>}
+                { !this.model.userID && <FormField label="Username">
+                    <input value={Bind.twoWaysImmediate(() => this.model.userName)}/>
+                </FormField>}
+                <FormField
+                    label="Password"
+                    required={true}
+                    error={Bind.oneWay(() => Validators.isValidPassword(this.password) ? "" : "Password is invalid" )}
+                    >
+                    <PasswordBox
+                        value={Bind.twoWaysImmediate(() => this.password)}
                         />
-                </div>
-
+                </FormField>
+                <PasswordStrength
+                    password={Bind.oneWay(() => this.password)}
+                    />
+                <FormField
+                    label="Password again"
+                    required={true}
+                    error={Bind.oneWay(() => this.password !== this.model.changePassword.newPassword ? "Passwords do not match" : "")}>
+                    <PasswordBox
+                        value={Bind.twoWaysImmediate(() => this.model.changePassword.newPassword)}
+                        />
+                </FormField>
+                <FormField label="Force Change Password">
+                    <Checkbox
+                        checked={Bind.twoWaysImmediate(() => this.model.changePassword.forceChangePasswordOnLogin)}
+                        text="Force user to change password on next login."
+                        />
+                </FormField>
                 <div data-layout="command-row">
                     <button
-                        data-submit-event="save-user"
-                        data-layout="accept-button"
+                        data-submit-event="reset-password"
                         text="Save"
                         />
                 </div>
@@ -67,19 +75,12 @@ export default class EditUserPage extends ContentPage {
         </div>;
     }
 
-    @Action({ onEvent: "add-domain"})
-    async addDomain() {
-        const hostedDomain = await PageNavigator.pushPageForResult(ChooseDomainPage);
-        this.model.domainUsers.add(DomainUser.create({
-            domainID: hostedDomain.domainID,
-            hostedDomain
-        }));
-    }
-
-    @Action({ onEvent: "save-user", close: true })
-    async saveUser() {
-        await this.adminUserService.save(this.model);
-        return this.model;
+    @Action({ onEvent: "reset-password", success: "Information saved successfully.", close: true})
+    async resetPassword() {
+        const entityService = this.resolve(EntityService);
+        this.model.dateUpdated = DateTime.utcNow;
+        const clone = entityService.cloner(this.model).include((x) => x.changePassword).copy;
+        await entityService.save(clone);
     }
 
 }

package/src/admin/pages/users/UserListPage.tsx

@@ -4,7 +4,7 @@ import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
 import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
 import EditDomainPage from "../domains/edit/EditDomainPage";
-import { IUser } from "../../../model/model";
+import { IUser, User } from "../../../model/model";
 import AdminUserService from "./services/AdminUserService";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import InfiniteRepeater from "../../../common/controls/repeater/InfiniteRepeater";
@@ -39,6 +39,7 @@ export default class UserListPage extends ContentPage {
                     <td>{user.userID}</td>
                     <td>{user.userName}</td>
                     <td>{user.displayName}</td>
+                    <td><i data-cursor="pointer" class="fas fa-key" title="Change Password" data-click-event="user-change-password"/></td>
                 </tr> }
                 />
         </div>;
@@ -46,8 +47,20 @@ export default class UserListPage extends ContentPage {
 
     @Action({ onEvent: "add-user"})
     async addDomain() {
-        await PageNavigator.pushPageForResult(EditUserPage, {});
+        await PageNavigator.pushPageForResult(EditUserPage, User.create({
+            userName: "",
+            displayName: "",
+            changePassword: {
+                forceChangePasswordOnLogin: true,
+                newPassword: ""
+            }
+        }) );
         this.version++;
     }
 
+    @Action({ onEvent: "user-change-password"})
+    async userChangePassword(model: IUser) {
+        PageNavigator.pushPage(EditUserPage, model);
+    }
+
 }

package/src/common/controls/password/PasswordStrength.tsx

@@ -0,0 +1,43 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import { IPasswordValidation, Validators } from "../../validators/Validators";
+
+export default class PasswordStrength extends AtomControl {
+
+    public password: string = "";
+
+    public validation: IPasswordValidation = {
+        hasMinimumLength: false,
+        hasNumber: false,
+        hasSymbol: false,
+        isValid: false
+    };
+
+    protected preCreate(): void {
+        this.render(<div data-layout="vertical-flex" validation={Bind.oneWay(() => Validators.checkPassword(this.password))}>
+
+            <div data-layout="row">
+                <i
+                    data-color={Bind.oneWay(() => this.validation.hasMinimumLength ? "green" : "red")}
+                    class={Bind.oneWay(() => this.validation.hasMinimumLength ? "fas fa-check" : "fas fa-times")}/>
+                <span text="Password is at least 7 characters long."/>
+            </div>
+
+            <div data-layout="row">
+                <i
+                    data-color={Bind.oneWay(() => this.validation.hasNumber ? "green" : "red")}
+                    class={Bind.oneWay(() => this.validation.hasNumber ? "fas fa-check" : "fas fa-times")}/>
+                <span text="Password has a number."/>
+            </div>
+
+            <div data-layout="row">
+                <i
+                    data-color={Bind.oneWay(() => this.validation.hasSymbol ? "green" : "red")}
+                    class={Bind.oneWay(() => this.validation.hasSymbol ? "fas fa-check" : "fas fa-times")}/>
+                <span text="Password has a symbol."/>
+            </div>
+        </div>);
+    }
+
+}

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

@@ -8,6 +8,10 @@ import PasswordBox from "@web-atoms/web-controls/dist/basic/PasswordBox";
 import Action from "@web-atoms/core/dist/view-model/Action";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import UserService from "../../../services/UserService";
+import { PasswordFormField } from "../../controls/form/RequiredFormField";
+import sleep from "@web-atoms/core/dist/core/sleep";
+import PasswordStrength from "../../controls/password/PasswordStrength";
+import { Validators } from "../../validators/Validators";
 
 export default class LoginPage extends ContentPage {
 
@@ -16,13 +20,15 @@ export default class LoginPage extends ContentPage {
 
     private model: ILoginSession;
 
+    private password?: string = "";
+
     async init() {
         this.model = LoginSession.create({});
         this.model.userName = "";
         this.model.checkPassword = "";
         this.render(<div>
             <div data-layout="center-all">
-                <Form data-submit-event="login">
+                <Form>
                     <FormField label="Username">
                         <input value={Bind.twoWaysImmediate(() => this.model.userName)}/>
                     </FormField>
@@ -34,7 +40,7 @@ export default class LoginPage extends ContentPage {
                     <div>
                         <button
                             data-layout="accent-button"
-                            data-type="submit"
+                            data-submit-event="login"
                             text="Login"
                             />
                     </div>
@@ -45,7 +51,50 @@ export default class LoginPage extends ContentPage {
 
     @Action({ onEvent: "login" })
     async login() {
-        await this.userService.login(this.model);
+        try {
+            await this.userService.login(this.model);
+            return;
+        } catch (error) {
+            if(!/change the password/i.test(error.stack ?? error)) {
+                throw error;
+            }
+        }
+
+        this.model.newPassword = "";
+
+        this.renderer = <div>
+            <div data-layout="center-all">
+                <Form>
+                    <div>Update your password, your one time password is expired.</div>
+                    <FormField
+                        label="Password"
+                        required={true}
+                        error={Bind.oneWay(() => Validators.isValidPassword(this.password)
+                            ? ""
+                            : "Password must contain one symbol, one number and should be minimum 7 characters" )}>
+                        <PasswordBox
+                            value={Bind.twoWaysImmediate(() => this.password)}
+                            />
+                    </FormField>
+                    <PasswordStrength
+                        password={Bind.oneWay(() => this.password)}
+                        />
+                    <FormField
+                        label="Password Again"
+                        required={true}
+                        error={Bind.oneWay(() => this.model.newPassword !== this.password ? "Passwords do not match" : "")}>
+                        <PasswordBox
+                            value={Bind.twoWaysImmediate(() => this.model.newPassword)}
+                            />
+                    </FormField>
+                    <div data-layout="command-row">
+                        <button
+                            data-submit-event="login"
+                            text="Change Password & Login"/>
+                    </div>
+                </Form>
+            </div>
+        </div>;
     }
 
 }

package/src/common/validators/Validators.ts

@@ -0,0 +1,27 @@
+export interface IPasswordValidation {
+    hasMinimumLength: boolean;
+    hasNumber: boolean;
+    hasSymbol: boolean;
+    isValid: boolean;
+}
+
+export const Validators = {
+
+    checkPassword: (password: string) => {
+        const hasMinimumLength = password.length >= 7;
+        const hasNumber = /\d/.test(password);
+        const hasSymbol = /[\@\#\$\%\^\&\*\!]/.test(password);
+        return {
+            hasMinimumLength,
+            hasNumber,
+            hasSymbol,
+            isValid: hasMinimumLength && hasNumber && hasSymbol
+        };
+    },
+
+    isValidPassword: (password: string) => {
+        return Validators.checkPassword(password).isValid;
+    }
+
+};
+

package/src/model/model.ts

@@ -219,12 +219,13 @@ export interface IMailboxThread extends IClrEntity {
 	lastEmailID?: number;
 	dateUpdated?: DateTime;
 	unread?: number;
+	total?: number;
 	mailbox?: IMailbox;
 	emailAddress?: IEmailAddress;
 	lastEmail?: IEmail;
 }
 
-export const MailboxThread: IModel<IMailboxThread> = new Model<IMailboxThread>("MailboxThread", { mailboxID: 0,emailAddressID: 0,lastEmailID: 0,dateUpdated: new DateTime(),unread: 0 });
+export const MailboxThread: IModel<IMailboxThread> = new Model<IMailboxThread>("MailboxThread", { mailboxID: 0,emailAddressID: 0,lastEmailID: 0,dateUpdated: new DateTime(),unread: 0,total: 0 });
 
 export interface IMailboxThreadEmail extends IClrEntity {
 	mailboxID?: number;
@@ -240,17 +241,16 @@ export interface IUser extends IClrEntity {
 	userID?: number;
 	userName?: string;
 	displayName?: string;
-	/** Used only while adding new User, not used for changing password. */
-	password?: string;
+	dateUpdated?: DateTime;
 	/** Save this to change password */
-	changePassword?: { oldPassword?: string;newPassword?: string };
+	changePassword?: { oldPassword?: string;newPassword?: string;forceChangePasswordOnLogin?: boolean };
 	domainUsers?: ICollection<IDomainUser>;
 	roles?: ICollection<IUserRole>;
 	userMailboxes?: ICollection<IUserMailbox>;
 	sessions?: ICollection<ILoginSession>;
 }
 
-export const User: IModel<IUser> = new Model<IUser>("User", { userName: "",displayName: "" });
+export const User: IModel<IUser> = new Model<IUser>("User", { userName: "",displayName: "",dateUpdated: new DateTime() });
 
 export interface IUserRole extends IClrEntity {
 	userID?: number;
@@ -278,6 +278,7 @@ export interface ILoginSession extends IClrEntity {
 	invalid?: boolean;
 	userName?: string;
 	checkPassword?: string;
+	newPassword?: string;
 	user?: IUser;
 }
 

package/src/style/OverrideAppStyle.ts

@@ -6,4 +6,10 @@ import styled from "@web-atoms/core/dist/style/styled";
         width: 100%;
     }
 
+    div[data-base-page=base-page] {
+        & > [data-page-element=title] {
+            overflow: visible;
+        }
+    }
+
 `.withId("default-app-style").withOrder("medium").installGlobal();

package/src/web/drawer/AppDrawer.tsx

@@ -34,12 +34,12 @@ export default class AppDrawer extends Drawer {
                 commandLink={AppCommands.openHome.displayRoute({})}
                 />
             <MenuItem
-                icon="fas fa-home"
+                icon="fas fa-envelope"
                 label="Mails"
                 commandLink={AppCommands.openMails.displayRoute({})}
                 />
             <MenuItem
-                icon="fas fa-home"
+                icon="fas fa-folder"
                 label="Mailboxes"
                 commandLink={AppCommands.openMailboxList.displayRoute({})}
                 />

package/src/web/page/mails/MailsPage.tsx

@@ -36,7 +36,7 @@ export default class MailsPage extends MasterDetailPage {
 
         const first = mailboxes[0];
         this.currentMailboxID = first.mailboxID;
-        this.headerRenderer = () => <div data-layout="row">
+        this.titleRenderer = () => <div data-layout="row">
             <DropDown
                 items={mailboxes}
                 labelPath={(item) => item.emailAddress.emailAddress}