Feature - Add Dex Auth Template

.eslintignore

@@ -0,0 +1,2 @@
+# Disable lint for Login HTML templates
+src/pages/Login/templates/*.html

.github/workflows/ci.yml

@@ -108,3 +108,16 @@ jobs:
     - name: Image digest
       if: ${{ always() }}
       run: echo ${{ steps.docker_build.outputs.digest }}
+
+    - name: Build dex docker image
+      if: ${{ always() }}
+      id: dex_docker_build
+      uses: docker/build-push-action@v2
+      with:
+        push: true
+        tags: docker.io/platiagro/dex-auth:${{ steps.vars.outputs.TAG }}
+        context: src/pages/Login
+        file: src/pages/Login/Dockerfile
+        build-args: |
+          COMMIT=${{ steps.vars.outputs.COMMIT }}
+          BRANCH=${{ steps.vars.outputs.BRANCH }}

package.json

@@ -10,7 +10,9 @@
     "test:ci": "react-scripts test --coverageReporters=lcov --testResultsProcessor jest-sonar-reporter --passWithNoTests --debug --coverage --no-cache --watchAll=false",
     "eject": "react-scripts eject",
     "styleguide": "styleguidist server",
-    "styleguide:build": "styleguidist build"
+    "styleguide:build": "styleguidist build",
+    "dex:build": "docker build src/pages/Login -t dex-auth-local",
+    "dex:run": "docker run -it -p 5556:5556 dex-auth-local:latest"
   },
   "browserslist": {
     "production": [
@@ -71,4 +73,4 @@
     "react-styleguidist": "^11.1.4",
     "redux-mock-store": "^1.5.4"
   }
-}
+}

src/pages/Login/Dockerfile

@@ -0,0 +1,10 @@
+FROM ghcr.io/dexidp/dex:v2.30.0
+
+ENV DEX_FRONTEND_DIR=/srv/dex/web
+
+COPY --chown=root:root configs/config.docker.yaml /etc/dex/config.docker.yaml
+
+COPY --chown=root:root templates /srv/dex/web/templates
+
+COPY --chown=root:root themes /srv/dex/web/themes
+

src/pages/Login/README.md

@@ -4,7 +4,35 @@ PlatIAgro login is powered by [Dex OIDC](https://dexidp.io/) which is an OpenID
 
 Dex has its own frontend, but supports using your own templates and passing arbitrary data to them to help customize your installation.
 
-You can find PlatIAgro templates at repo [platiagro/manifests](https://github.com/platiagro/manifests/tree/v0.3.0-kubeflow-v1.3-branch/platiagro-auth/web), path: `platiagro-auth/web/`.
+You can find the login template files at [/templates](/templates) and the CSS styles at [/themes](/themes).
 
-To test your templates, update the contents of volumeMount `/web-platiagro` in pod `kubectl -n auth get pod -l app=dex`, then recreate the pod.
+The file [configs/config.docker.yaml](configs/config.docker.yaml) is only used **ONLY IN DEVELOPMENT** to run dex locally.
 
+To test the dex auth templates run the following commands in a terminal tab:
+
+```shell
+# Build the dex docker image
+docker build src/pages/Login -t dex-auth-local
+
+# Create the docker container
+docker run -it -p 5556:5556 dex-auth-local:latest
+```
+
+OR
+
+```shell
+# Build the dex docker image
+yarn dex:build
+
+# Create the docker container
+yarn dex:run
+```
+
+And then access [http://localhost:5556/dex/auth](http://localhost:5556/dex/auth) in your favorite browser.
+
+---
+
+## :warning: Warning
+
+- The templates are cached by the browsers. When testing make sure to use `CTRL + F5` to force the browser to get all the files again each time you make a change.
+- If you remove the templates from this repo, make sure to also remove the eslint ignore rule from **.eslintignore** file in the root directory.

src/pages/Login/configs/config.docker.yaml

@@ -0,0 +1,50 @@
+issuer: {{ getenv "DEX_ISSUER" "http://127.0.0.1:5556/dex" }}
+
+storage:
+  type: sqlite3
+  config:
+    file: {{ getenv "DEX_STORAGE_SQLITE3_CONFIG_FILE" "/var/dex/dex.db" }}
+
+frontend:
+  issuer: PlatIAgro - Plataforma de Inteligência Artificial para o Agronegócio
+  theme: platiagro
+
+web:
+{{- if getenv "DEX_WEB_HTTPS" "" }}
+  https: {{ .Env.DEX_WEB_HTTPS }}
+  tlsKey: {{ getenv "DEX_WEB_TLS_KEY" | required "$DEX_WEB_TLS_KEY in case of web.https is enabled" }}
+  tlsCert: {{ getenv "DEX_WEB_TLS_CERT" | required "$DEX_WEB_TLS_CERT in case of web.https is enabled" }}
+{{- end }}
+  http: {{ getenv "DEX_WEB_HTTP" "0.0.0.0:5556" }}
+
+{{- if getenv "DEX_TELEMETRY_HTTP" }}
+telemetry:
+  http: {{ .Env.DEX_TELEMETRY_HTTP }}
+{{- end }}
+
+expiry:
+  deviceRequests: {{ getenv "DEX_EXPIRY_DEVICE_REQUESTS" "5m" }}
+  signingKeys: {{ getenv "DEX_EXPIRY_SIGNING_KEYS" "6h" }}
+  idTokens: {{ getenv "DEX_EXPIRY_ID_TOKENS" "24h" }}
+  authRequests: {{ getenv "DEX_EXPIRY_AUTH_REQUESTS" "24h" }}
+
+logger:
+  level: {{ getenv "DEX_LOG_LEVEL" "info" }}
+  format: {{ getenv "DEX_LOG_FORMAT" "text" }}
+
+oauth2:
+  responseTypes: {{ getenv "DEX_OAUTH2_RESPONSE_TYPES" "[code]" }}
+  skipApprovalScreen: {{ getenv "DEX_OAUTH2_SKIP_APPROVAL_SCREEN" "false" }}
+  alwaysShowLoginScreen: {{ getenv "DEX_OAUTH2_ALWAYS_SHOW_LOGIN_SCREEN" "false" }}
+{{- if getenv "DEX_OAUTH2_PASSWORD_CONNECTOR" "" }}
+  passwordConnector: {{ .Env.DEX_OAUTH2_PASSWORD_CONNECTOR }}
+{{- end }}
+
+enablePasswordDB: {{ getenv "DEX_ENABLE_PASSWORD_DB" "true" }}
+
+connectors:
+{{- if getenv "DEX_CONNECTORS_ENABLE_MOCK" }}
+- type: mockCallback
+  id: mock
+  name: Example
+{{- end }}

src/pages/Login/templates/approval.html

@@ -0,0 +1,39 @@
+{{ template "header.html" . }}
+
+<div class="theme-panel">
+  <h2 class="theme-heading">Grant Access</h2>
+
+  <hr class="dex-separator" />
+  <div>
+    <div class="dex-subtle-text">{{ .Client }} would like to:</div>
+    <ul class="dex-list">
+      {{ range $scope := .Scopes }}
+      <li>{{ $scope }}</li>
+      {{ end }}
+    </ul>
+  </div>
+  <hr class="dex-separator" />
+
+  <div>
+    <div class="theme-form-row">
+      <form method="post">
+        <input type="hidden" name="req" value="{{ .AuthReqID }}" />
+        <input type="hidden" name="approval" value="approve" />
+        <button type="submit" class="dex-btn theme-btn--success">
+          <span class="dex-btn-text">Grant Access</span>
+        </button>
+      </form>
+    </div>
+    <div class="theme-form-row">
+      <form method="post">
+        <input type="hidden" name="req" value="{{ .AuthReqID }}" />
+        <input type="hidden" name="approval" value="rejected" />
+        <button type="submit" class="dex-btn theme-btn-provider">
+          <span class="dex-btn-text">Cancel</span>
+        </button>
+      </form>
+    </div>
+  </div>
+</div>
+
+{{ template "footer.html" . }}

src/pages/Login/templates/error.html

@@ -0,0 +1,28 @@
+{{ template "header.html" . }}
+
+<div class="theme-panel">
+  <div class="theme-panel-error">
+    <h2 class="theme-heading">{{ .ErrType }}</h2>
+    <div>{{ .ErrMsg }}</div>
+
+    <button
+      id="back"
+      class="dex-btn theme-btn--primary theme-panel-error-button"
+    >
+      Back to Login
+    </button>
+  </div>
+</div>
+
+<script>
+  function redirectToOrigin() {
+    window.location.assign(window.location.origin);
+  }
+
+  var hasAuthCookie = document.cookie.includes('authservice_session');
+  if (hasAuthCookie) redirectToOrigin();
+
+  document.getElementById('back').addEventListener('click', redirectToOrigin);
+</script>
+
+{{ template "footer.html" . }}

src/pages/Login/templates/footer.html

@@ -0,0 +1,3 @@
+    </div>
+  </body>
+</html>

src/pages/Login/templates/header.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>{{ issuer }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="{{ url .ReqPath "static/main.css" }}" rel="stylesheet">
+    <link href="{{ url .ReqPath "theme/styles.css" }}" rel="stylesheet">
+    <link rel="icon" href="{{ url .ReqPath "theme/favicon.ico" }}">
+  </head>
+
+  <body class="theme-body">
+    <div class="theme-navbar">
+      <div class="theme-navbar__logo-wrap">
+        <img 
+          class="theme-navbar__logo" 
+          src="{{ url .ReqPath logo }}" 
+          alt="Platiagro Logo"
+        >
+      </div>
+    </div>
+
+    <div class="dex-container theme-content">
+

src/pages/Login/templates/login.html

@@ -0,0 +1,19 @@
+{{ template "header.html" . }}
+
+<div class="theme-panel">
+  <h2 class="theme-heading">Log in to {{ issuer }} </h2>
+  <div>
+    {{ range $c := .Connectors }}
+      <div class="theme-form-row">
+        <a href="{{ $c.URL }}" target="_self">
+          <button class="dex-btn theme-btn-provider">
+            <span class="dex-btn-icon dex-btn-icon--{{ $c.Type }}"></span>
+            <span class="dex-btn-text">Log in with {{ $c.Name }}</span>
+          </button>
+        </a>
+      </div>
+    {{ end }}
+  </div>
+</div>
+
+{{ template "footer.html" . }}

src/pages/Login/templates/oob.html

@@ -0,0 +1,9 @@
+{{ template "header.html" . }}
+
+<div class="theme-panel">
+  <h2 class="theme-heading">Login Successful</h2>
+  <p>Please copy this code, switch to your application and paste it there:</p>
+  <input type="text" class="theme-form-input" value="{{ .Code }}" />
+</div>
+
+{{ template "footer.html" . }}

src/pages/Login/templates/password.html

@@ -0,0 +1,49 @@
+{{ template "header.html" . }}
+
+<div class="theme-panel">
+  <div class="theme-panel-left">
+    <img class="theme-app-logo" src="{{ url .ReqPath "theme/logo-icon-name-below.png" }}" alt='PlatIAgro Logo' />
+    <div class="theme-app-description">
+      A Plataforma de Inteligência Artificial para o Agronegócio -
+      PlatIAgro - visa facilitar a construção de aplicações baseadas em
+      IA, como <em>machine learning</em> em geral, visão computacional e
+      processamento de linguagem natural no contexto do agronegócio
+      brasileiro.
+    </div>
+  </div>
+  <div class="theme-panel-right">
+    <div>
+      <h2 class="theme-heading">Login</h2>
+      <form method="post" action="{{ .PostURL }}">
+        <div class="theme-form-row">
+          <div class="theme-form-label">
+            <label for="userid">Usuário</label>
+          </div>
+        <input tabindex="1" required id="login" name="login" type="text" class="theme-form-input {{ if .Invalid }} theme-form-item-has-error {{ end }}" placeholder="Digite seu usuário" {{ if .Username }} value="{{ .Username }}" {{ else }} autofocus {{ end }}/>
+        </div>
+        <div class="theme-form-row">
+          <div class="theme-form-label">
+            <label for="password">Senha</label>
+          </div>
+        <input tabindex="2" required id="password" name="password" type="password" class="theme-form-input {{ if .Invalid }} theme-form-item-has-error {{ end }}" placeholder="Digite sua senha" {{ if .Invalid }} autofocus {{ end }}/>
+        </div>
+
+        {{ if .Invalid }}
+          <div id="login-error" class="dex-error-box">
+            Usuário ou senha inválidos.
+          </div>
+        {{ end }}
+
+        <button tabindex="3" id="submit-login" type="submit" class="dex-btn theme-btn--primary">Entrar</button>
+
+      </form>
+      {{ if .BackLink }}
+      <div class="theme-link-back">
+        <a class="dex-subtle-text" href="javascript:history.back()">Select another login method.</a>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</div>
+
+{{ template "footer.html" . }}