kolyose / angular_test Goto Github PK

Создать приложение (SPA) используя Angular. Приветсвуется ииспользование Bootstrap, SCSS и сборщик gulp.

Приложение из себя представляет Блог. На главной странице блога располагаются записи. Для неавторизированного пользователя не должно быть никаких возможностей кроме просмотра списка записей и каждой отдельной записи. Пользователь может авторизироваться с уже существующими логином и паролем или зарегестрироваться. Авторизированный пользователь может добавлять новые записи, удалять существующие. Добавление поста должно происходит из всплывающего окна появляющегося после нажатия на кнопку "Add article". Для неавторизированного пользователя окно появляться не должно, кнопка должна отсутствовать. Авторизированный пользователь может удалять записи. Для этого в списке записей для каждой записи и на странице записи должна быть кнопка "Remove". В случае удаления записи со страницы записи пользователь должен быть перемещен на главную страницу (к списку записей).

В записи имеются поля: Заголовок, содержимое, дата публикации. На странице должна быть возможность поиска то заголовку записи, содержимому записи, а также возможность изменения направления отображения записей (новые сверху/ новые снизу). Все средствами Angular без обращения к серверу.

На сайте также должна присутствовать страница "Auth and registration". Для неавторизованного пользователя на эту страницу должна быть ссылка "Auth" в шапке сайта. Для авторизованного на этом месте должна отображаться почта пользователя и кнопка "Logout". Страница авторизации должна перенаправлять авторизрованного пользователя на главную. На странице должно быть две две панели. Слева -- авторизация, справа -- регистрация. А форме авторизации должно быть два поля ("Email", "Password") и кнопка "Sign in". По нажатию страница должна выполнить запрос заблокировав форму для редактирования и отправки нового запроса до получения ответа. Если ответ подтверждает авторизацию, то в заголовке страницы должна исчезнуть ссылка "Auth" и быть заменена на почту и кнопку "Logout". Пользователя должно перенаправить на главную страницу. Без перезагрузки. Если ответ отрицает авторизацию, под формой должно появится сообщение об ошибке (логин и пароль неверны, форма невалидна). Если пользователь перезагрузить страницу ее состояние не должно измениться и пользватель должен оставаться авторизованым. На стороне регистрации пользователя должно быть 3 поля ("Email", "Password", "Password repeat") и кнопка "Sign up". По нажатию страница должна выполнить запрос заблокировав форму для редактирования и отправки нового запроса до получения ответа. В случае успеха повторить сценарий формы авторизации. В случае ошибки под формой должно появится сообщение об ошибке (логин или email уже использованы, форма невалидна).

Формы должны иметь предварительную валидацию. Все поля обязательны для заполнения.

• NodeJS 4+
• MongoDB

Слушает 0.0.0.0:3000.

Код Angular разместить в /public.

Ниже кнопка Sign in. По нажатию выполняет асинхронный запрос. Поля становятся readonly, кнопка disabled.

Ниже кнопка Sign up. При валидации проверить соответствие полей для паролей. Вывести ошибку для второго поля при несоответствии. (Написать директиву для кастомной валидации).

Будет плюсом: Сделать асинхронную валидацию Email.

Модальное окно всплывает после нажатия на кнопку "Add article". Окно представляет из себя директиву. В окне содержится форма.

Ниже кнопка "Submit". По нажатию выполняет запрос блокируя форму (поля readonly, кнопка disabled).

Конпка "Remove" справа от заголовка записи. По нажатию появляется confirm с вопросом "Are you sure you want to remove the article?". Если "Yes" -- выполнить запрос. Во время выполнения запроса сделать article полупрозрачным opacity: .75. В случае успеха убрать запись из списка или перейти к списку (со страницы записи). В случае ошибки вывести предупреждение. В консоль вывести сообщение об ошибке.

Для выполнения задачи предоставляется REST API как часть разрабатываемого приложения. Исходный код сервера и клиента содержится в одном месте. Запуск сервера выполняется командой node ./bin/www в командной строке BASH. Front-end часть сервера находится в папке ./public на этом сервере. Все данные из этой папки доступны по адресу https://codeit-seitbekir.c9users.io/ после запуска сервера. Доступ к методам для авторизированных пользователей требует token. Об этом ниже.

• / - главная, блог.
• /:postId - запись в блоге по postId.
• /auth - страница авторизации и регистрации.

При перезагрузке (закрытии, открытии) страницы статус пользователя (авторизирован / не авторизирован) должен сохраняться. При получении статуса 403 от любого метода немедленно разавторизировать пользователя. token хранить в localStorage или cookies.

Запрос должен быть в виде JSON. иметь заголовок application/json.

2хх -- коды успеха. 4хх -- коды ошибки.

(в ng-http при 2xx попадает в then, при 4xx -- в catch).

Token передавать в заголовке, если требуется.

$http
    .post("http://_servername_/api/auth/signin", { // Выполнить REST запрос авторизации
        email: "email",
        password: "secretPassword1"
    })
    .then(
        function(res) { // В случае успеха получить токен
            var token = res.data.token;
        },
        function(err) {
            console.log("You cannot log in.");
        }
    );

• Method: POST
• Token: Not required

Body:

После регистрации следует авторизировать пользователя.

• Method: POST
• Token: Not required

Body:

• Method: GET
• Token: Not required

Params:

• Method: POST
• Token: Required

• Method: GET
• Token: Not required

Array of postObject

PostObject:

• Method: POST
• Token: Required

Body:

• Method: GET
• Token: Not required

Params:

• Method: PUT
• Token: Required

Params:

Body:

• Method: DELETE
• Token: Required

Params: