Merge pull request #181 from silinternational/develop

Release 7.0.0 switch to Vite, update deps

.env.dist

@@ -1,16 +1,14 @@
 #
 # Required for the ui. (ref: https://cli.vuejs.org/guide/mode-and-env.html)
 #
-VUE_APP_API_BASE_URL=//profile-api.example.org
-VUE_APP_PRIMARY_COLOR=#015d99
-VUE_APP_SECONDARY_COLOR=#791f5e
-VUE_APP_ANALYTICS_ID='UA-xxxxxxxxx-y'
-VUE_APP_RECAPTCHA_ID=''
-VUE_APP_SENTRY_DSN=123
-
+VITE_API_BASE_URL=//profile-api.example.org
+VITE_PRIMARY_COLOR='#015d99'
+VITE_SECONDARY_COLOR='#791f5e'
+VITE_ANALYTICS_ID='UA-xxxxxxxxx-y'
+VITE_RECAPTCHA_ID=''
+VITE_SENTRY_DSN=123
 # [authenticator | authy] (Google Authenticator, Authy)
-VUE_APP_TOTP_APP_RECOMMENDATION=authenticator
-VUE_ALLOWED_HOSTS=profile.example.org
+VITE_TOTP_APP_RECOMMENDATION=authenticator
 #
 # Everything below is needed for local testing only
 #

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @silinternational/js-devs

.github/pull_request_template.md

@@ -0,0 +1,33 @@
+paste_backlog_issue_link_here
+
+---
+
+### Added
+
+-
+
+### Changed
+
+-
+
+### Deprecated
+
+-
+
+### Removed
+
+-
+
+### Fixed
+
+-
+
+### Security
+
+-
+
+### Feature branch checklist
+
+- [ ] Documentation (README, etc.)
+- [ ] update version in package.json
+- [ ] Run `make format` and `make depsupdate`

.github/workflows/test.yml

@@ -7,6 +7,7 @@ jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
+    timeout-minutes: ${{ fromJSON(vars.DEFAULT_JOB_TIMEOUT_MINUTES) }}
     steps:
     - uses: actions/checkout@v4
     - name: Use Node.js

.gitignore

@@ -8,7 +8,6 @@ vendor/
 .env.local
 .env.*.local
 development/cert
-app-id.json
 
 # Log files
 npm-debug.log*

Makefile

@@ -1,31 +1,31 @@
 start: deps mfaapi
-	docker-compose pull
-	docker-compose up -d proxy
+	docker compose pull
+	docker compose up -d proxy
 
 deps:
-	docker-compose run --rm node npm install
+	docker compose run --rm node npm install
 
 depsupdate:
-	docker-compose run --rm node npm update
-	docker-compose run --rm node npm ls --package-lock-only --json > installed-versions.json
+	docker compose run --rm node npm update
+	docker compose run --rm node npm ls --package-lock-only --json > installed-versions.json
 
 dist: deps
-	docker-compose run --rm node npm run build
+	docker compose run --rm node npm run build
 
 logs:
-	docker-compose logs
-	docker-compose exec idp cat /var/log/apache2/error.log
+	docker compose logs
+	docker compose exec idp cat /var/log/apache2/error.log
 
 phpmyadmin:
-	docker-compose up -d brokerPhpmyadmin profilePhpmyadmin
+	docker compose up -d brokerPhpmyadmin profilePhpmyadmin
 
 mfaapi:
-	docker-compose up -d mfaapi
+	docker compose up -d mfaapi
 
 clean:
-	docker-compose run --rm node npm run clean
-	docker-compose kill
-	docker-compose rm -f
+	docker compose run --rm node npm run clean
+	docker compose kill
+	docker compose rm -f
 
 format:
-	docker-compose run --rm node npm run format
+	docker compose run --rm node npm run format

README.md

@@ -8,7 +8,7 @@ Identity management UI for a given IdP that will help users establish good passw
 
 Install [Docker](https://docs.docker.com/install), [Docker Compose](https://docs.docker.com/compose/install) and [Make](https://www.gnu.org/software/make)
 
-Project is managed with [vue-cli](https://github.com/vuejs/vue-cli).
+Project is managed with [vitejs](https://vitejs.dev/).
 
 ## Environment
 
@@ -30,19 +30,21 @@ i18n support is built-in however the translation files must be generated and dro
 An IdP infrastructure will be running locally and is required for authentication into the app's protected pages.
 
 #### Existing user
+
 1.  Username: **a**
 1.  Password: **a**
 
 #### New user (has no password yet)
+
 1. Enter app with a special "invitation" link, e.g., <https://profile.gtis.guru/#/profile/intro?invite=2b2d424e-8cb0-49c7-8c0b-7f6603INVITE>
 1. if needed, this user's username is **b**
 
 ## Run the UI as a Docker container
 
-See notes in Environment section regarding HTTPS and _traefik_ configuration.  
+See notes in Environment section regarding HTTPS and _traefik_ configuration.
 
 1.  Image (`silintl/idp-profile-ui`) is located on [Docker Hub](https://hub.docker.com/r/silintl/idp-profile-ui)
-1.  `VUE_APP_API_BASE_URL` must be populated as an environment variable so the UI knows how to communicate to the API.
+1.  `VITE_API_BASE_URL` must be populated as an environment variable so the UI knows how to communicate to the API.
 
 ## Local development
 
@@ -71,8 +73,8 @@ Copy `.env.dist` to `env.local` and update the relevant values, e.g., a UI deplo
 
 The following files can/should be replaced before running the build.
 
-* `public/favicon.ico`
-* `src/assets/logo.png`
+- `./favicon.ico`
+- `src/assets/logo.png`
 
 ## Step 3 – Build for deployment
 

development/saml20-idp-hosted.php

@@ -16,7 +16,6 @@
             'idBrokerTrustedIpRanges' => Env::get('ID_BROKER_TRUSTED_IP_RANGES'),
             'idpDomainName' => Env::get('IDP_DOMAIN_NAME'),
             'mfaSetupUrl' => Env::get('MFA_SETUP_URL'),
-            'mfaLearnMoreUrl' => Env::get('MFA_LEARN_MORE_URL'),
 
             // Optional:
             'loggerClass' => Psr3SamlLogger::class,
@@ -34,6 +33,7 @@
         30 => [
             'class' => 'profilereview:ProfileReview',
             'employeeIdAttr' => 'employeeNumber',
+            'mfaLearnMoreUrl' => Env::get('MFA_LEARN_MORE_URL'),
             'profileUrl' => Env::get('PROFILE_URL'),
             'loggerClass' => Psr3SamlLogger::class,
         ],

public/index.html → index.html

@@ -1,32 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 
-    <link rel="preconnect" href="https://www.gstatic.com">
-    <link rel="preconnect" href="https://www.google.com">
-    <link rel="preconnect" href="https://www.googletagmanager.com">
-    <link rel="preconnect" href="https://www.google-analytics.com">
+    <link rel="preconnect" href="https://www.gstatic.com" />
+    <link rel="preconnect" href="https://www.google.com" />
+    <link rel="preconnect" href="https://www.googletagmanager.com" />
+    <link rel="preconnect" href="https://www.google-analytics.com" />
 
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
-
+    <link rel="icon" href="./favicon.ico" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
     <title>IdP Profile Management</title>
   </head>
 
   <body>
     <noscript>
       <strong>
-        We're sorry but IdP Profile Management doesn't work properly without
-        JavaScript enabled. Please enable it to continue.
+        We're sorry but IdP Profile Management doesn't work properly without JavaScript enabled. Please enable it to
+        continue.
       </strong>
     </noscript>
     <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
-
 </html>