This is a good ticket for someone to work on. A first step for this is a mock-up of what the functionality will look like (either a screenshot, wireframe, or hand-drawn sketch).

For someone to start work on this ticket, please do this first step and then we can assign the issue for someone to work on.

@jflory7 Hello! I would like work on this issue, and I provided a screenshot of what I think the outcome should look like:

It's rather simple, the font would most likely match the font family in the navigation, but I think the size of the greeting should be slightly larger, to signal to the user that they have successfully logged in, and to distinguish the greeting from the links. We could also consider changing the font size/weight/family if it's not too obvious. What do you think? :open_mouth:

@janyu99 Hi! Thanks for volunteering to take this up :thumbsup:

As for the design, while you're right about the greeting, this is not just an one-off greeting, but is a label that will be displayed as long as the user is logged in. So I think the hello can be truncated.

As for the placement of the Name, could you please do it right beneath FAQ? As there will be more user related options added in a future PR regarding implementation of #43, I think it would be better to stack all the user related options together.

Alternatively, all the user related options can be stacked together above the general labels (but I believe having Send Some Happiness at the top should be our best approach since that's the crux of our project)

@jflory7 Could you please give your thoughts on this?

@shraddhaag Ah, I see what you mean, since the username should be visible across all pages, 'Hello' isn't entirely necessary. I updated the design with your requested changes, and this is the result:

The font size of the username is still slightly larger, as I wanted it to resemble a section heading, but we can adjust it to our liking. I also grouped the user related functionality together and moved the group a little down, creating a small gap between the username and the navigation links above. This might be able to translate better the separation between the navigation links and the user related links.

This is what it looks like without separating the user functionality from the main navigation links:

The difference is small, so I think it could be either one, depending on personal preferences.

This is what it would look like with all the general labels below the user options:

(with the gap)

(without the gap)

I also agree with the keeping the "Send Some Happiness" at the top, or at least the most apparent. Though I think this may have to be a separate concern to brainstorm about :open_mouth:

I would love to know everyone's thought about this :smile:

Hi, sorry to jump in on this late!

I think the displayed name and the logout buttons should be placed together. My personal preference is to see the username and logout button at the top of the navigation side bar, such as the following top-to-bottom order:

• @username
• Logout
• Send some happiness!

I also prefer to retain the existing menu order where possible. Since the application is already deployed, I think there is value in keeping things as they are to prevent user confusion (i.e. breaking user habits if they are used to something being somewhere). In other words, I think it's better to keep the Happiness Archive at the bottom of the menu.

@janyu99 I think the discussion we've had so far is sufficient to start work. If my feedback makes sense to you, feel free to start working on this! Let us know if we can do anything to offer guidance or help. I'll assign this ticket to you for now.

@jflory7 Awesome, thanks for your input! I'll start working on it soon, and make sure to bring up any concerns I run into :smile:

@jflory7 Awesome, thanks for your input! I'll start working on it soon, and make sure to bring up any concerns I run into 😄

Great start @janyu99! It would be great if you could share a wire frame regarding the changes asked by @jflory7 . After reviewing the changes that should be incorporated, you are all set to change that into code. It does save a lot time. Cheers :)

@alishapapun Thanks for the suggestion! I was still having some trouble thinking of what the best positions of the elements should be, and creating wireframes is definitely a good practice I should adopt before editing code :) I would also love to know what you think as well!

I've taken @shraddhaag 's and @jflory7 's suggestions and placed them into this wireframe, and this is what I came up with:

Before Login:

After Login:

I grouped the user related functionality with the username, but I kept the logout button at the bottom as given the current flow of navigation, the logout button would sit in the middle, and I feel that that would be a bit strange or jarring to see. I would like to follow typical logout button placement and keep it at the bottom, as it does seem more natural to me for logout to be the last task for the user to do. I placed the user functionality at the top because I think that upon logging in, it would make sense to see what functionality is available to the user first, then the general navigation links after. After all, the purpose of logging in is to see what new things you can access :D That's just what I think

I also added a gap between the two groups of links to separate their meaning/purposes, if that makes sense?

Let me know what you guys think, I would be happy to make any changes!

I've taken @shraddhaag 's and @jflory7 's suggestions and placed them into this wireframe, and this is what I came up with:

Thanks for putting this together! :thumbsup:

I grouped the user related functionality with the username, but I kept the logout button at the bottom as given the current flow of navigation, the logout button would sit in the middle, and I feel that that would be a bit strange or jarring to see.

My first thought as a user is the Logout button appearing near the user-related functionality. For example, I first look to the larger text with my username since it's emphasized, and my mind assumes account-related tasks would be near the username. I might suggest moving the Login/Logout prompt to the top.

Let me know what you guys think, I would be happy to make any changes!

Everything else looks excellent to me! :tada:

@jflory7 Thank you for your input! Hmm, I moved the logout button to the top with the other user links, and now I think it does make more sense for it to be up there :O

I'll start editing the code soon, and if I run into further issues, I'll let you know.

And if anyone else has any other thoughts, I would love to hear them as well :)

@jflory7 @shraddhaag So, I started editing the code and just tested out the different positions, and given the change in the appearance of the login and logout buttons, preferences for position may change.

Logout at the bottom:

Logout after user related links:

I don't think I mind either one, but I would just like to have some thoughts before I overthink the position of things :sweat_smile:

Also, as a side note, I also moved the 'Send some happiness!' below the username as it does count as a user functionality, but I can move it back to its original location if it's preferred.

Logout after user related links:

I don't think I mind either one, but I would just like to have some thoughts before I overthink the position of things 😅

The Logout grouped with user related functionalities makes sense as @jflory7 mentioned above.
Great job on the changes! :)

Hi,
When I logon to the page I get redirected to https://iddev.fedorainfracloud.org.... Did you have to change anything to test the logon?
Thanks, Ana

@anasustic That's the right redirect. You need to log into through Ipsilon using your FAS credentials.

Hi @shraddhaag . I am sorry but I must be missing a step. I just get a 400 - Bad Request
Invalid redirect_uri when I try to login or send a happiness package from my local development environment.

@anasustic Are you navigating to localhost:8000 or 127.0.0.1:8000? If you're doing the latter, try with the former and lemme know if it doesn't work out for you.

Hi @shraddhaag I am connecting from a remote machine using http://:8000/

Oh... I see... locally the login works :100: What do I need to do to login from a different machine (I am running my development machine on a VMbox and connecting to it from my Host machine)

@anasustic Ah! Interesting. Now the reason you aren't able to access is because in generate_client_secrets.sh we have

"redirect_uris": ["http://localhost:8000/oidc/callback/"] set.

This is the cause for the invalid redirect_uri. You can change the localhost in this file to the IP Address of your dev machine, delete the client_secrets.json, build your container and try again, I think it should work.

Hi @shraddhaag It appears docker-compose up --build fails when I replace local host with and ip address:
Step 10/12 : RUN ./manage.py collectstatic --noinput KeyError: 'client_id' ERROR: Service 'web' failed to build: The command '/bin/sh -c ./manage.py collectstatic --noinput' returned a non-zero code: 1

@anasustic Oh! I'll try to look into this and search what could be causing this problem :)

Thanks @shraddhaag :raised_hands: Also let me know if that is something I could work on as Outreachy applicant :)

Hi @shraddhaag It appears docker-compose up --build fails when I replace local host with and ip address:
Step 10/12 : RUN ./manage.py collectstatic --noinput
KeyError: 'client_id'
ERROR: Service 'web' failed to build: The command '/bin/sh -c ./manage.py collectstatic --noinput' returned a non-zero code: 1

I'm stumped on this one too. I'll need more time to look into why this is happening. I might not be able to dig deeper until next week though. :disappointed:

@jflory7 @shraddhaag Hi guys, I've made a pull request regarding this issue [here] :smile: (https://pagure.io/fedora-commops/fedora-happiness-packets/pull-request/165) Since I don't think you can post pictures on the pull request, I'll post the before and after images here:

Login before change:

Login after change:

Logout before change:

Logout after change:

Let me know if there are any issues!

@janyu99 Your changes look great! I left some feedback in #165 since there is a merge conflict. Once it is rebased, we can get it merged. :thumbsup:

@janyu99 Thanks again for working on this! :tada: I'm closing this ticket as complete. :clapper: