🔧 Update code style and docs

docs/content/advanced/config/optional-config.md

@@ -11,6 +11,28 @@ You can set these environment variables to configure the container. They are not
 | `INSECURE`     | `false`   | `true`      | If access over http is allowed     |
 | `DISABLE_IPV6` | `false`   | `true`      | If IPv6 support should be disabled |
 
+## Google OAuth
+
+You can enable Google OAuth login alongside classic username/password authentication. When enabled, a "Sign in with Google" button appears on the login page.
+
+| Env                           | Default | Example                                      | Description                                      |
+| ----------------------------- | ------- | -------------------------------------------- | ------------------------------------------------ |
+| `OAUTH_GOOGLE_ENABLED`        | `false` | `true`                                       | Enable Google OAuth login                        |
+| `OAUTH_GOOGLE_CLIENT_ID`      | -       | `123.apps.googleusercontent.com`             | Google OAuth 2.0 Client ID                       |
+| `OAUTH_GOOGLE_CLIENT_SECRET`  | -       | `GOCSPX-xxx`                                 | Google OAuth 2.0 Client Secret                   |
+| `OAUTH_GOOGLE_ALLOWED_DOMAIN` | -       | `example.com`                                | Restrict login to a specific email domain        |
+
+/// note | Google Cloud Console Setup
+
+1. Go to [Google Cloud Console](https://console.cloud.google.com/apis/credentials)
+2. Create an OAuth 2.0 Client ID (Web application)
+3. Add Authorized redirect URI: `https://<your-domain>/api/auth/google/callback`
+4. Copy the Client ID and Client Secret to the environment variables
+
+If a user logs in with Google and their email matches an existing account, the accounts are automatically linked.
+
+///
+
 /// note | IPv6 Caveats
 
 Disabling IPv6 will disable the creation of the default IPv6 firewall rules and won't add a IPv6 address to the interface and clients.

src/app/pages/login.vue

@@ -40,10 +40,7 @@
       </a>
 
       <!-- Divider -->
-      <div
-        v-if="authMethods?.google"
-        class="flex items-center gap-2"
-      >
+      <div v-if="authMethods?.google" class="flex items-center gap-2">
         <div class="h-px flex-1 bg-gray-300 dark:bg-neutral-600"></div>
         <span class="text-xs text-gray-500 dark:text-neutral-400">{{
           $t('login.or')