decaporg / decaporg/decap-cms

Update Login Screen UI

Open
#3,103 7 comments 2 reactions 0 assignees View on GitHub
area: ui area: ux kind: feature pinned
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

### Why
In support of #2557, this issue aims to provide an initial task to help stakeholders get acclimated to the project.

### Goal
Implement an updated login screen UI based on mockups by @AustinCondiff:

https://projects.invisionapp.com/share/3ATIRBHKW9F#/screens/380522637

Screen Shot 2020-01-16 at 3 19 19 PM

### Details
- The mockup shows the Git Gateway password login screen - that UI comes from the [netlify-identity-widget repo](https://github.com/netlify/netlify-identity-widget/) and is non-trivial to customize. Recommend considering that part out of scope for this issue.
- Due to the previous point, a mockup should be made showing how the other backends, which currently consist only of a button instead of a form, should appear.
- The current login components use some strange positioning, which led to https://github.com/netlify/netlify-cms/issues/2133 being opened. That issue can probably be resolved under this one.

### Tasks
- [ ] Create additional login screen mockup with oauth button in place of form - @AustinCondiff
- [ ] Implement design and document related components in Storybook - @danoszz & @timmysmalls

### Prerequisites
- #3102

Contributor guide

Open the contributing guide

Research direction

Review the login components, the linked mockup, prerequisite #3102, and related issue #2133 first. Confirm the additional OAuth-button mockup before implementing the updated login design, and document the related components in Storybook; completion requires the agreed design and Storybook coverage.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, storybook
Domain
authentication, design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.