AccountDemo.ts

@sources.Scene
export class AccountDemo extends RootSectionModel {
    @constraint.required
    public name: string;

    @constraint.required
    public password: string;

    private justFailed: boolean;

    private get account() {
        return this.scene.tryLoad(Account, { name: this.name });
    }

    public get notice() {
        if (this.justFailed === undefined) {
            return '';
        }
        if (this.justFailed === false) {
            return 'Login Successfully';
        }
        if (!this.account) {
            return '';
        }
        if (this.account.status === 'locked') {
            return 'Account has been locked';
        }
        return `Remaining try times: ${this.account.retryCount}`;
    }

    public get status() {
        if (!this.justFailed || !this.account) {
            return 'default';
        }
        return this.account.status;
    }

    public onLoginClick() {
        if (constraint.validate(this)) {
            return;
        }
        if (!this.account) {
            constraint.reportViolation(this, 'password', {
                message: 'User or password is incorrect',
            });
            return;
        }
        try {
            const success = this.account.login(this.password);
            if (!success) {
                throw new Error('failed');
            }
            this.justFailed = false;
        } catch (e) {
            this.justFailed = true;
            constraint.reportViolation(this, 'password', {
                message: 'User or password is incorrect',
            });
            return;
        }
    }

    public onResetClick() {
        if (this.account) {
            this.account.reset('p@55word');
        }
    }
}

AccountDemo.xml

<Form width="320px" margin="24px">
    <Input label="User" :value="&name" />
    <Input label="Password" :value="&password" />
    <switch :value="status">
        <slot #default><Button @onClick="onLoginClick">Login</Button></slot>
        <slot #locked><Button @onClick="onResetClick">Reset</Button></slot>
    </switch>
    {{ notice }}
</Form>