Project

General

Profile

Cleanup #35689

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

mgr/dashboard: Proposed Login Screen

Added by Ernesto Puerta over 5 years ago. Updated almost 3 years ago.

Status:
Resolved
Priority:
Normal
Assignee:
Category:
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 enhancementResolved


Related issues

Related to Dashboard - Feature #24647: mgr/dashboard: Improve login screen Closed
Copied to Dashboard - Backport #45710: octopus: mgr/dashboard: Proposed Login Screen Resolved

History

#1 Updated by Ernesto Puerta over 5 years ago

#2 Updated by Ernesto Puerta over 5 years ago

#3 Updated by Ernesto Puerta over 5 years ago

#4 Updated by Ernesto Puerta over 5 years ago

  • Description updated (diff)

#5 Updated by Ernesto Puerta over 5 years ago

  • File deleted (login_screen_1.jpg)

#6 Updated by Ernesto Puerta over 5 years ago

  • File deleted (login_screen_2.jpg)

#7 Updated by Ernesto Puerta over 5 years ago

#8 Updated by Anonymous over 5 years 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 5 years 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 5 years ago

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

#11 Updated by Lenz Grimmer over 5 years 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 5 years ago

+1 for Option 2.

#13 Updated by Kai Wagner over 5 years ago

Option #2 looks awesome! Well done.

#14 Updated by Lenz Grimmer over 5 years ago

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

#15 Updated by Lenz Grimmer over 5 years ago

  • Tags set to low-hanging-fruit

#16 Updated by Lenz Grimmer over 5 years ago

  • Target version set to v14.0.0

#17 Updated by Ernesto Puerta over 5 years ago

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

#18 Updated by Bhaskar Aditya about 4 years 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 about 4 years 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 about 4 years 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 4 years 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 almost 4 years ago

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

#23 Updated by Lenz Grimmer almost 4 years ago

  • Assignee set to Ishan Rai

#24 Updated by Lenz Grimmer almost 4 years 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 almost 4 years ago

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

#26 Updated by Lenz Grimmer almost 4 years ago

  • Status changed from Fix Under Review to Pending Backport

#27 Updated by Nathan Cutler almost 4 years ago

  • Copied to Backport #45710: octopus: mgr/dashboard: Proposed Login Screen added

#28 Updated by Nathan Cutler almost 4 years ago

  • Status changed from Pending Backport to Resolved

While running with --resolve-parent, the script "backport-create-issue" noticed that all backports of this issue are in status "Resolved" or "Rejected".

Also available in: Atom PDF