Add: register page, account info page

6 years ago · 2728a0ca01
parent cf0e05c918
commit 2728a0ca01
12 changed files with 410 additions and 81 deletions
--- a/src/main/java/ru/ulstu/user/component/UserSessionLoginFailureHandler.java
+++ b/src/main/java/ru/ulstu/user/component/UserSessionLoginFailureHandler.java
@ -28,7 +28,14 @@ public class UserSessionLoginFailureHandler implements AuthenticationFailureHand
            throws IOException, ServletException {

        response.setStatus(HttpStatus.UNAUTHORIZED.value());
+        HashMap<String, Object> data = new HashMap<>();
+        data.put("data", null);
+        HashMap<String, Object> error = new HashMap<>();
+        error.put("code", HttpStatus.UNAUTHORIZED.value());
+        error.put("message", "<b>Не удается войти.</b><br>Пожалуйста, проверьте правильность написания <b>логина</b> и <b>пароля</b>.");
+        data.put("error", error);
+
        response.getOutputStream()
-                .write("<b>Не удается войти.</b><br>Пожалуйста, проверьте правильность написания <b>логина</b> и <b>пароля</b>.".getBytes(StandardCharsets.UTF_8));
+                .write(objectMapper.writeValueAsString(data).getBytes(StandardCharsets.UTF_8));
    }
 }
--- a/src/main/java/ru/ulstu/user/controller/UserController.java
+++ b/src/main/java/ru/ulstu/user/controller/UserController.java
@ -107,6 +107,13 @@ public class UserController extends OdinController<UserListDto, UserDto> {
        return new Response<>(userService.getUserWithRolesById(userId));
    }

+    @GetMapping("/account")
+    @Secured({UserRoleConstants.ADMIN, UserRoleConstants.USER})
+    public Response<UserDto> getUserBySession(@RequestParam("session_id") String sessionId){
+        log.debug("REST: UserController.getUserBySession( {} )", sessionId);
+        return new Response<>(userSessionService.getUserDtoBySessionId(sessionId));
+    }
+

    @PostMapping("")
    @Secured(UserRoleConstants.ADMIN)
--- a/src/main/java/ru/ulstu/user/controller/UserMVCController.java
+++ b/src/main/java/ru/ulstu/user/controller/UserMVCController.java
@ -0,0 +1,28 @@
+package ru.ulstu.user.controller;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import ru.ulstu.user.service.UserService;
+import ru.ulstu.user.service.UserSessionService;
+
+@Controller
+public class UserMVCController {
+
+    private final Logger log = LoggerFactory.getLogger(UserMVCController.class);
+
+    private final UserService userService;
+    private final UserSessionService userSessionService;
+
+    public UserMVCController(UserService userService, UserSessionService userSessionService) {
+        this.userService = userService;
+        this.userSessionService = userSessionService;
+    }
+
+    @GetMapping("/acc-info")
+    public String getAcc(){
+        return "acc-info";
+    }
+
+}
--- a/src/main/java/ru/ulstu/user/service/UserSessionService.java
+++ b/src/main/java/ru/ulstu/user/service/UserSessionService.java
@ -10,6 +10,7 @@ import ru.ulstu.core.jpa.OffsetablePageRequest;
 import ru.ulstu.core.model.response.PageableItems;
 import ru.ulstu.user.error.UserNotFoundException;
 import ru.ulstu.user.model.User;
+import ru.ulstu.user.model.UserDto;
 import ru.ulstu.user.model.UserSession;
 import ru.ulstu.user.model.UserSessionListDto;
 import ru.ulstu.user.repository.UserSessionRepository;
@ -22,10 +23,12 @@ public class UserSessionService {
    private final Logger log = LoggerFactory.getLogger(UserSessionService.class);
    private final UserSessionRepository userSessionRepository;
    private final UserService userService;
+    private final UserMapper userMapper;

-    public UserSessionService(UserSessionRepository userSessionRepository, UserService userService) {
+    public UserSessionService(UserSessionRepository userSessionRepository, UserService userService, UserMapper userMapper) {
        this.userSessionRepository = userSessionRepository;
        this.userService = userService;
+        this.userMapper = userMapper;
    }

    @Transactional(readOnly = true)
@ -54,4 +57,9 @@ public class UserSessionService {
        userSessionRepository.save(userSession);
        log.debug("User session {} closed", sessionId);
    }
+
+    public UserDto getUserDtoBySessionId(String sessionId){
+        final UserSession userSession = userSessionRepository.findOneBySessionId(sessionId);
+        return userMapper.userEntityToUserDto(userSession.getUser());
+    }
 }
--- a/src/main/resources/public/js/core.js
+++ b/src/main/resources/public/js/core.js
@ -56,7 +56,7 @@ function errorHandler(response, callBack, errorCallBack) {
        // TODO: add l10n
        // showFeedbackMessage(response.error.code + ": " + response.error.message, MessageTypesEnum.DANGER);
        if (!isEmpty(errorCallBack)) {
-            errorCallBack(response.data);
+            errorCallBack(response.error);
        }
        throw response.error.code + ": " + response.error.message +
        " / Details: " + response.error.data;
@ -121,7 +121,10 @@ function postToRest(url, postData, callBack, completeCallback, errorCallBack) {
                return;
            }
            completeCallback();
-        }
+        },
+
+    }).fail(function (response) {
+        errorHandler(response.responseJSON, callBack, errorCallBack);
    });
 }

--- a/src/main/resources/public/js/react/accountPage/index.js
+++ b/src/main/resources/public/js/react/accountPage/index.js
@ -0,0 +1,55 @@
+const {
+    LinearProgress,
+    CircularProgress,
+    Card,
+    CardHeader,
+    CardContent,
+    FormControl,
+    FormLabel,
+    TextField,
+    Button
+} = window['material-ui'];
+const { Component } = window['React'];
+const React = window['React'];
+
+class Account extends Component{
+    constructor(){
+        super();
+
+        const session_id = document.cookie.toLowerCase().match(/jsessionid=(.*?).node0/)[1];
+        $.getJSON("/api/1.0/users/account?session_id=" + session_id,
+            null, this.responseUserDto);
+
+        this.state = {
+            userDto: null
+        };
+    }
+
+    responseUserDto = response => {
+        this.setState({
+            userDto: response.data
+        });
+    };
+
+    render(){
+        return (
+            this.state.userDto != null ? (
+                <div style={{width: '75%', margin: 'auto'}}>
+                    <Card>
+                        <CardHeader title={this.state.userDto.firstName + " " + this.state.userDto.lastName}/>
+                        <CardContent>
+                            <p>Login: {this.state.userDto.login}</p>
+                            <p>Email: {this.state.userDto.email}</p>
+                        </CardContent>
+                    </Card>
+                </div>
+            ) : (
+                <div className="text-center">
+                    <CircularProgress />
+                </div>
+            )
+        )
+    }
+}
+
+ReactDOM.render(<Account/>, document.getElementById('react-account'));
--- a/src/main/resources/public/js/react/loginPage/components/login.js
+++ b/src/main/resources/public/js/react/loginPage/components/login.js
@ -7,51 +7,37 @@ const {
    TextField,
    Button
 } = window['material-ui'];
+const React = window['React'];
+const {Component} = React;

-class LoginForm extends React.Component{
+class LoginForm extends Component{
    state = {
-        isValidUsername: false,
-        isValidPassword: false,
        username: "",
        password: "",
        errorsMessage: ""
    };

-    handleChangeUsername = event => {
+    handleChange = field => event => {
        this.setState({
-            username: event.target.value,
-            isValidUsername: /^[_'.@A-Za-z0-9-]*$/.test(event.target.value)
-        });
-    };
-
-    handleChangePassword = event => {
-        this.setState({
-            password: event.target.value,
-            isValidPassword: (event.target.value.length > 4)
+            [field]: event.target.value,
+            ["isValid_"+field]: true
        });
    };

    handleSubmit = loginForm => () => {
-        if (loginForm.state.isValidUsername && loginForm.state.isValidPassword){
-            $.post(
-                "/login",
-                loginForm.state,
-                this.handleResponseAjaxPost(loginForm)("success")
-            ).fail(this.handleResponseAjaxPost(loginForm)("error"));
-        }
+        $.post("/login", $('form.login-form').serialize(),
+            this.handleResponseAjaxPost(loginForm)("success"))
+            .fail(this.handleResponseAjaxPost(loginForm)("error"));
    };

    handleResponseAjaxPost = loginForm => status => response => {
        if (status === "success"){
            window.location.href = "/index";
-            loginForm.setState({
-                errorsMessage: ""
-            });
        } else if (status === "error"){
+            let responseJSON = JSON.parse(response.responseText);
            loginForm.setState({
-                errorsMessage: response.responseText,
+                errorsMessage: responseJSON.error.message,
                password: "",
-                isValidPassword: false
            })
        }
    };
@ -61,7 +47,7 @@ class LoginForm extends React.Component{
            <Card onKeyPress={e => (e.key === 'Enter' ? this.handleSubmit(this)() : null)} tabIndex="0">
                <CardHeader title="Вход"/>
                <CardContent>
-                    <form>
+                    <form className="login-form">
                        <FormControl component="fieldset" style={{width: '100%'}}>
                            <FormLabel error={true}>
                                <div
@ -72,24 +58,23 @@ class LoginForm extends React.Component{
                            <TextField
                                label="Логин"
                                value={this.state.username}
-                                onChange={this.handleChangeUsername}
+                                onChange={this.handleChange("username")}
                                margin="normal"
-                                error={!this.state.isValidUsername}
-                                helperText={!this.state.isValidUsername ? "Логин не соответствует требованиям ^[_'.@A-Za-z0-9-]*$" : ""}
+                                type="text"
+                                InputProps={{name: "username"}}
                            />
                            <TextField
                                label="Пароль"
                                value={this.state.password}
-                                onChange={this.handleChangePassword}
+                                onChange={this.handleChange("password")}
                                margin="normal"
-                                error={!this.state.isValidPassword}
-                                helperText={!this.state.isValidPassword ? "Пароль должен содержать 5 символов" : ""}
+                                type="password"
+                                InputProps={{name: "password"}}
                            />
                            <Button
                                variant="contained"
                                onClick={this.handleSubmit(this)}
                                style={{margin: 'auto'}}
-                                disabled={!this.state.isValidUsername || !this.state.isValidPassword}
                            >Войти</Button>
                        </FormControl>
                    </form>
--- a/src/main/resources/public/js/react/loginPage/components/register.js
+++ b/src/main/resources/public/js/react/loginPage/components/register.js
@ -5,58 +5,290 @@ const {
    FormControl,
    FormLabel,
    TextField,
-    Button
+    Button,
+    InputAdornment,
+    IconButton,
+    Icon,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogContentText,
+    DialogActions
 } = window['material-ui'];
+const { Component } = window['React'];
+const React = window['React'];
+
+class RegisterForm extends Component{
+    validate(field, state) {
+        switch (field) {
+            case "login":
+                return (
+                    (state[field].length >= 4) &&
+                    /^[_'.@A-Za-z0-9-]*$/.test(state[field])
+                );
+            case "password":
+                return (
+                    (state[field].length >= 6)
+                );
+            case "passwordConfirm":
+                return (
+                    (state[field].length >= 6) &&
+                    (state[field] === state["password"])
+                );
+            case "email":
+                return (
+                    (/.+@.+\..+/i.test(state[field]))
+                );
+            case "firstName":
+                return (
+                    (state[field].length >= 2)
+                );
+            case "lastName":
+                return (
+                    (state[field].length >= 2)
+                );
+        }
+    }
+    fields = ["login", "password", "passwordConfirm", "email", "firstName", "lastName"];
+    labels = {
+        login: "Логин",
+        password: "Пароль",
+        passwordConfirm: "Подтверждение пароля",
+        email: "Email",
+        firstName: "Имя",
+        lastName: "Фамилия",
+    };
+    typeInputs = {
+        login: "text",
+        password: "password",
+        passwordConfirm: "password",
+        email: "email",
+        firstName: "text",
+        lastName: "text",
+    };
+
+    dialogContents = {
+        login: (
+            <DialogContentText>
+                Длина логина должна быть <b>не менее 4 символов</b> и <b>не превышать 50 символов</b>.<br/>
+                Логин может состоять из:<br/>
+                &nbsp;&nbsp;&nbsp;&nbsp;1. Строчных или заглавных букв латинского алфавита<br/>
+                &nbsp;&nbsp;&nbsp;&nbsp;2. Цифр<br/>
+                &nbsp;&nbsp;&nbsp;&nbsp;3. знаков препинания <b>_'.@-</b><br/>
+            </DialogContentText>
+        ),
+        password: (
+            <DialogContentText>
+                Длина пароля должна быть <b>не менее 6 символов</b> и <b>не превышать 50 символов</b>.
+            </DialogContentText>
+        ),
+        passwordConfirm: (
+            <DialogContentText>
+                Пароли должны совпадать и соответствовать требованиям пароля
+            </DialogContentText>
+        ),
+        email: (
+            <DialogContentText>
+                Почта должна соответвовать примеру: <b>example@domain.com</b>
+            </DialogContentText>
+        ),
+        firstName: (
+            <DialogContentText>
+                Длина имени должна быть <b>не менее 2 символов</b> и <b>не превышать 50 символов</b>.
+            </DialogContentText>
+        ),
+        lastName: (
+            <DialogContentText>
+                Длина Фамилии должна быть <b>не менее 2 символов</b> и <b>не превышать 50 символов</b>.
+            </DialogContentText>
+        ),
+    };

-class RegisterForm extends React.Component{
    state = {
-        isValidUsername: false,
-        isValidPassword: false,
-        username: "",
+        isValid_login: true,
+        isValid_password: true,
+        isValid_passwordConfirm: true,
+        isValid_email: true,
+        isValid_firstName: true,
+        isValid_lastName: true,
+        login: "",
        password: "",
-        errorsMessage: ""
+        passwordConfirm: "",
+        email: "",
+        firstName: "",
+        lastName: "",
+        error_login: "",
+        error_password: "",
+        error_passwordConfirm: "",
+        error_email: "",
+        error_firstName: "",
+        error_lastName: "",
+        isComplete: false,
+        errorsMessage: "",
+        infoAbout: "",
+        infoIsOpen: false,
    };

-    handleChangeUsername = event => {
+    handleChange = field => event => {
        this.setState({
-            username: event.target.value,
-            isValidUsername: (event.target.value.length > 4)
+            [field]: event.target.value,
+            ["isValid_"+field]: true
        });
    };

-    handleChangePassword = event => {
-        this.setState({
-            password: event.target.value,
-            isValidPassword: (event.target.value.length > 4)
+    isValid = state => {
+        let result = true;
+        this.fields.forEach(field => {
+            result = result && state["isValid_"+field];
+        });
+        return result;
+    };
+
+    registerFormToJson = function () {
+        let formData = {};
+        $(".register-form").find(":input").not(":button").each(function () {
+            if ($(this).val() == null || $(this).val() === "") {
+                return true;
+            }
+            formData[$(this).attr("name")] = $(this).val();
        });
+        return JSON.stringify(formData);
    };

-    handleSubmit = loginForm => () => {
-        if (loginForm.state.isValidUsername && loginForm.state.isValidPassword){
-            $.post(
-                "/api/1.0/users/register",
-                loginForm.state,
-                this.handleResponseAjaxPost(loginForm)("success")
-            ).fail(this.handleResponseAjaxPost(loginForm)("error"));
+    handleSubmit = registerForm => () => {
+        let valids = {};
+        this.fields.forEach(field => {
+            valids["isValid_"+field]=this.validate(field, registerForm.state)
+        });
+        this.setState(valids);
+        if (this.isValid(valids)){
+            postToRest("/api/1.0/users/register", this.registerFormToJson(), null,
+                this.handleResponseAjaxPost(registerForm)("success"),
+                this.handleResponseAjaxPost(registerForm)("error"));
        }
    };

-    handleResponseAjaxPost = loginForm => status => response => {
+    handleResponseAjaxPost = registerForm => status => response => {
        if (status === "success"){
-            window.location.href = "/index";
-            loginForm.setState({
-                errorsMessage: ""
+            registerForm.setState({
+                isComplete: true
            });
        } else if (status === "error"){
-            loginForm.setState({
-                errorsMessage: response.responseText,
-                password: "",
-                isValidPassword: false
-            })
+            switch (response.code) {
+                case 103:
+                    registerForm.setState({
+                        errorsMessage: response.message,
+                        error_login: "Пользователь с таким логином уже существует",
+                        isValid_login: false
+                    });
+                    break;
+                case 102:
+                    registerForm.setState({
+                        errorsMessage: response.message,
+                        error_email: "Пользователь с таким адресом уже существует",
+                        isValid_email: false
+                    });
+                    break;
+                default:
+                    registerForm.setState({
+                        errorsMessage: response.message
+                    });
+                    break;
+            }
        }
    };

+    handleClickInfo = field => () => {
+        this.setState({
+            infoAbout: field,
+            infoIsOpen: true,
+        });
+    };
+
+    handleCloseInfo = () => {
+        this.setState({
+            infoIsOpen: false
+        })
+    };
+
+    getForm = () => {
+        return (
+            <form className="register-form">
+                <FormControl component="fieldset" style={{width: '100%'}}>
+                    <FormLabel error={true}>
+                        <div
+                            className="Container"
+                            dangerouslySetInnerHTML={{__html: this.state.errorsMessage}}>
+                        </div>
+                    </FormLabel>
+                    {this.fields.map(field => (
+                        <TextField
+                            label={this.labels[field]}
+                            value={this.state[field]}
+                            onChange={this.handleChange(field)}
+                            margin="normal"
+                            error={!this.state["isValid_"+field]}
+                            helperText={!this.state["isValid_"+field] ? this.state["error_"+field] : ""}
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            aria-label="Правила"
+                                            onClick={this.handleClickInfo(field)}
+                                        >
+                                            <Icon>info</Icon>
+                                        </IconButton>
+                                    </InputAdornment>
+                                ),
+                                name: field
+                            }}
+                            type={this.typeInputs[field]}
+                        />
+                    ))}
+                    <Dialog
+                        open={this.state.infoIsOpen}
+                        onClose={this.handleCloseInfo}
+                        aria-labelledby="form-dialog-title"
+                    >
+                        <DialogTitle id="form-dialog-title">{this.labels[this.state.infoAbout]}</DialogTitle>
+                        <DialogContent>
+                            {this.dialogContents[this.state.infoAbout]}
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={this.handleCloseInfo} color="primary">
+                                Закрыть
+                            </Button>
+                        </DialogActions>
+                    </Dialog>
+                    <Button
+                        variant="contained"
+                        onClick={this.handleSubmit(this)}
+                        style={{margin: 'auto'}}
+                        disabled={!this.isValid(this.state)}
+                    >Зарегистрироваться</Button>
+                </FormControl>
+            </form>
+        );
+    };
+
+    getCompleteContent = () => {
+        return (
+            <div className="text-center">
+                <h5>Вам на почту <b>{this.state.email}</b> придет письмо с активацией аккаунта в течении нескольких минут.</h5>
+            </div>
+        );
+    };
+
    render(){
-        return <div> </div>;
+        return (
+            <Card onKeyPress={e => (e.key === 'Enter' ? this.handleSubmit(this)() : null)} tabIndex="0">
+                <CardHeader title={this.state.isComplete ? "Вы успешно зарегистрировались" : "Регистрация"}/>
+                <CardContent>
+                    {this.state.isComplete ?
+                        this.getCompleteContent() :
+                        this.getForm()}
+                </CardContent>
+            </Card>
+        );
    }
 }
--- a/src/main/resources/public/js/react/loginPage/index.js
+++ b/src/main/resources/public/js/react/loginPage/index.js
@ -1,6 +1,9 @@
-let {Button, Icon} = window['material-ui'];
+const {Button, Icon} = window['material-ui'];
+const {render} = window['ReactDOM'];
+const React = window['React'];
+const {Component} = React;

-class LoginPage extends React.Component{
+class LoginPage extends Component{
    state = {
        isLogin: true,
        isRegister: false
@ -18,7 +21,7 @@ class LoginPage extends React.Component{
            isLogin: false,
            isRegister: true
        });
-    }
+    };

    render() {
        this.form = null;
@ -46,4 +49,4 @@ class LoginPage extends React.Component{
    }
 }

-ReactDOM.render(<LoginPage/>, document.getElementById("loginForm"));
+render(<LoginPage/>, document.getElementById("loginForm"));
--- a/src/main/resources/templates/acc-info.html
+++ b/src/main/resources/templates/acc-info.html
@ -5,10 +5,14 @@
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorator="default">

-<div class="container" layout:fragment="content" style="margin-top: 70px">
-    Login: <p th:text="${userDto.getLogin()}"></p>
-    Имя: <p th:text="${userDto.getFirstName()}"></p>
-    Фамилия: <p th:text="${userDto.getLastName()}"></p>
+<div class="container" layout:fragment="content">
+    <section id="react-account">
+
+    </section>
+</div>
+
+<div layout:fragment="react-scripts">
+    <script type="text/babel" src="/js/react/accountPage/index.js"></script>
 </div>

 </html>
--- a/src/main/resources/templates/activate.html
+++ b/src/main/resources/templates/activate.html
@ -12,11 +12,6 @@
                class="fa fa-plane fa-4" aria-hidden="true"></i> Balance</span></a>
    </div>
 </nav>
-<div class="container" layout:fragment="content">
-    <div class="margined-top-10">
-        <a href="/login" class="btn btn-success btn-block" role="button">Вернуться к странице входа</a>
-    </div>
-</div>
 <th:block layout:fragment="data-scripts">
    <script type="text/javascript">
        /*<![CDATA[*/
@ -26,8 +21,9 @@
                showFeedbackMessage("Ключ активации не задан", MessageTypesEnum.DANGER);
                return;
            }
-            postToRest(urlUsersActivate + "?key=" + key, null,
+            postToRest("/api/1.0/users/activate?key=" + key, null,
                function () {
+                    window.location.href = "/";
                    showFeedbackMessage("Пользователь успешно активирован");
                }
            );
--- a/src/main/resources/templates/default.html
+++ b/src/main/resources/templates/default.html
@ -96,6 +96,7 @@
 </footer>

 <script src="/js/core.js"></script>
+<div layout:fragment="data-scripts"></div>

 <!-- React -->
 <script src="/webjars/react/16.7.0/umd/react.production.min.js"></script>