make login page not garbage

Pages/Login.razor

@@ -23,35 +23,76 @@
 @inject ILocalStorageService localStorage
 @inject IDialogService DialogService
 @inject SettingsService savedSettings
+@inject IJSRuntime JSRuntime
 
 <PageTitle>Login</PageTitle>
-<h1>Login</h1>
 
-<p>
+<FluentBodyContent style="padding: 1rem;">
-    TBD
+    <h1>Login</h1>
-</p>
 
-<span>@LoginCode</span>
+    <p>
+        You'll need to sign in with the Blazing API before using this site.
+    </p>
 
-<FluentButton Appearance="Appearance.Accent" OnClick="RefreshCode">Refresh Code</FluentButton>
+    <p>
-<FluentButton Appearance="Appearance.Accent" OnClick="FinishSignIn">Finish Sign-in</FluentButton>
+        <FluentRadioGroup Name="external" @bind-Value=IsExternal Label="Sign in using:" Orientation="Orientation.Vertical" Disabled="@HasStarted">
-<FluentButton Appearance="Appearance.Accent" OnClick="ChangeServerAsync">Change API Server</FluentButton>
+            <FluentRadio Value="@(false)">This device</FluentRadio>
+            <FluentRadio Value="@(true)">Another device</FluentRadio>
+        </FluentRadioGroup>
+    </p>
+
+    <p>
+        <FluentButton Appearance="Appearance.Accent" OnClick="BeginFlowAsync" Disabled="@HasStarted">Next</FluentButton>
+    </p>
+
+    @if (HasStarted) {
+        @if (IsExternal) {
+            <p>
+                Visit <FluentAnchor Appearance="Appearance.Hypertext" Href='@savedSettings.Settings.RelativeUrl("/auth/link")'>@savedSettings.Settings.RelativeUrl("/auth/link")</FluentAnchor>
+                on another device to sign in, and enter the code below:
+            </p>
+            <p><code>@LoginCode</code></p>
+        } else {
+            <p>
+                Authorize the app in the popup window to login.
+            </p>
+        }
+        <p>
+            <FluentToolbar>
+                <FluentButton Appearance="Appearance.Accent" OnClick="FinishLoginAsync">Done</FluentButton>
+                @if (IsExternal) {
+                    <FluentButton Appearance="Appearance.Neutral" OnClick="BeginFlowAsync">Refresh Code</FluentButton>
+                } else {
+                    <FluentButton Appearance="Appearance.Neutral" OnClick="BeginFlowAsync">Try Again</FluentButton>
+                }
+                <FluentButton Appearance="Appearance.Neutral" OnClick="AbortFlowAsync">Cancel</FluentButton>
+            </FluentToolbar>
+        </p>
+    }
+    <br>
+    <p>
+        <FluentButton IconStart="@(new Microsoft.FluentUI.AspNetCore.Components.Icons.Regular.Size20.Settings())"
+            Appearance="Appearance.Stealth" OnClick="ChangeServerAsync" Disabled="@HasStarted">API Settings</FluentButton>
+    </p>
+</FluentBodyContent>
+
+<FluentOverlay FullScreen="true" Dismissable="false" @bind-Visible=IsBusy Opacity="0.4">
+    <FluentProgressRing />
+</FluentOverlay>
 
-@if (IsReady) {
-    <h2>no way, it works</h2>
-    <FluentButton Appearance="Appearance.Accent" OnClick="GotoHome">Go to Home</FluentButton>
-}
 
 @code {
     public string LoginCode { get; set; } = "";
     public string LoginKey { get; set; } = "";
-    public bool IsReady { get; set; } = false;
+    public bool HasStarted { get; set; } = false;
+    public bool IsExternal { get; set; } = false;
+    public bool IsBusy { get; set; } = false;
 
     protected override async Task OnInitializedAsync() {
-        await RefreshCode();
+        await RefreshCodeAsync();
     }
 
-    public async Task RefreshCode() {
+    async Task RefreshCodeAsync() {
         var req = new PrepareAuthFlowRequest("Blazing Console", "bedcrab.dev", "A web panel to edit your Blazing Games computers", new List<Permission> {
             Permission.READ_COMPUTERS,
             Permission.WRITE_COMPUTERS,
@@ -72,7 +113,25 @@
         LoginKey = res.Key;
     }
 
-    public async Task FinishSignIn() {
+    async Task BeginFlowAsync() {
+        IsBusy = true;
+        HasStarted = false;
+
+        await RefreshCodeAsync();
+        if (!IsExternal) {
+            await JSRuntime.InvokeVoidAsync("open", savedSettings.Settings.RelativeUrl("/auth/link?code=" + LoginCode), "_blank");
+        }
+
+        IsBusy = false;
+        HasStarted = true;
+    }
+
+    void AbortFlowAsync() {
+        HasStarted = false;
+    }
+
+    async Task FinishLoginAsync() {
+        IsBusy = true;
         var req = new RedeemAuthFlowRequest(LoginKey);
         var res = await api.SendHttpRequest<RedeemAuthFlowResponse>("/auth/redeem", HttpMethod.Post, req);
         if (res == null) {
@@ -82,15 +141,14 @@
         bool works = await api.TestAuthorization();
         if (works) {
             await localStorage.SetItemAsync("jwt", res.Token);
-            IsReady = true;
+            Navigation.NavigateTo("/");
+        } else {
+            IsBusy = false;
+            await DialogService.ShowErrorAsync("Failed to sign in. Make sure you've approved the sign-in request.");
         }
     }
 
-    public void GotoHome() {
+    async Task ChangeServerAsync() {
-        Navigation.NavigateTo("/");
-    }
-
-    public async Task ChangeServerAsync() {
         string currentServer = savedSettings.Settings.Clone().ApiURL;
         var changeDialog = await DialogService.ShowDialogAsync<ChangeServerDialog>(currentServer, new DialogParameters());
         var result = await changeDialog.Result;