# Web Registration Form (Local Development Set up)
Below is a guide on how to run the web registration form locally for development. (Note: only tested on Macbook so far)

Date written: Friday 4th April 2025

### **Pataka Config:**

**`mixpanelId`** *(string, optional)* – Mixpanel analytics tracking ID (if applicable).

**`port`** *(integer, required) -* TODO

**`pataka`** 

- **`host`** *(string, required)* – Hostname for the Pataka service (default: `localhost`).
- **`log`** *(boolean, required)* – Enable or disable logging.
- **`webRegistration`** *(object, optional)* – Settings for web-based registration:
    - **`port`** *(integer, required)* – Port number for the web registration form.
    - **`https`** *(object, required)* – SSL configuration for secure connections:
        - **`fullchain`** *(string, required)* – SSL certificate chain.
        - **`privkey`** *(string, required)* – Private key for the SSL certificate.
- **`httpsProxyPort`** *(integer, required)* – Port for HTTPS proxy connections.
- **`tribes`** *(array of strings, optional)* – Array of tribeIds to only display web forms for specified tribes. Leaving this empty will show a web form for all tribes.
- **`allowedOrigins`** *(array of strings, required)* – List of allowed CORS origins for web access.

**`graphql`** 

- **`port`** *(integer, required)* – Port number for the GraphQL API.

---

### Run the form locally from `ssb-pataka` for development:

1. Clone down the `ssb-pataka` repo
    
    ```bash
    git clone https://gitlab.com/ahau/lib/ssb-plugins/ssb-pataka.git
    cd ssb-pataka
    ```
    
2. Install dependencies
    
    ```bash
    npm install
    ```
    
3. Start the UI from `ssb-pataka/ui/`
    
    ```bash
    npm run dev
    ```
    
    It should print out something similar to this, and you will need to add the `Local` and `Network` addresses to the `allowedOrigins` config in the next steps.
    
    ```bash
      App running at:
      - Local:   http://localhost:8087
      - Network: http://192.168.68.60:8087
    
      Note that the development build is not optimized.
      To create a production build, run npm run build.
    ```
    
4. Start the Pataka without the web registration form from  `ssb-pataka/test/web-reg/` directory, run:
    
    ```bash
    NODE_ENV=development node test-bot.js
    
    # OR if you wish to start up a pataka with a custom name
    APP_NAME=webform-pataka NODE_ENV=development node test-bot.js
    ```
    
5. Locate and open the config file located at the directory the `path` from the previous step is pointing to
    
    ```bash
       ╭────────────────────────────────────────────────────────────────────╮
       │                                                                    │
       │   AHAU  DEVELOPMENT                                                │
       │                                                                    │
       │   feedId  @HnmXnYBwvcXq5TKT2YVug5h4Aybsr+pdXIv71bT4sYU=.ed25519    │
       │   path    /Users/test/Library/Application Support/webform-pataka   │
       │   network                                                          │
       │     ├── host  192.168.68.60                                        │
       │     ├── port  8068                                                 │
       │     └── api   http://localhost:18068/graphql                       │
       │                                                                    │
       │                                                                    │
       ╰───────────────────────────────────────────────────────────────────
    ```
    
6. Set up the configuration to enable the web registration form, here is an example config:
    
    ```bash
    {
      "mixpanelId": "pynDK9gKdZPhmCoGeJjL6nk8YEF0oGVJltPvEYm8r5E=",
      "port": 8088,
      "pataka": {
        "host": "localhost",
        "log": false,
        "webRegistration": {
          "port": 8000,
          "https": {
            "fullchain": "-----BEGIN CERTIFICATE-----\nMv3oG39ddd+5k8WJUEEO0M...\n-----END CERTIFICATE-----\n",
            "privkey": "-----BEGIN PRIVATE KEY-----\nBAQEFAASCBKcwggSjAgEAAMI...\n-----END PRIVATE KEY-----\n"
          },
          "httpsProxyPort": 7001,
          "tribes": ["%UMKj7ThcrItBhnZfg1ReOHjBKISAXx8s3hGw4zutb94=.cloaked"]
        },
        "allowedOrigins": [
          "http://localhost:8000",
          "http://localhost:8087"
        ]
      },
      "graphql": {
        "port": 18068
      }
    }
    ```
    
    - Replace `mixpanelId` with the one in your config file
    - Replace `webRegistration.https` with your own keys by generating new https keys (Note: this step is currently required, as the form is not set up to work without it)
        
        ```bash
        openssl req -x509 -newkey rsa:4096 -keyout privkey.pem -out fullchain.pem -days 365 -nodes
        ```
        
        This will give you `fullchain.pem` and `privkey.pem` which you can print using the following commands to copy and paste into the config:
        
        ```bash
        echo -n "$(cat fullchain.pem | tr -d '\n')"
        ```
        
        ```bash
        echo -n "$(cat privkey.pem | tr -d '\n')"
        ```
        
    - Replace `pataka.allowedOrigins` with the addresses at which your pataka UI and web registration form are running at:
        - For the pataka UI, add the `Local` and `Network` addresses from **step 3** (In this example its `http://localhost:8087` and `http://192.168.68.60:8087` )
        - For the web form, add the address for the `port` you set in `pataka.webRegistration.port` (In this example its `8000` so i will include `http://localhost:8000` and `http://192.168.68.60:8000`)
    - Replace the tribeIds in `pataka.webRegistration.tribes` with the groupId of the tribes you would like to display a form for.
7. Save the changes to the config file
8. Run **step 3** and **step 4** again to restart the pataka and UI, and your web registration form should be running at the address http://localhost:8087

---

### Troubleshooting

- If the pataka fails to start:
  - If it throws a JSON error, it means the config is not in proper JSON format. Check the config and try running again.
- If the pataka console displays an error `Error: CORS issue` it means you didn’t configure the allowedOrigins correctly. See **step 5**
- If you go to [http://localhost:8087](http://localhost:8087/) and it displays a blank page, but no errors in the developer tools console in the browser, it could mean a few things:
    - Either you havent configured the tribes correctly
    - Or there are no tribes to display
- The commands in this guide were run from a macbook, and may not work on other platforms.

---