Cleanup #35689
closedCleanup #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.
100%
Description
Current
¶
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 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
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 |
Updated by Ernesto Puerta over 5 years ago
- Copied to Cleanup #35690: Proposed Masthead added
Updated by Ernesto Puerta over 5 years ago
- Copied to deleted (Cleanup #35690: Proposed Masthead)
Updated by Ernesto Puerta over 5 years ago
- File login_origina.png login_origina.png added
- Description updated (diff)
Updated by Ernesto Puerta over 5 years ago
- File Ceph_Login_Pre_fix.png Ceph_Login_Pre_fix.png added
- File ceph_login_future_fix.png ceph_login_future_fix.png added
- File ceph_login_bgimage_fix.png ceph_login_bgimage_fix.png added
- Description updated (diff)
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.
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.
Updated by Lenz Grimmer over 5 years ago
FWIW, I too would be in favor of Option#2.
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.
Updated by Lenz Grimmer over 5 years ago
- Related to Feature #24647: mgr/dashboard: Improve login screen added
Updated by Ernesto Puerta over 5 years ago
- Subject changed from Proposed Login Screen to mgr/dashboard: Proposed Login Screen
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??
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??
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):- You should first have a Ceph cluster running. That will give you a running back-end (Python server) and front-end (Angular).
- 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. - Once you have that environment ready, I suggest you to find the login component
src/pybind/mgr/dashboard/frontend/src/app/core/auth/loginand start playing with it and seeing how it react to changes. - This ticket includes all technical information required (background image, color definitions and a layout proposal) for completing the task.
- 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).
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
Updated by Kiefer Chang about 4 years ago
- Status changed from New to Fix Under Review
- Pull request ID set to 34079
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>
Updated by Ernesto Puerta almost 4 years ago
- Target version changed from v14.0.0 to v16.0.0
- Backport set to octopus
Updated by Lenz Grimmer almost 4 years ago
- Status changed from Fix Under Review to Pending Backport
Updated by Nathan Cutler almost 4 years ago
- Copied to Backport #45710: octopus: mgr/dashboard: Proposed Login Screen added
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".