Allow prefilling of any fields of the login form using GET params (#181)

* Allow prefilling of any fields of the login form using GET params

* update readme

README.md

@@ -100,6 +100,8 @@ The following changes are already implemented:
 * 🔰 [Add "Assign Admin" button to the rooms](https://github.com/etkecc/synapse-admin/pull/156)
 * 🖼️ [Add rooms' avatars](https://github.com/etkecc/synapse-admin/pull/158)
 * 🤖 [User Badges](https://github.com/etkecc/synapse-admin/pull/160)
+* 🔑 [Allow prefilling any fields on the login form via GET params](https://github.com/etkecc/synapse-admin/pull/181)
+
 
 _the list will be updated as new changes are added_
 
@@ -111,7 +113,8 @@ _the list will be updated as new changes are added_
 This command initializes the development environment (local Synapse server and Postgres DB),
 and launches the app in a dev mode at `http://localhost:5173`
 
-After that open `http://localhost:5173` in your browser, login using the following credentials:
+After that open [http://localhost:5173](http://localhost:5173?username=admin&password=admin&server=http://localhost:8008] in your browser,
+login using the following credentials:
 
 * Login: admin
 * Password: admin
@@ -148,13 +151,9 @@ services:
 
 ### Prefilling login form
 
-You can prefill `username` and `homeserver` fields on the login page using GET parameters, example:
+You can prefill all fields on the login page using GET parameters.
 
-```
-https://matrix.example.com/synapse-admin/?username=admin&server=matrix.example.com
-```
-
-That way `username` and `homeserver` fields will be pre-filled with `admin` and `https://matrix.example.com` respectively.
+[Documentation](./docs/prefill-login-form.md)
 
 
 ### Restricting available homeserver

docs/README.md

@@ -24,6 +24,7 @@ Specific configuration options:
 ## Features
 
 * [User Badges](./user-badges.md)
+* [Prefilling the Login Form](./prefill-login-form.md)
 
 ## Deployment
 

docs/prefill-login-form.md

@@ -0,0 +1,48 @@
+# Prefilling the Login Form
+
+In some cases you may wish to prefill/preset the login form fields when sharing a link to a Synapse Admin instance.
+This can be done by adding the following query parameters to the URL:
+
+* `username` - The username to prefill in the username field.
+* `server` - The server to prefill in the homeserver url field.
+
+The following query params will work only if the Synapse Admin is loaded from `localhost` or `127.0.0.1`:
+
+* `password` - The password to prefill in the password field (credentials auth). **NEVER** use this in production.
+* `accessToken` - The access token to prefill in the access token field (access token auth). **NEVER** use this in production.
+
+> **WARNING**: Never use the `password` or `accessToken` query parameters in production as they can be easily extracted
+from the URL. These are only meant for development purposes and local environments.
+
+
+## Examples
+
+### Production
+
+```bash
+https://admin.etke.cc?username=admin&server=https://matrix.example.com
+```
+
+This will open `Credentials` (username/password) login form with the username field prefilled with `admin` and the
+Homeserver URL field prefilled with `https://matrix.example.com`.
+
+### Development and Local environments
+
+**With Password**
+
+```bash
+http://localhost:8080?username=admin&server=https://matrix.example.com&password=secret
+```
+
+This will open `Credentials` (username/password) login form with the username field prefilled with `admin`, the
+Homeserver URL field prefilled with `https://matrix.example.com` and the password field prefilled with `secret`.
+
+
+**With Access Token**
+
+```bash
+http://localhost:8080?server=https://matrix.example.com&accessToken=secret
+```
+
+This will open `Access Token` login form with the Homeserver URL field prefilled with `https://matrix.example.com` and
+the access token field prefilled with `secret`.

src/pages/LoginPage.tsx

@@ -171,11 +171,24 @@ const LoginPage = () => {
 
     useEffect(() => {
       const params = new URLSearchParams(window.location.search);
+      const hostname = window.location.hostname;
       const username = params.get("username");
+      const password = params.get("password");
+      const accessToken = params.get("accessToken");
       let serverURL = params.get("server");
       if (username) {
         form.setValue("username", username);
       }
+
+      if (hostname === "localhost" || hostname === "127.0.0.1") {
+        if (password) {
+          form.setValue("password", password);
+        }
+        if (accessToken) {
+          setLoginMethod("accessToken");
+          form.setValue("accessToken", accessToken);
+        }
+      }
       if (serverURL) {
         const isFullUrl = serverURL.match(/^(http|https):\/\//);
         if (!isFullUrl) {