Project

General

Profile

Actions

Cleanup #35689

closed

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

mgr/dashboard: Proposed Login Screen

Added by Ernesto Puerta over 5 years ago. Updated about 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


Files

login_origina.png (179 KB) login_origina.png Current login screen Ernesto Puerta, 09/05/2018 11:34 AM
Ceph_Login_Pre_fix.png (215 KB) Ceph_Login_Pre_fix.png Option 1 Ernesto Puerta, 09/05/2018 03:05 PM
ceph_login_future_fix.png (279 KB) ceph_login_future_fix.png Option 2 Ernesto Puerta, 09/05/2018 03:06 PM
ceph_login_bgimage_fix.png (145 KB) ceph_login_bgimage_fix.png Background Image (source: https://unsplash.com/photos/Lu9z9qS8I_Q, free for commercial use) Ernesto Puerta, 09/05/2018 03:07 PM

Subtasks 1 (0 open1 closed)

Cleanup #37357: mgr/dashboard: login screen language dropdown enhancementResolved

Actions

Related issues 2 (0 open2 closed)

Related to Dashboard - Feature #24647: mgr/dashboard: Improve login screenClosed

Actions
Copied to Dashboard - Backport #45710: octopus: mgr/dashboard: Proposed Login ScreenResolvedLaura PaduanoActions
Actions #1

Updated by Ernesto Puerta over 5 years ago

Actions #2

Updated by Ernesto Puerta over 5 years ago

Actions #3

Updated by Ernesto Puerta over 5 years ago

Actions #4

Updated by Ernesto Puerta over 5 years ago

  • Description updated (diff)
Actions #5

Updated by Ernesto Puerta over 5 years ago

  • File deleted (login_screen_1.jpg)
Actions #6

Updated by Ernesto Puerta over 5 years ago

  • File deleted (login_screen_2.jpg)
Actions #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.

Actions #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.

Actions #10

Updated by Lenz Grimmer over 5 years ago

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

Actions #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.

Actions #12

Updated by Ju Lim over 5 years ago

+1 for Option 2.

Actions #13

Updated by Kai Wagner over 5 years ago

Option #2 looks awesome! Well done.

Actions #14

Updated by Lenz Grimmer over 5 years ago

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

Updated by Lenz Grimmer over 5 years ago

  • Tags set to low-hanging-fruit
Actions #16

Updated by Lenz Grimmer over 5 years ago

  • Target version set to v14.0.0
Actions #17

Updated by Ernesto Puerta over 5 years ago

  • Subject changed from Proposed Login Screen to mgr/dashboard: Proposed Login Screen
Actions #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??

Actions #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??

Actions #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).

Actions #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

Actions #22

Updated by Kiefer Chang about 4 years ago

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

Updated by Lenz Grimmer about 4 years ago

  • Assignee set to Ishan Rai
Actions #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>
Actions #25

Updated by Ernesto Puerta almost 4 years ago

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

Updated by Lenz Grimmer almost 4 years ago

  • Status changed from Fix Under Review to Pending Backport
Actions #27

Updated by Nathan Cutler almost 4 years ago

  • Copied to Backport #45710: octopus: mgr/dashboard: Proposed Login Screen added
Actions #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".

Actions

Also available in: Atom PDF