diff --git a/app/src/ui/sign-in/sign-in.tsx b/app/src/ui/sign-in/sign-in.tsx index d9ab5d2d54..ffc2306487 100644 --- a/app/src/ui/sign-in/sign-in.tsx +++ b/app/src/ui/sign-in/sign-in.tsx @@ -36,9 +36,8 @@ const DefaultTitle = 'Sign in' const browserSignInInfoContent = (

- Your browser will redirect you back to GitHub Desktop once you've signed in. - If your browser asks for your permission to launch GitHub Desktop, please - allow it. + Your browser will open so you can approve this sign-in. Come back here for + the code you'll need to enter.

) @@ -188,10 +187,28 @@ export class SignIn extends React.Component {

) : undefined + // Sign in is the OAuth device flow: the user has to type a short code into + // their browser, so this is the one place it can be read from. Until the + // code arrives there is nothing to show but what is about to happen. + const { deviceFlow } = state + return ( {credentialHelperInfo} - {browserSignInInfoContent} + {deviceFlow ? ( + <> +

+ Enter this code at {deviceFlow.verificationURI} to + finish signing in. Keep this window open — it'll continue + automatically once you approve. +

+
+ {deviceFlow.userCode} +
+ + ) : ( + browserSignInInfoContent + )}
) } diff --git a/app/styles/ui/_device-flow.scss b/app/styles/ui/_device-flow.scss index 6979cf82c0..fe5ea2bda2 100644 --- a/app/styles/ui/_device-flow.scss +++ b/app/styles/ui/_device-flow.scss @@ -1,27 +1,29 @@ // Sign in uses the OAuth device flow: the user is shown a short code to type // into their browser. The code has to be effortless to read and transcribe, so // it gets a monospace face, generous tracking and a lot of size. -.sign-in-form { - .device-flow-instructions { - margin-bottom: var(--spacing); - color: var(--text-secondary-color); - } +// +// Deliberately not scoped to a container. The code is shown from two places - +// the welcome flow's form and the sign-in dialog - and scoping this to the +// first is what left the second with no styles for it at all. +.device-flow-instructions { + margin-bottom: var(--spacing); + color: var(--text-secondary-color); +} - .device-flow-user-code { - font-family: var(--font-family-monospace); - font-size: var(--font-size-xl); - font-weight: var(--font-weight-semibold); +.device-flow-user-code { + font-family: var(--font-family-monospace); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-semibold); - // Digits and letters are easy to confuse when they're packed together. - letter-spacing: 0.2em; - text-align: center; - user-select: text; + // Digits and letters are easy to confuse when they're packed together. + letter-spacing: 0.2em; + text-align: center; + user-select: text; - padding: var(--spacing) var(--spacing-double); - margin-bottom: var(--spacing-double); + padding: var(--spacing) var(--spacing-double); + margin-bottom: var(--spacing-double); - border: var(--base-border); - border-radius: var(--border-radius); - background: var(--box-alt-background-color, var(--box-background-color)); - } + border: var(--base-border); + border-radius: var(--border-radius); + background: var(--box-alt-background-color, var(--box-background-color)); }