Project

General

Profile

Cleanup #35689

Cleanup #35688: mgr/dashboard: Community branding & styling recommendations

mgr/dashboard: Proposed Login Screen

Added by Ernesto Puerta over 1 year ago. Updated 5 days ago.

Status:
Fix Under Review
Priority:
Normal
Assignee:
Category:
dashboard/general
Target version:
% Done:

100%

Tags:
low-hanging-fruit
Backport:
octopus
Reviewed:
Affected Versions:
Pull request ID:

Description

Current
Current login screen

Option 1: fewer changes

  • Change background color to brand gray (#374249)
  • Add background image (attached to this ticket), anchored to bottom/right
  • Change input field BG color to #333E46
  • No border, separate line on show password is same page as background color
  • Layout changes -- logo and input moved to left to make room for background image

Option 1

Option 2: more changes

  • Change background color to brand gray (#374249)
  • Add background image (attached to this ticket), anchored to bottom/right
  • Input field taller
  • Change input field BG color to #333E46
  • Border, separate line on input fields
  • Layout changes -- logo and input moved to left to make room for background image
  • Replace Ceph icon with full logo and place above input fields
  • Everything else stays the same

Option 2

login_origina.png View - Current login screen (179 KB) Ernesto Puerta, 09/05/2018 11:34 AM

Ceph_Login_Pre_fix.png View - Option 1 (215 KB) Ernesto Puerta, 09/05/2018 03:05 PM

ceph_login_future_fix.png View - Option 2 (279 KB) Ernesto Puerta, 09/05/2018 03:06 PM

ceph_login_bgimage_fix.png View - Background Image (source: https://unsplash.com/photos/Lu9z9qS8I_Q, free for commercial use) (145 KB) Ernesto Puerta, 09/05/2018 03:07 PM


Subtasks

Cleanup #37357: mgr/dashboard: login screen language dropdown enhancementResolvedSebastian Krah


Related issues

Related to mgr - Feature #24647: mgr/dashboard: Improve login screen Closed 06/25/2018

History

#1 Updated by Ernesto Puerta over 1 year ago

#2 Updated by Ernesto Puerta over 1 year ago

#3 Updated by Ernesto Puerta over 1 year ago

#4 Updated by Ernesto Puerta over 1 year ago

  • Description updated (diff)

#5 Updated by Ernesto Puerta over 1 year ago

  • File deleted (login_screen_1.jpg)

#6 Updated by Ernesto Puerta over 1 year ago

  • File deleted (login_screen_2.jpg)

#7 Updated by Ernesto Puerta over 1 year ago

#8 Updated by Anonymous over 1 year ago

My 2 cents,

I'm for option 2 as it makes the focus more obvious thx to the left blue bar.

If I may, having the ceph version reported would be helpful.

#9 Updated by Lenz Grimmer over 1 year ago

Erwan Velu wrote:

I'm for option 2 as it makes the focus more obvious thx to the left blue bar.

Thanks for the feedback!

If I may, having the ceph version reported would be helpful.

For security purposes, this information should only be visible to authenticated users. Being able to determine a service's version number makes it easier for remote attackers to perform an exploit.

#10 Updated by Lenz Grimmer over 1 year ago

FWIW, I too would be in favor of Option#2.

#11 Updated by Lenz Grimmer over 1 year ago

Thanks for attaching the source image. The license terms are described here: https://unsplash.com/license
Even though not strictly necessary, I suggest to give credit to the image author as outlined on that page.

#12 Updated by Ju Lim over 1 year ago

+1 for Option 2.

#13 Updated by Kai Wagner over 1 year ago

Option #2 looks awesome! Well done.

#14 Updated by Lenz Grimmer over 1 year ago

  • Related to Feature #24647: mgr/dashboard: Improve login screen added

#15 Updated by Lenz Grimmer over 1 year ago

  • Tags set to low-hanging-fruit

#16 Updated by Lenz Grimmer over 1 year ago

  • Target version set to v14.0.0

#17 Updated by Ernesto Puerta over 1 year ago

  • Subject changed from Proposed Login Screen to mgr/dashboard: Proposed Login Screen

#18 Updated by Bhaskar Aditya 2 months ago

Hi, My name is Aditya, a GSoC applicant, I have submitted my draft proposal on the project idea CEPH dashboard UI enhancements and this is one of the issues under it.
Can you suggest any starting point for this issue??

#19 Updated by Bhaskar Aditya 2 months ago

Bhaskar Aditya wrote:

Hi, My name is Aditya, a GSoC applicant, I have submitted my draft proposal on the project idea CEPH dashboard UI enhancements and this is one of the issues under it.

Bhaskar Aditya Jha

Can you suggest any starting point for this issue??

#20 Updated by Ernesto Puerta 2 months ago

Bhaskar Aditya wrote:

Hi, My name is Aditya, a GSoC applicant, I have submitted my draft proposal on the project idea CEPH dashboard UI enhancements and this is one of the issues under it.
Can you suggest any starting point for this issue??

Hi Bhaskar,

Welcome to Ceph project!

This activity involves front-end development alone (no back-end changes needed). Let assume you are familiar to Angular development (otherwise, you may check Angular Heroes tutorial):
  1. You should first have a Ceph cluster running. That will give you a running back-end (Python server) and front-end (Angular).
  2. For front-end development, it's highly recommend that you skip the Angular website statically served by the back-end and use one with Just-in-Time compilation (npm start). That will refresh the front-end on every code change you make, which heavily reduces the time to get feedback from you code changes.
  3. Once you have that environment ready, I suggest you to find the login component src/pybind/mgr/dashboard/frontend/src/app/core/auth/login and start playing with it and seeing how it react to changes.
  4. This ticket includes all technical information required (background image, color definitions and a layout proposal) for completing the task.
  5. Note: While option 2 seemed to be the preferred, feel free to come up with either or even both if you want to demo both designs. Additionally, feel free to provide your own inputs/hints to improve the login page.

Let me know if you have any issues with this! (you can reach out to ceph-dashboard team in OFTC IRC #ceph-dashboard room).

#21 Updated by Ishan Rai about 2 months ago

Hi, I have already submitted a PR for this :(, around 7 days ago. https://github.com/ceph/ceph/pull/34079

#22 Updated by Kiefer Chang about 2 months ago

  • Status changed from New to Fix Under Review
  • Pull request ID set to 34079

#23 Updated by Lenz Grimmer about 2 months ago

  • Assignee set to Ishan Rai

#24 Updated by Lenz Grimmer 14 days ago

Lenz Grimmer wrote:

Thanks for attaching the source image. The license terms are described here: https://unsplash.com/license
Even though not strictly necessary, I suggest to give credit to the image author as outlined on that page.

Here's the appropriate credits information:

<a href="https://unsplash.com/photos/Lu9z9qS8I_Q">Photo</a> by <a href="https://unsplash.com/@gaspanik">Masaaki Komori</a> on <a href="https://unsplash.com/">Unsplash</a>

#25 Updated by Ernesto Puerta 5 days ago

  • Target version changed from v14.0.0 to v16.0.0
  • Backport set to octopus

Also available in: Atom PDF