KEYCLOAK-11268: Change project layout

testsuite/integration-arquillian/tests/other/base-ui/src/test/java/org/keycloak/testsuite/ui/account2/page/AbstractAccountPage.java

@@ -41,7 +41,6 @@ public abstract class AbstractAccountPage extends AuthRealm {
     public UriBuilder createUriBuilder() {
         String fragment = null;
         if (hashPath != null) {
-            hashPath.add(0, "app"); // TODO remove this once KEYCLOAK-11268 is resolved
             fragment = "/" + String.join("/", hashPath);
         }
 

themes/.gitignore

@@ -1 +1,2 @@
 node
+web_modules

themes/pom.xml

@@ -15,12 +15,25 @@
 
     <properties>
         <dir.common>src/main/resources/theme/keycloak/common/resources</dir.common>
-        <dir.account2>src/main/resources/theme/keycloak-preview/account/resources</dir.account2>
+        <dir.account2>src/main/resources/theme/keycloak-preview/account/src</dir.account2>
         <args.npm.install>ci --no-optional --ignore-scripts</args.npm.install>
     </properties>
 
     <build>
         <plugins>
+            <plugin>
+                <artifactId>maven-clean-plugin</artifactId>
+                <configuration>
+                    <filesets>
+                        <fileset>
+                            <directory>${dir.account2}/web_modules</directory>
+                        </fileset>
+                        <fileset>
+                            <directory>${dir.common}/web_modules</directory>
+                        </fileset>
+                    </filesets>
+                </configuration>
+            </plugin>
             <plugin>
                 <groupId>com.github.eirslett</groupId>
                 <artifactId>frontend-maven-plugin</artifactId>
@@ -110,9 +123,11 @@
                     <exclude>**/Gruntfile.js</exclude>
                     <exclude>**/Gemfile*</exclude>
                     <exclude>**/.*</exclude>
+                    
                     <!-- Remove once rcue stops shipping this file -->
                     <exclude>**/git-Logo.svg</exclude>
-                    <exclude>**/keycloak-preview/account/resources/node_modules/**</exclude>
+                    
+                    <exclude>**/keycloak-preview/account/src/**</exclude>
                 </excludes>
             </resource>
         </resources>

themes/src/main/resources/theme/keycloak-preview/account/index.ftl

@@ -130,7 +130,7 @@
                     document.getElementById("landingLoggedInUser").innerHTML = loggedInUserName('${msg("unknownUser")}', '${msg("fullName")}');
                 }
 
-                loadjs("/app/Main.js");
+                loadjs("/Main.js");
 
             }).error(function() {
                 alert('failed to initialize keycloak');
@@ -231,7 +231,7 @@
                     <h6>${msg("personalInfoIntroMessage")}</h6>
                 </div>
                 <div class="pf-c-card__body pf-c-content">
-                    <h5 id="landingPersonalInfoLink" onclick="toggleReact()"><a href="#/app/personal-info">${msg("personalInfoHtmlTitle")}</a></h5>
+                    <h5 id="landingPersonalInfoLink" onclick="toggleReact()"><a href="#personal-info">${msg("personalInfoHtmlTitle")}</a></h5>
                 </div>
               </div>
             </div>
@@ -242,9 +242,9 @@
                     <h6>${msg("accountSecurityIntroMessage")}</h6>
                 </div>
                 <div class="pf-c-card__body pf-c-content">
-                    <h5 id="landingSigningInLink" onclick="toggleReact()"><a href="#/app/security/signingin">${msg("signingIn")}</a></h5>
-                    <h5 id="landingDeviceActivityLink" onclick="toggleReact()"><a href="#/app/security/device-activity">${msg("deviceActivityHtmlTitle")}</a></h5>
-                    <h5 id="landingLinkedAccountsLink" style="display:none" onclick="toggleReact()"><a href="#/app/security/linked-accounts">${msg("linkedAccountsHtmlTitle")}</a></h5>
+                    <h5 id="landingSigningInLink" onclick="toggleReact()"><a href="#security/signingin">${msg("signingIn")}</a></h5>
+                    <h5 id="landingDeviceActivityLink" onclick="toggleReact()"><a href="#security/device-activity">${msg("deviceActivityHtmlTitle")}</a></h5>
+                    <h5 id="landingLinkedAccountsLink" style="display:none" onclick="toggleReact()"><a href="#security/linked-accounts">${msg("linkedAccountsHtmlTitle")}</a></h5>
                 </div>
               </div>
             </div>
@@ -255,7 +255,7 @@
                     <h6>${msg("applicationsIntroMessage")}</h6>
                 </div>
                 <div class="pf-c-card__body pf-c-content">
-                    <h5 id="landingApplicationsLink" onclick="toggleReact()"><a href="#/app/applications">${msg("applicationsHtmlTitle")}</a></h5>
+                    <h5 id="landingApplicationsLink" onclick="toggleReact()"><a href="#applications">${msg("applicationsHtmlTitle")}</a></h5>
                 </div>
               </div>
             </div>
@@ -266,7 +266,7 @@
                     <h6>${msg("resourceIntroMessage")}</h6>
                 </div>
                 <div class="pf-c-card__body pf-c-content">
-                    <h5 id="landingMyResourcesLink" onclick="toggleReact()"><a href="#/app/resources">${msg("myResources")}</a></h5>
+                    <h5 id="landingMyResourcesLink" onclick="toggleReact()"><a href="#resources">${msg("myResources")}</a></h5>
                 </div>
               </div>
             </div>

themes/src/main/resources/theme/keycloak-preview/account/resources/.gitignore

@@ -1,24 +1,14 @@
-# ignore typescript-generated files 
+# ignore typescript-generated files
 *.js
 *.js.map
 
-# ignore keycloak.json - we won't need this much longer
-keycloak.json
-
 # ignore log files
 *.log
 
-# Do not commit, installed at compile time
-node_modules
-
 # Don't ignore these
-!keycloak.js
-!snowpack.config.js
-!.eslintrc.js
 !WelcomePageScripts.js
 !content.js
 
 public/app.css
 public/base.css
-public/assets/
-web_modules/
+public/assets/

themes/src/main/resources/theme/keycloak-preview/account/resources/content.js

@@ -4,7 +4,7 @@ var content = [
         id: 'personal-info',
         path: 'personal-info',
         label: 'personalInfoHtmlTitle',
-        modulePath: '/app/content/account-page/AccountPage.js',
+        modulePath: '/content/account-page/AccountPage.js',
         componentName: 'AccountPage'
     },
     {
@@ -15,21 +15,21 @@ var content = [
                 id: 'signingin',
                 path: 'security/signingin',
                 label: 'signingIn',
-                modulePath: '/app/content/signingin-page/SigningInPage.js',
+                modulePath: '/content/signingin-page/SigningInPage.js',
                 componentName: 'SigningInPage',
             },
             {
                 id: 'device-activity',
                 path: 'security/device-activity',
                 label: 'device-activity',
-                modulePath: '/app/content/device-activity-page/DeviceActivityPage.js',
+                modulePath: '/content/device-activity-page/DeviceActivityPage.js',
                 componentName: 'DeviceActivityPage'
             },
             {
                 id: 'linked-accounts',
                 path: 'security/linked-accounts',
                 label: 'linkedAccountsHtmlTitle',
-                modulePath: '/app/content/linked-accounts-page/LinkedAccountsPage.js',
+                modulePath: '/content/linked-accounts-page/LinkedAccountsPage.js',
                 componentName: 'LinkedAccountsPage',
                 hidden: !features.isLinkedAccountsEnabled
             }
@@ -39,14 +39,14 @@ var content = [
         id: 'applications',
         path: 'applications',
         label: 'applications',
-        modulePath: '/app/content/applications-page/ApplicationsPage.js',
+        modulePath: '/content/applications-page/ApplicationsPage.js',
         componentName: 'ApplicationsPage'
     },
     {
         id: 'resources',
         path: 'resources',
         label: 'resources',
-        modulePath: '/app/content/my-resources-page/MyResourcesPage.js',
+        modulePath: '/content/my-resources-page/MyResourcesPage.js',
         componentName: 'MyResourcesPage',
         hidden: !features.isMyResourcesEnabled
     }

themes/src/main/resources/theme/keycloak-preview/account/resources/environments/environment.prod.ts

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

themes/src/main/resources/theme/keycloak-preview/account/resources/environments/environment.ts

@@ -1,8 +0,0 @@
-// The file contents for the current environment will overwrite these during build.
-// The build system defaults to the dev environment which uses `environment.ts`, but if you do
-// `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `.angular-cli.json`.
-
-export const environment = {
-  production: false
-};

themes/src/main/resources/theme/keycloak-preview/account/resources/welcome-page-scripts.js

@@ -15,7 +15,7 @@
  */
 var isWelcomePage = function () {
     var winHash = window.location.hash;
-    return winHash.indexOf('#/app') !== 0;
+    return winHash === '#/';
 };
 
 var toggleReact = function () {

themes/src/main/resources/theme/keycloak-preview/account/src/.babelrc

@@ -3,7 +3,7 @@
     [
       "snowpack/assets/babel-plugin.js",
       {
-        "webModulesUrl": "./web_modules",
+        "webModulesUrl": "../common/keycloak/web_modules",
         "moduleResolution": "node"
       }
     ],

themes/src/main/resources/theme/keycloak-preview/account/src/.gitignore

@@ -0,0 +1,2 @@
+# Do not commit, installed at compile time
+node_modules

themes/src/main/resources/theme/keycloak-preview/account/src/app/ContentPages.tsx

@@ -93,7 +93,7 @@ function createNavItems(activePage: PageDef, contentParam: ContentItem[], groupN
                             groupId={item.groupId}
                             itemId={item.itemId}
                             key={item.itemId}
-                            to={'#/app/' + page.path}
+                            to={'#/' + page.path}
                             isActive={activePage.itemId === item.itemId}
                             type="button">
                         {Msg.localize(page.label, page.labelParams)}
@@ -158,10 +158,10 @@ export function makeRoutes(): React.ReactNode {
     const routes: React.ReactElement<Route>[] = pageDefs.map((page: PageDef) => {
         if (isModulePageDef(page)) {
             const node: React.ReactNode = React.createElement(page.module[page.componentName], {'pageDef': page});
-            return <Route key={page.itemId} path={'/app/' + page.path} exact render={() => node} />;
+            return <Route key={page.itemId} path={'/' + page.path} exact render={() => node} />;
         } else {
             const pageDef: ComponentPageDef = page as ComponentPageDef;
-            return <Route key={page.itemId} path={'/app/' + page.path} exact component={pageDef.component}/>;
+            return <Route key={page.itemId} path={'/' + page.path} exact component={pageDef.component}/>;
         }
     });
 

themes/src/main/resources/theme/keycloak-preview/account/src/app/PageNav.tsx

@@ -37,7 +37,7 @@ class PageNavigation extends React.Component<PageNavProps, PageNavState> {
         const items: PageDef[] = flattenContent(content);
         const firstItem = items[0];
         for (let item of items) {
-            const itemPath: string = '/app/' + item.path;
+            const itemPath: string = '/' + item.path;
             if (itemPath === currentPath) {
                 return item;
             }

themes/src/main/resources/theme/keycloak-preview/account/src/package-lock.json

@@ -4581,6 +4581,12 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=",
+      "dev": true
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -6339,6 +6345,12 @@
         }
       }
     },
+    "interpret": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+      "dev": true
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -8675,6 +8687,15 @@
         }
       }
     },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -9113,6 +9134,36 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.4.tgz",
+      "integrity": "sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
+    "shx": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/shx/-/shx-0.3.2.tgz",
+      "integrity": "sha512-aS0mWtW3T2sHAenrSrip2XGv39O9dXIFUqxAEWHEOS1ePtGIBavdPJY1kE2IHl14V/4iCbUiNDPGdyYTtmhSoA==",
+      "dev": true,
+      "requires": {
+        "es6-object-assign": "^1.0.3",
+        "minimist": "^1.2.0",
+        "shelljs": "^0.8.1"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        }
+      }
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",

themes/src/main/resources/theme/keycloak-preview/account/src/package.json

@@ -3,12 +3,13 @@
   "version": "1.0.0",
   "description": "keycloak-preview account management written in React",
   "scripts": {
-    "build": "snowpack && npm run check-types && npm run babel",
-    "babel": "babel --source-maps --extensions \".js,.ts,.tsx\" app/ --out-dir app/",
+    "build": "snowpack && npm run check-types && npm run babel && npm run move-web_modules",
+    "babel": "babel --source-maps --extensions \".js,.ts,.tsx\" app/ --out-dir ../resources/",
     "babel:watch": "npm run babel -- --watch",
     "check-types": "tsc --noImplicitAny --strictNullChecks --jsx react -p ./",
     "check-types:watch": "npm run check-types -- -w",
-    "lint": "eslint ./app/**/*.ts*"
+    "lint": "eslint ./app/**/*.ts*",
+    "move-web_modules": "shx mv web_modules ../../../keycloak/common/resources"
   },
   "keywords": [],
   "author": "Stan Silvert",
@@ -42,6 +43,7 @@
     "eslint-plugin-react": "^7.12.4",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-postcss": "^2.5.0",
+    "shx": "^0.3.2",
     "snowpack": "^1.7.0",
     "typescript": "^3.8.3"
   },

themes/src/main/resources/theme/keycloak-preview/account/src/snowpack.config.js

@@ -1,17 +1,20 @@
 const copy = require('rollup-plugin-copy');
 const postcss = require('rollup-plugin-postcss');
 
+const appDest = '../resources/'
+const appDestPublic = appDest + 'public/'
+
 module.exports = {
   rollup: {
     plugins: [
       postcss({
-        extract: 'public/app.css'
+        extract: appDestPublic + 'app.css'
       }),
       copy({
         targets: [
-          { src: 'node_modules/@patternfly/react-core/dist/styles/base.css', dest: 'public/' },
-          { src: 'node_modules/@patternfly/react-core/dist/styles/assets/fonts/overpass-webfont/overpass*.woff2', dest: 'public/assets/fonts/overpass-webfont/'},
-          { src: 'node_modules/@patternfly/react-core/dist/styles/assets/pficon/pficon.woff2', dest: 'public/assets/pficon/'},
+          { src: 'node_modules/@patternfly/react-core/dist/styles/base.css', dest: appDestPublic },
+          { src: 'node_modules/@patternfly/react-core/dist/styles/assets/fonts/overpass-webfont/overpass*.woff2', dest: appDestPublic + 'assets/fonts/overpass-webfont/'},
+          { src: 'node_modules/@patternfly/react-core/dist/styles/assets/pficon/pficon.woff2', dest: appDestPublic + 'assets/pficon/'},
         ],
       })
     ]

themes/src/main/resources/theme/keycloak-preview/account/theme.properties

@@ -1,6 +1,6 @@
 parent=base
 deprecatedMode=false
-scripts=WelcomePageScripts.js content.js
+scripts=welcome-page-scripts.js content.js
 developmentMode=false
 
 # This is the logo in upper lefthand corner.