search

Techtonica / keyboard-shortcuts-practice

https://techtonica.github.io/keyboard-shortcuts-practice/
26 stars 56 forks source link

Add Login button to the UI that shows correct status #76

Closed alodahl closed 2 years ago

alodahl commented 4 years ago

(Originally this was split between UI in #75 and showing the state but it should be simple enough for it to be a single ticket)

Note: make pull requests to techtonica/keyboard-shortcuts-practice's 'backend' branch.

UI Portion

Design and implement a Login button. They should take the user to /login and /logout

Please design with either a navbar or just a button on the top of the page. It's up to you. There is currently no toolbar or header to the UI.

Logic

Let's make sure the login/already logged in button shows the correct state. The button should show 'log-in' when there is no user yet, and switch to 'logged in' when the user has been authenticated.

window.isLoggedIn will be a boolean indicating if the user is currently logged in or not.

Feel free to use language or cues other than 'logged in' - we just need to make it clear that their progress is now being saved.

Sangvi98 commented 3 years ago

I would like to work on this issue.

nayelimdejesus commented 3 years ago

I would like to work on this

Shraddha2104 commented 3 years ago

Would you guys like to pair up? @nayelimdejesus and @Sangvi98 ?

Sangvi98 commented 3 years ago

Yes, that's okay with me. Do we need to wait for issues #74 and #75 to get resolved first?

alodahl commented 3 years ago

@Sangvi98 yes, 74 and 75 need to happen first.

nayelimdejesus commented 3 years ago

Sounds good!

alodahl commented 3 years ago

Hi @Keerthi4308 , it looks like there are some dependencies that need to be finished first. . Please consider #39 , #136 , or a To Do issue in our other repo: https://github.com/Techtonica/curriculum/projects/2.

Hausekey commented 3 years ago

Hello, is this issue still open? I'd like to work on this, if so.

Hausekey commented 3 years ago

Hello! I made a mockup on a potential login/logout design, and wanted to get some feedback on what to tweak. Once implemented, details such as margins, button corner radii, paddings, etc can be changed more easily. For the logged in indicator, I was thinking of either using the email or a static indication like "Logged in", depending on what data will be stored. The color I picked for the button is the same as the logo color, and the font color is the same as the body's.

Home (2) Logged In

alodahl commented 3 years ago

I think its great! @vegetabill how do you feel about the placement?

vegetabill commented 3 years ago

Looks nice! Can't wait for the PR. Thanks for sharing the draft, @Hausekey

Hausekey commented 3 years ago

Thank you for reviewing the mockup, @alodahl and @vegetabill! I was wondering if I could get some insight on which design is more preferable. As I was implementing it, I learned that the top container was a flexbox with justify-content: center. From my readings, it seems that it causes elements to gravitate to the center, which differs from my mockup plan. I think this design makes sense as well, and it may be better for the login button to be closer to the read box. Attached below is how it looks currently:

logout with 5px margins

I was also able to achieve what I had in the mock-up with some measurements and calculations:

logout with margins

Which of the two would you prefer? I've also pushed two branches with each looks if you wanted to take a look at my commits so far. Please let me know if there are questions or comments.

alodahl commented 3 years ago

I think I prefer the second one, as it looks more like a nav bar as opposed to being part of the text area.

alodahl commented 3 years ago

@Hausekey , I'm not sure which "two branches" you are referring to. Could you make a pull request, or put your links here?

Hausekey commented 3 years ago

For sure @alodahl ,

The branches are: https://github.com/Hausekey/keyboard-shortcuts-practice/tree/login-button-shows-correct-status

and https://github.com/Hausekey/keyboard-shortcuts-practice/tree/login-button-shows-correct-status-centered

respective of the first and second options I posted above. The values of the margins of #account-info are currently hard-coded, so if there's a more preferable way to implement the margins, I'd like to know.

alodahl commented 3 years ago

LGTM! Go ahead and make a pull request.