ol-lo / coach-diary Goto Github PK

Если пытаемся залогиниться и указываем несуществующий email, то ничего не происходит.

Нужно выводить сообщение об ошибке около кнопки «start your work» в случае если произовшла ошика авторизации. Неважно ошибочный ли это email или какая-то другая причина.

Чттобы каждый раз не вбивать данные при загрузке страницы данные в store нужно подгружать из json.

Данные для подгрузки нужно хранить в файлах:

• fixtures/coach/students.json
• fixtures/coach/user.json

Названия переменных должны отражать суть происходящего. В этом модуле логика отвечающая за авторизацию

Нам нужно разделение нашего сервиса на роли: ученик (student) и тренер (coach):

urls

С точки зрения адреса в браузере будут две категории путей: /student/* /coach/* . Студент когда логинится, то переводится на localhost/student/ и не может попасть на urlы /coach*. А тренер перенаправляется на localhost/coach и не может попасть на urlы /student/*.
Эти должны разруливаться через vue router

Основные моменты

Форма входа у студента и тренера одна и та же и находится по адресу localhost/sign-in . При начальной загрузке сайта неизвестно кто зашел на сайт. Информация о роли (student или coach) и о пользователе вцелом хранится на сервере. Роль определяется после того как только пользователь вводит логин и пароль:

• лоигн и пароль отправляется на сервер.
• на сервере в базе данных ищется по логину и паролю информация о пользователе: имя пользователя и роль (student/coach).
• Имя, роль и email отправляются обпратно в браузер

{
    role: "coach" или "student"
    firstName: "Имя"
    email: "[email protected]"
}

• В зависимости от роли на клиенте просихоит редирет на /coach или /student
• Вся инфа о пользователе пришедшая с сервера сохранятеся в store.

Чуть подробнее, что делать:

• Создать директорию /api в ней auth.js и users.json

• В auth.js нужно создать метод login. Login в дальнейшем будет отправлять данные на сервер. Но пока login просто будет искать инфу о пользователе в users.json

• При нажантии на кнопку signin в форме sigin нужно вызывать action siginin, который в свою очередь должен вызывать функцию login из auth.js

• api/auth.js login принимает на вход пароль и email и срвнивает с email пользователей из api/users.json. api/login возвращает элемент из массива users.json который содержит email переданный в login.:
  Формат users.json:

[
}
    role: "coach" или "student"
    firstName: "Имя"
    email: "[email protected]"
},
...
]

• store/action принимает ответ из api/auth.js login и сохраняет в store данные о пользователе + перенаправляет через vue router на /stutent или /coach в зависимости от роли, то есть поля role

Создать компонент-страницу coach-panel.

После нажатия клавиши sign-in нужно переходить на эту страницу.
https://i.imgur.com/fqoRdDL.png

Дизайн очень приблизительный. Сильно пока не паримся.

Но, самое главное здесь - это хранение данных.

Бдуем делать это не в local storage а в vuex https://next.vuex.vuejs.org/ .
Нужно подключить эту бибилиотеку, и начать разбираться с ней.

• После ввода данных на форме siпgn-in, email должен попасть в vuex хранилище.
• После этого должны перейти на страницу-компонент coach-panel
• На этой странице-компоненте должно будет отображаться email введенный на странице sign-in. Но, брать этот email нужно будет из vuex хранилища.

Здесь ты берешь значение в чистом виде email. Смысла в таком getter нет. Например getter isUserLoggedIn — нужен. Так как он будет производным от state.email и этот getter будет проверть проверять поле email. Если оно пустое, то пользователь не залогинен. И такой getter имеет смысл.

Или например такой getter, если бы мы писали todolist

getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }

В src/store/modules/auth.js:actions:signUp должен появиться вызов src/api/auth.js:createUser. CreateUser должна слать рельный POST запрос на сервер http://51.250.105.185:8000/ на эндпоинт http://51.250.105.185:8000/api/auth/users

Для этого понадобися:

• подключить библиотеку axios. Для этого нужно будеть воспользоваться npm install axios командой.
• дополнить: vite.config.ts а именно настройку https://vitejs.dev/config/#server-proxy. Это нужно, чтобы решить CORS ограничения. https://rubenr.dev/en/cors-vite-vue/
• понять какие именно параметры нужно слать на сервер. Для этого можно смотреть документацию доступную http://51.250.105.185:8000/api/docs . Там же ты можешь попробоавать слать запросы прямо на странице документации.

В fieldsErrors значения установлены в undefined. Но для таких случаев коррректнее использовать null. Так как значения ошибок есть, но они пустые. «defined ≠ undefined. Defined by null »

getLog можно интерпретировать как «получить жулранл изменений». В разработке слово log обычно значит список изменений.

Мутация GET_LOG не нужна.
Проверка в action isLoggedIn такая: если в store стоит email, значить пользователь залогинен.

Пользователь, каждый раз заходя на сайт не должен каждый раз вводить пароль и логин, если только он не сделал logout. Даже после обновления страницы.

Механизм запоминания можно реализовать через localStorage

В login src/api/auth.js нужно запоминать имя текущего пользователя через localStorage.setItem('currentUser', hisEmail), если успешно прошли проверку.
В app.vue в mounted нужно проверять localstorage.getItem('currentUser') и полученный email здесь же использовать через this.$store.dispatch('signIn', {email: currentUserEmail})

Материал для ознакомления:
https://learn.javascript.ru/localstorage .
https://vuejs.org/guide/essentials/lifecycle.html#registering-lifecycle-hooks

Бэк должен обеспечивать регистрацию и вход.

На странице регистрации
Должны быть поля email, password, confirm password

Выглядеть должно примерно так. Для развития навыков верстки лучше соблюсти стилистику.
https://i.imgur.com/3oufOgy.png

Верстать нужно с использование библиотеки tailwindcss.
Библиотека уже настроена можно использовать ее стили

Очень коротенькая вводная о том что такое tailwindcss https://drbrain.ru/articles/tailwind-css/
Чуть подробнее https://clck.ru/WvGHy . Настройку можно пропустить. Так как уже все настроил. Просто используй стили из tailwindcss

При нажатии на кнопку sigin-in должна происходить проверка формы:

• Все поля обязательны
• поле «Email» должно быть корректным.
• поле «Confirm password» должно совпадать с полем «Password»

Когда нажимаем на Log-In, то должна появлятья форма для входа а не для регистрации.
Пока она должна выглядеть почти так же как и sign-up. За исключением того что там нет поля «confirm password»

Должено быть изолированная точка через которую будет идти обращение к API>

Нужно единообразие в назавании страниц, переменных, классов. Во всех остальных страницах название page отсутствует. Поэтоу и здесь не должно быть «page». Название директории pages говорит о том, что все что внутри директории - это страницы.

сделать доаеление учеников.

Выше кнопки «add your student» сделать таблицу «students» с полями «email», «last name», «first name», «status»

Слева от кнопки «Add your student» должно быть поле «student email». :

• вводим email
• нажимаем add your student
• сверху в таблицу добавлется новый студент с email который мы ввелм, last name, first name пустые, status: invited