Skip to content

lelemm/confirm

Repository files navigation

What is this?

Basically this is just an app that takes confirmation from user before calling a link

Motivation?

I have some webhooks from N8N that are sent to Gotify notification, so I can take actions. Sometimes I misclick the link and the workflow is executed. I created this so I must confirm that I want to run that webhook

Examples

Working Example

Working example

Changing from dark/light mode

Changing from dark/light mode

Custom theme selected

Custom theme selected

Adaptative layout based on screen/window size

Vertical/Mobile

Vertical

Horizontal/Desktop

Horizontal

Configurable

Configurable

config.yml

Installation

Use docker-compose.yml.

Or use the docker-compose.yml from docker hub registry.

config.yml and views/ are not part of the docker image, so you should create a volume in the docker-compose.yml like in the example.

Usage

In the config.yml, you have a dictionary of pages, the key is the alias from your URL, example the key "google" will create the link http://yourhost/google that will call the link at the key of this dictionary. There is an example at the config.yml from this project. Example here

Or if you want, you can create a file named "pages.yml" with the same struct as at config.yml:

pages:
  page1: https://abc.com
  page2: https://abc2.com
  (...)

Modes

You can choose between 3 modes: auth, redirect, servercall.

(...)
config:
  (...)
  callmode: servercall or browser
(...)

Auth Mode (config.mode=auth)

This mode must be used with nginx reverse proxy. proxy example:

        location /location_that_needs_confirmation/ {
            proxy_pass http://url/location_that_needs_confirmation/;
            auth_request /confirm/start;
            error_page 401 = /confirm/;
            auth_request_set $auth_status $upstream_status;
        }

        location /confirm/ {
            proxy_pass              http://LocationOfConfirmApp/;
            proxy_pass_request_body off;
            proxy_set_header        Content-Length "";
            proxy_set_header        X-Original-URI $request_uri; #Must have this header
        }

If you change the location of "confirm" (location /confirm/ above) to something else, you must change the config.yml too:

(...)
config:
  (...)
  mode: redirect #simple redirect to page, must use 'pages' from this yaml.
  proxy_prefix: '/confirm/'
(...)  

Redirect Mode (config.mode=redirect)

Simple redirect based on the pages section of the config.yml

pages:
  google: http://www.google.com.br
(...)

Call Mode

This affects which tier calls the URL to be confirmed.

(...)
config:
  (...)
  mode: redirect #simple redirect to page, must use 'pages' from this yaml.
  callmode: servercall or browser
(...)


## Servercall (_config.callmode=servercall_)
Instead of calling the url from the browser, it called from the server side. It checks based on regex the content to see if was OK.
These variables must be included when using callmode=servercall:
```yml
(...)
servercall:
  regex: \"Workflow was started\"
  success_redirect: "about:blank"
  error_redirect: "https://yahoo.com"
  method: "GET"

Browser (config.callmode=browser)

As the name says, the url is called from the client-side using the browser.

Layouts

You don't need to use the same layouts that I created. You can create a folder at /view/name_of_layout, you can find some examples here: /views

  • Default: The one I'm using for my porpuses
  • Single-click: Hide the NO button
  • Wait: Custom layout telling the user that 'they are leaving this website'

To change the layout, change this part of the config.yml: config-wait.yml

You have to create four files per layout:

  • lightingmode.mustache: This is used to show the dark/light mode button
  • message-container.mustache: Container of the message to show the user where they are going to
  • no.mustache: No button
  • yes.mustache: Yes button

All layouts must respect Mustache syntax.