update layout login form

Author: LabEG

Clients/SampleSolution.Web/.stats/cabinetes2020_stat.html

@@ -1,7 +1,6 @@
 import { PageController } from "../../../../core/scripts/components/_base/PageController";
 import { signInPageView } from "./SignInPageView";
 import { BaseController } from "../../../../core/scripts/components/_base/BaseController";
-import { alertify } from "@labeg/alertify.js";
 import style from "./SignInPageStyles.scss";
 import { autowired } from "first-di";
 import { AccountService } from "../../../../core/scripts/services/AccountService";
@@ -31,6 +30,8 @@ export class SignInPageController<P, S> extends BaseController<P, S> {
 
     public isProgress: boolean = false;
 
+    public errorMessage: string | null = null;
+
     public login: string = "";
 
     public password: string = "";
@@ -67,6 +68,7 @@ export class SignInPageController<P, S> extends BaseController<P, S> {
     public async makeLogin(): Promise<void> {
         try {
             this.isProgress = true;
+            this.errorMessage = null;
             this.redraw();
 
             const login = new LoginDto();
@@ -76,11 +78,7 @@ export class SignInPageController<P, S> extends BaseController<P, S> {
 
             await this.accountService.login(login);
         } catch (err: unknown) {
-            if (err instanceof Error && err.message === "400 - Bad Request") {
-                alertify.error("An error occurred while trying to login: wrong login or password.");
-            } else {
-                alertify.error(`An error occurred while trying to login: ${String(err)}`);
-            }
+            this.errorMessage = (err as Error).message;
         } finally {
             this.isProgress = false;
             this.redraw();
@@ -89,22 +87,26 @@ export class SignInPageController<P, S> extends BaseController<P, S> {
 
     public onEnterKeyPress(event: KeyboardEventInit): void {
         if (event.key === "Enter") {
+            this.errorMessage = null;
             this.makeLogin();
         }
     }
 
     public setLogin(value: string): void {
         this.login = value;
+        this.errorMessage = null;
         this.redraw();
     }
 
     public setPassword(value: string): void {
         this.password = value;
+        this.errorMessage = null;
         this.redraw();
     }
 
     public setRememberMe(value: boolean): void {
         this.rememberMe = value;
+        this.errorMessage = null;
         this.redraw();
     }
 

Clients/SampleSolution.Web/.stats/cabinetes5_stat.html

@@ -1,41 +1,50 @@
 import React from "react";
 import { SignInPageController } from "./SignInPageController";
-import AccountCircle from "@material-ui/icons/AccountCircle";
 import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import { Link as RouterLink } from "react-router-dom";
 import Link from "@material-ui/core/Link";
 import Checkbox from "@material-ui/core/Checkbox";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Collapse from "@material-ui/core/Collapse";
+import Alert from "@material-ui/lab/Alert";
 
 export const signInPageView = <P, S>(ctrl: SignInPageController<P, S>, _props?: P): JSX.Element => (
     <div className="SignInPageController">
         <form>
-            <h2 className="text-center">
-                Sign In
-            </h2>
-            <AccountCircle key={10} className="avatar" />
-            <div className="grid input-block">
-                <div className="col-6 text-left link-block">
+
+            <div className="grid-bottom">
+                <div className="col-3_sm-6 text-left link-block">
                     <Link to="/sign-up" component={RouterLink}>
                         Sign Up
                     </Link>
                 </div>
-                <div className="col-6 text-right link-block">
+                <div className="col-6_sm-12 mobile-order">
+                    <h2 className="text-center block-title">
+                        Sign In
+                    </h2>
+                </div>
+                <div className="col-3_sm-6 text-right link-block">
                     <Link to="/restore" component={RouterLink}>
                         Restore
                     </Link>
                 </div>
-                <div className="col-12">
+            </div>
+
+            <br />
+            <br />
+
+            <div className="grid">
+                <div className="col-6_sm-12">
                     <TextField key={20}
                         fullWidth
                         name="login"
                         label="Login"
                         onChange={(event: React.ChangeEvent<HTMLInputElement>) => ctrl.setLogin(event.target.value)}
                         onKeyPress={(event: KeyboardEventInit) => ctrl.onEnterKeyPress(event)} />
                 </div>
-                <div className="col-12">
+                <div className="col-6_sm-12">
                     <TextField key={30}
                         fullWidth
                         name="password"
@@ -44,6 +53,19 @@ export const signInPageView = <P, S>(ctrl: SignInPageController<P, S>, _props?:
                         onChange={(event: React.ChangeEvent<HTMLInputElement>) => ctrl.setPassword(event.target.value)}
                         onKeyPress={(event: KeyboardEventInit) => ctrl.onEnterKeyPress(event)} />
                 </div>
+                <div className="col-12">
+                    <Collapse className="full-width" in={Boolean(ctrl.errorMessage)}>
+                        <Alert severity="error">
+                            {ctrl.errorMessage}
+                        </Alert>
+                    </Collapse>
+                </div>
+            </div>
+
+            <br />
+            <br />
+
+            <div className="grid">
                 <div className="col-12">
                     <FormControlLabel label={
                         <small>