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));
}