From f880c77df0fb9cd7dc5cfa6e7a930ea8b03fb4e6 Mon Sep 17 00:00:00 2001
From: Will Norris <will@tailscale.com>
Date: Thu, 16 Nov 2023 17:23:35 -0800
Subject: [PATCH] client/web: split login from nodeUpdate

This creates a new /api/up endpoint which is exposed in the login
client, and is solely focused on logging in. Login has been removed from
the nodeUpdate endpoint.

This also adds support in the LoginClientView for a stopped node that
just needs to reconnect, but not necessarily reauthenticate.  This
follows the same pattern in `tailscale up` of just setting the
WantRunning user pref.

Updates tailscale/corp#14335

Signed-off-by: Will Norris <will@tailscale.com>
---
 client/web/src/components/app.tsx             |  11 +-
 .../{login-client-view.tsx => login-view.tsx} |  54 ++++++--
 client/web/src/hooks/node-data.ts             |   6 -
 client/web/web.go                             | 121 ++++++++++--------
 4 files changed, 116 insertions(+), 76 deletions(-)
 rename client/web/src/components/views/{login-client-view.tsx => login-view.tsx} (53%)

diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx
index b90f993b7..03fe4cd95 100644
--- a/client/web/src/components/app.tsx
+++ b/client/web/src/components/app.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from "react"
 import LoginToggle from "src/components/login-toggle"
 import DeviceDetailsView from "src/components/views/device-details-view"
 import HomeView from "src/components/views/home-view"
-import LoginClientView from "src/components/views/login-client-view"
+import LoginView from "src/components/views/login-view"
 import SSHView from "src/components/views/ssh-view"
 import { UpdatingView } from "src/components/views/updating-view"
 import useAuth, { AuthResponse } from "src/hooks/auth"
@@ -39,12 +39,11 @@ function WebClient({
 
   return !data ? (
     <div className="text-center py-14">Loading...</div>
-  ) : data.Status === "NeedsLogin" || data.Status === "NoState" ? (
+  ) : data.Status === "NeedsLogin" ||
+    data.Status === "NoState" ||
+    data.Status === "Stopped" ? (
     // Client not on a tailnet, render login.
-    <LoginClientView
-      data={data}
-      onLoginClick={() => updateNode({ Reauthenticate: true })}
-    />
+    <LoginView data={data} refreshData={refreshData} />
   ) : (
     // Otherwise render the new web client.
     <>
diff --git a/client/web/src/components/views/login-client-view.tsx b/client/web/src/components/views/login-view.tsx
similarity index 53%
rename from client/web/src/components/views/login-client-view.tsx
rename to client/web/src/components/views/login-view.tsx
index 9133a6715..62a188691 100644
--- a/client/web/src/components/views/login-client-view.tsx
+++ b/client/web/src/components/views/login-view.tsx
@@ -1,22 +1,45 @@
-import React from "react"
+import React, { useCallback } from "react"
+import { apiFetch } from "src/api"
 import { NodeData } from "src/hooks/node-data"
 import { ReactComponent as TailscaleIcon } from "src/icons/tailscale-icon.svg"
 
 /**
- * LoginClientView is rendered when the client is not authenticated
+ * LoginView is rendered when the client is not authenticated
  * to a tailnet.
  */
-export default function LoginClientView({
+export default function LoginView({
   data,
-  onLoginClick,
+  refreshData,
 }: {
   data: NodeData
-  onLoginClick: () => void
+  refreshData: () => void
 }) {
+  const login = useCallback(
+    (opt: TailscaleUpOptions) => {
+      tailscaleUp(opt).then(refreshData)
+    },
+    [refreshData]
+  )
+
   return (
     <div className="mb-8 py-6 px-8 bg-white rounded-md shadow-2xl">
       <TailscaleIcon className="my-2 mb-8" />
-      {data.IP ? (
+      {data.Status == "Stopped" ? (
+        <>
+          <div className="mb-6">
+            <h3 className="text-3xl font-semibold mb-3">Connect</h3>
+            <p className="text-gray-700">
+              Your device is disconnected from Tailscale.
+            </p>
+          </div>
+          <button
+            onClick={() => login({})}
+            className="button button-blue w-full mb-4"
+          >
+            Connect to Tailscale
+          </button>
+        </>
+      ) : data.IP ? (
         <>
           <div className="mb-6">
             <p className="text-gray-700">
@@ -33,7 +56,7 @@ export default function LoginClientView({
             </p>
           </div>
           <button
-            onClick={onLoginClick}
+            onClick={() => login({ Reauthenticate: true })}
             className="button button-blue w-full mb-4"
           >
             Reauthenticate
@@ -53,7 +76,7 @@ export default function LoginClientView({
             </p>
           </div>
           <button
-            onClick={onLoginClick}
+            onClick={() => login({ Reauthenticate: true })}
             className="button button-blue w-full mb-4"
           >
             Log In
@@ -63,3 +86,18 @@ export default function LoginClientView({
     </div>
   )
 }
+
+type TailscaleUpOptions = {
+  Reauthenticate?: boolean // force reauthentication
+}
+
+function tailscaleUp(options: TailscaleUpOptions) {
+  return apiFetch("/up", "POST", options)
+    .then((r) => r.json())
+    .then((d) => {
+      d.url && window.open(d.url, "_blank")
+    })
+    .catch((e) => {
+      console.error("Failed to login:", e)
+    })
+}
diff --git a/client/web/src/hooks/node-data.ts b/client/web/src/hooks/node-data.ts
index 991ccba60..20257e1a3 100644
--- a/client/web/src/hooks/node-data.ts
+++ b/client/web/src/hooks/node-data.ts
@@ -47,8 +47,6 @@ export type UserProfile = {
 export type NodeUpdate = {
   AdvertiseRoutes?: string
   AdvertiseExitNode?: boolean
-  Reauthenticate?: boolean
-  ForceLogout?: boolean
 }
 
 export type PrefsUpdate = {
@@ -107,10 +105,6 @@ export default function useNodeData() {
           if (err) {
             throw new Error(err)
           }
-          const url = r["url"]
-          if (url) {
-            window.open(url, "_blank")
-          }
           refreshData()
         })
         .catch((err) => {
diff --git a/client/web/web.go b/client/web/web.go
index 9457a564b..2819f8f11 100644
--- a/client/web/web.go
+++ b/client/web/web.go
@@ -371,22 +371,14 @@ func (s *Server) authorizeRequest(w http.ResponseWriter, r *http.Request) (ok bo
 // which protects the handler using gorilla csrf.
 func (s *Server) serveLoginAPI(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("X-CSRF-Token", csrf.Token(r))
-	if r.URL.Path != "/api/data" { // only endpoint allowed for login client
-		http.Error(w, "invalid endpoint", http.StatusNotFound)
-		return
-	}
-	switch r.Method {
-	case httpm.GET:
-		// TODO(soniaappasamy): we may want a minimal node data response here
+	switch {
+	case r.URL.Path == "/api/data" && r.Method == httpm.GET:
 		s.serveGetNodeData(w, r)
-		return
-	case httpm.POST:
-		// TODO(will): refactor to expose only a dedicated login method
-		s.servePostNodeUpdate(w, r)
-		return
+	case r.URL.Path == "/api/up" && r.Method == httpm.POST:
+		s.serveTailscaleUp(w, r)
+	default:
+		http.Error(w, "invalid endpoint or method", http.StatusNotFound)
 	}
-	http.Error(w, "invalid endpoint", http.StatusNotFound)
-	return
 }
 
 type authType string
@@ -648,19 +640,11 @@ func (s *Server) serveGetNodeData(w http.ResponseWriter, r *http.Request) {
 type nodeUpdate struct {
 	AdvertiseRoutes   string
 	AdvertiseExitNode bool
-	Reauthenticate    bool
-	ForceLogout       bool
 }
 
 func (s *Server) servePostNodeUpdate(w http.ResponseWriter, r *http.Request) {
 	defer r.Body.Close()
 
-	st, err := s.lc.Status(r.Context())
-	if err != nil {
-		http.Error(w, err.Error(), http.StatusInternalServerError)
-		return
-	}
-
 	var postData nodeUpdate
 	type mi map[string]any
 	if err := json.NewDecoder(r.Body).Decode(&postData); err != nil {
@@ -706,46 +690,30 @@ func (s *Server) servePostNodeUpdate(w http.ResponseWriter, r *http.Request) {
 	}
 
 	w.Header().Set("Content-Type", "application/json")
-	var reauth, logout bool
-	if postData.Reauthenticate {
-		reauth = true
-	}
-	if postData.ForceLogout {
-		logout = true
-	}
-	s.logf("tailscaleUp(reauth=%v, logout=%v) ...", reauth, logout)
-	url, err := s.tailscaleUp(r.Context(), st, postData)
-	s.logf("tailscaleUp = (URL %v, %v)", url != "", err)
-	if err != nil {
-		w.WriteHeader(http.StatusInternalServerError)
-		json.NewEncoder(w).Encode(mi{"error": err.Error()})
-		return
-	}
-	if url != "" {
-		json.NewEncoder(w).Encode(mi{"url": url})
-	} else {
-		io.WriteString(w, "{}")
-	}
+	io.WriteString(w, "{}")
 }
 
-func (s *Server) tailscaleUp(ctx context.Context, st *ipnstate.Status, postData nodeUpdate) (authURL string, retErr error) {
-	if postData.ForceLogout {
-		if err := s.lc.Logout(ctx); err != nil {
-			return "", fmt.Errorf("Logout error: %w", err)
-		}
-		return "", nil
-	}
-
+// tailscaleUp starts the daemon with the provided options.
+// If reauthentication has been requested, an authURL is returned to complete device registration.
+func (s *Server) tailscaleUp(ctx context.Context, st *ipnstate.Status, opt tailscaleUpOptions) (authURL string, retErr error) {
 	origAuthURL := st.AuthURL
 	isRunning := st.BackendState == ipn.Running.String()
 
-	forceReauth := postData.Reauthenticate
-	if !forceReauth {
-		if origAuthURL != "" {
+	if !opt.Reauthenticate {
+		switch {
+		case origAuthURL != "":
 			return origAuthURL, nil
-		}
-		if isRunning {
+		case isRunning:
 			return "", nil
+		case st.BackendState == ipn.Stopped.String():
+			// stopped and not reauthenticating, so just start running
+			_, err := s.lc.EditPrefs(ctx, &ipn.MaskedPrefs{
+				Prefs: ipn.Prefs{
+					WantRunning: true,
+				},
+				WantRunningSet: true,
+			})
+			return "", err
 		}
 	}
 
@@ -767,7 +735,7 @@ func (s *Server) tailscaleUp(ctx context.Context, st *ipnstate.Status, postData
 		if !isRunning {
 			s.lc.Start(ctx, ipn.Options{})
 		}
-		if forceReauth {
+		if opt.Reauthenticate {
 			s.lc.StartLoginInteractive(ctx)
 		}
 	}()
@@ -787,6 +755,47 @@ func (s *Server) tailscaleUp(ctx context.Context, st *ipnstate.Status, postData
 	}
 }
 
+type tailscaleUpOptions struct {
+	// If true, force reauthentication of the client.
+	// Otherwise simply reconnect, the same as running `tailscale up`.
+	Reauthenticate bool
+}
+
+// serveTailscaleUp serves requests to /api/up.
+// If the user needs to authenticate, an authURL is provided in the response.
+func (s *Server) serveTailscaleUp(w http.ResponseWriter, r *http.Request) {
+	defer r.Body.Close()
+
+	st, err := s.lc.Status(r.Context())
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	var opt tailscaleUpOptions
+	type mi map[string]any
+	if err := json.NewDecoder(r.Body).Decode(&opt); err != nil {
+		w.WriteHeader(400)
+		json.NewEncoder(w).Encode(mi{"error": err.Error()})
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	s.logf("tailscaleUp(reauth=%v) ...", opt.Reauthenticate)
+	url, err := s.tailscaleUp(r.Context(), st, opt)
+	s.logf("tailscaleUp = (URL %v, %v)", url != "", err)
+	if err != nil {
+		w.WriteHeader(http.StatusInternalServerError)
+		json.NewEncoder(w).Encode(mi{"error": err.Error()})
+		return
+	}
+	if url != "" {
+		json.NewEncoder(w).Encode(mi{"url": url})
+	} else {
+		io.WriteString(w, "{}")
+	}
+}
+
 // proxyRequestToLocalAPI proxies the web API request to the localapi.
 //
 // The web API request path is expected to exactly match a localapi path,