feat: tailscale oauth

site/src/pages/login-page.tsx

@@ -19,6 +19,7 @@ import { Layout } from "../components/layouts/layout";
 import { GoogleIcon } from "../icons/google";
 import { GithubIcon } from "../icons/github";
 import { OAuthIcon } from "../icons/oauth";
+import { TailscaleIcon } from "../icons/tailscale";
 
 export const LoginPage = () => {
   const queryString = window.location.search;
@@ -146,6 +147,21 @@ export const LoginPage = () => {
                   </Button>
                 </Grid.Col>
               )}
+              {oauthProviders.includes("tailscale") && (
+                <Grid.Col span="content">
+                  <Button
+                    radius="xl"
+                    leftSection={
+                      <TailscaleIcon style={{ width: 14, height: 14 }} />
+                    }
+                    variant="default"
+                    onClick={() => loginOAuthMutation.mutate("tailscale")}
+                    loading={loginOAuthMutation.isLoading}
+                  >
+                    Tailscale
+                  </Button>
+                </Grid.Col>
+              )}
               {oauthProviders.includes("generic") && (
                 <Grid.Col span="content">
                   <Button

site/src/pages/logout-page.tsx

@@ -45,8 +45,8 @@ export const LogoutPage = () => {
         </Text>
         <Text>
           You are currently logged in as <Code>{username}</Code>
-          {oauth && ` using ${capitalize(provider)}`}. Click the button below to
-          log out.
+          {oauth && ` using ${capitalize(provider)} OAuth`}. Click the button
+          below to log out.
         </Text>
         <Button
           fullWidth