├── .gitignore
├── LICENSE
├── README.md
├── client
├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── e2e
│ ├── protractor.conf.js
│ ├── src
│ │ ├── app.e2e-spec.ts
│ │ └── app.po.ts
│ └── tsconfig.e2e.json
├── package-lock.json
├── package.json
├── src
│ ├── app
│ │ ├── app-routing.module.ts
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── car-edit
│ │ │ ├── car-edit.component.css
│ │ │ ├── car-edit.component.html
│ │ │ ├── car-edit.component.spec.ts
│ │ │ └── car-edit.component.ts
│ │ ├── car-list
│ │ │ ├── car-list.component.css
│ │ │ ├── car-list.component.html
│ │ │ ├── car-list.component.spec.ts
│ │ │ └── car-list.component.ts
│ │ ├── home
│ │ │ ├── home.component.css
│ │ │ ├── home.component.html
│ │ │ ├── home.component.spec.ts
│ │ │ └── home.component.ts
│ │ └── shared
│ │ │ ├── car
│ │ │ ├── car.service.spec.ts
│ │ │ └── car.service.ts
│ │ │ ├── giphy
│ │ │ └── giphy.service.ts
│ │ │ └── okta
│ │ │ └── auth.interceptor.ts
│ ├── assets
│ │ └── .gitkeep
│ ├── browserslist
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── karma.conf.js
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── tslint.json
├── tsconfig.json
└── tslint.json
├── demo.adoc
└── server
├── .gitignore
├── .mvn
└── wrapper
│ ├── maven-wrapper.jar
│ └── maven-wrapper.properties
├── mvnw
├── mvnw.cmd
├── pom.xml
└── src
├── main
├── java
│ └── com
│ │ └── okta
│ │ └── developer
│ │ └── demo
│ │ ├── Car.java
│ │ ├── CarRepository.java
│ │ ├── CoolCarController.java
│ │ └── DemoApplication.java
└── resources
│ └── application.yml
└── test
└── java
└── com
└── okta
└── developer
└── demo
└── DemoApplicationTests.java
/.gitignore:
--------------------------------------------------------------------------------
1 | /.idea/
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Basic CRUD App with Angular 7.0 and Spring Boot 2.1
2 |
3 | This example app shows how to build a basic CRUD app with Spring Boot 2.1, Spring Data, and Angular 7.0.
4 |
5 | Please read [Build a Basic CRUD App with Angular 7.0 and Spring Boot 2.1](https://developer.okta.com/blog/2018/08/22/basic-crud-angular-7-and-spring-boot-2) to see how this app was created.
6 |
7 | **Prerequisites:** [Java 8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) and [Node.js](https://nodejs.org/). For Java 10+, you'll need to change the `java.version` property and `jaxb-api` as a dependency. See Josh Long's [spring-boot-and-java-10](https://github.com/joshlong/spring-boot-and-java-10) project on GitHub for more information.
8 |
9 | > [Okta](https://developer.okta.com/) has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.
10 |
11 | * [Getting Started](#getting-started)
12 | * [Links](#links)
13 | * [Help](#help)
14 | * [License](#license)
15 |
16 | ## Getting Started
17 |
18 | To install this example application, run the following commands:
19 |
20 | ```bash
21 | git clone https://github.com/oktadeveloper/okta-spring-boot-2-angular-7-example.git
22 | cd okta-spring-boot-2-angular-7-example
23 | ```
24 |
25 | This will get a copy of the project installed locally. To install all of its dependencies and start each app, follow the instructions below.
26 |
27 | To run the server, cd into the `server` folder and run:
28 |
29 | ```bash
30 | ./mvnw spring-boot:run
31 | ```
32 |
33 | To run the client, cd into the `client` folder and run:
34 |
35 | ```bash
36 | npm install && npm start
37 | ```
38 |
39 | ### Create a New OIDC App in Okta
40 |
41 | To create a new OIDC app on Okta:
42 |
43 | 1. Log in to your developer account, navigate to **Applications**, and click on **Add Application**.
44 | 3. Select **Single-Page App** and click **Next**.
45 | 4. Give the application a name, change all instances of `localhost:8080` to `localhost:4200` and click **Done**.
46 |
47 | #### Server Configuration
48 |
49 | Set your domain and copy the `clientId` into `server/src/main/resources/application.yml`.
50 |
51 | **NOTE:** The value of `{yourOktaDomain}` should be something like `dev-123456.oktapreview`. Make sure you don't include `-admin` in the value!
52 |
53 | ```yaml
54 | okta:
55 | oauth2:
56 | client-id: {clientId}
57 | issuer: https://{yourOktaDomain}/oauth2/default
58 | ```
59 |
60 | #### Client Configuration
61 |
62 | For the client, set the `issuer` and copy the `clientId` into `client/src/app/app.module.ts`.
63 |
64 | ```typescript
65 | const config = {
66 | issuer: 'https://{yourOktaDomain}/oauth2/default',
67 | redirectUri: window.location.origin + '/implicit/callback',
68 | clientId: '{clientId}'
69 | };
70 | ```
71 |
72 | ## Links
73 |
74 | This example uses the following open source libraries from Okta:
75 |
76 | * [Okta Spring Boot Starter](https://github.com/okta/okta-spring-boot)
77 | * [Okta Angular SDK](https://github.com/okta/okta-oidc-js/tree/master/packages/okta-angular)
78 |
79 | ## Help
80 |
81 | Please post any questions as comments on the [blog post](https://developer.okta.com/blog/2018/08/22/basic-crud-angular-7-and-spring-boot-2), or visit our [Okta Developer Forums](https://devforum.okta.com/). You can also email developers@okta.com if would like to create a support ticket.
82 |
83 | ## License
84 |
85 | Apache 2.0, see [LICENSE](LICENSE).
86 |
--------------------------------------------------------------------------------
/client/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 |
8 | # dependencies
9 | /node_modules
10 |
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 |
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 |
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | yarn-error.log
34 | testem.log
35 | /typings
36 |
37 | # System Files
38 | .DS_Store
39 | Thumbs.db
40 |
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | # Client
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.4.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 |
--------------------------------------------------------------------------------
/client/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "client": {
7 | "root": "",
8 | "sourceRoot": "src",
9 | "projectType": "application",
10 | "prefix": "app",
11 | "schematics": {},
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "outputPath": "dist/client",
17 | "index": "src/index.html",
18 | "main": "src/main.ts",
19 | "polyfills": "src/polyfills.ts",
20 | "tsConfig": "src/tsconfig.app.json",
21 | "assets": [
22 | "src/favicon.ico",
23 | "src/assets"
24 | ],
25 | "styles": [
26 | "src/styles.css"
27 | ],
28 | "scripts": []
29 | },
30 | "configurations": {
31 | "production": {
32 | "fileReplacements": [
33 | {
34 | "replace": "src/environments/environment.ts",
35 | "with": "src/environments/environment.prod.ts"
36 | }
37 | ],
38 | "optimization": true,
39 | "outputHashing": "all",
40 | "sourceMap": false,
41 | "extractCss": true,
42 | "namedChunks": false,
43 | "aot": true,
44 | "extractLicenses": true,
45 | "vendorChunk": false,
46 | "buildOptimizer": true,
47 | "budgets": [
48 | {
49 | "type": "initial",
50 | "maximumWarning": "2mb",
51 | "maximumError": "5mb"
52 | }
53 | ]
54 | }
55 | }
56 | },
57 | "serve": {
58 | "builder": "@angular-devkit/build-angular:dev-server",
59 | "options": {
60 | "browserTarget": "client:build"
61 | },
62 | "configurations": {
63 | "production": {
64 | "browserTarget": "client:build:production"
65 | }
66 | }
67 | },
68 | "extract-i18n": {
69 | "builder": "@angular-devkit/build-angular:extract-i18n",
70 | "options": {
71 | "browserTarget": "client:build"
72 | }
73 | },
74 | "test": {
75 | "builder": "@angular-devkit/build-angular:karma",
76 | "options": {
77 | "main": "src/test.ts",
78 | "polyfills": "src/polyfills.ts",
79 | "tsConfig": "src/tsconfig.spec.json",
80 | "karmaConfig": "src/karma.conf.js",
81 | "styles": [
82 | "src/styles.css"
83 | ],
84 | "scripts": [],
85 | "assets": [
86 | "src/favicon.ico",
87 | "src/assets"
88 | ]
89 | }
90 | },
91 | "lint": {
92 | "builder": "@angular-devkit/build-angular:tslint",
93 | "options": {
94 | "tsConfig": [
95 | "src/tsconfig.app.json",
96 | "src/tsconfig.spec.json"
97 | ],
98 | "exclude": [
99 | "**/node_modules/**"
100 | ]
101 | }
102 | }
103 | }
104 | },
105 | "client-e2e": {
106 | "root": "e2e/",
107 | "projectType": "application",
108 | "prefix": "",
109 | "architect": {
110 | "e2e": {
111 | "builder": "@angular-devkit/build-angular:protractor",
112 | "options": {
113 | "protractorConfig": "e2e/protractor.conf.js",
114 | "devServerTarget": "client:serve"
115 | },
116 | "configurations": {
117 | "production": {
118 | "devServerTarget": "client:serve:production"
119 | }
120 | }
121 | },
122 | "lint": {
123 | "builder": "@angular-devkit/build-angular:tslint",
124 | "options": {
125 | "tsConfig": "e2e/tsconfig.e2e.json",
126 | "exclude": [
127 | "**/node_modules/**"
128 | ]
129 | }
130 | }
131 | }
132 | }
133 | },
134 | "defaultProject": "client"
135 | }
--------------------------------------------------------------------------------
/client/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './src/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: require('path').join(__dirname, './tsconfig.e2e.json')
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
--------------------------------------------------------------------------------
/client/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('workspace-project App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('Welcome to client!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/client/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/client/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "jasminewd2",
10 | "node"
11 | ]
12 | }
13 | }
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "~7.0.0",
15 | "@angular/cdk": "^7.0.2",
16 | "@angular/common": "~7.0.0",
17 | "@angular/compiler": "~7.0.0",
18 | "@angular/core": "~7.0.0",
19 | "@angular/forms": "~7.0.0",
20 | "@angular/http": "~7.0.0",
21 | "@angular/material": "^7.0.2",
22 | "@angular/platform-browser": "~7.0.0",
23 | "@angular/platform-browser-dynamic": "~7.0.0",
24 | "@angular/router": "~7.0.0",
25 | "@okta/okta-angular": "^1.0.7",
26 | "core-js": "^2.5.4",
27 | "rxjs": "~6.3.3",
28 | "zone.js": "~0.8.26"
29 | },
30 | "devDependencies": {
31 | "@angular-devkit/build-angular": "~0.10.0",
32 | "@angular/cli": "~7.0.4",
33 | "@angular/compiler-cli": "~7.0.0",
34 | "@angular/language-service": "~7.0.0",
35 | "@types/node": "~8.9.4",
36 | "@types/jasmine": "~2.8.8",
37 | "@types/jasminewd2": "~2.0.3",
38 | "codelyzer": "~4.5.0",
39 | "jasmine-core": "~2.99.1",
40 | "jasmine-spec-reporter": "~4.2.1",
41 | "karma": "~3.0.0",
42 | "karma-chrome-launcher": "~2.2.0",
43 | "karma-coverage-istanbul-reporter": "~2.0.1",
44 | "karma-jasmine": "~1.1.2",
45 | "karma-jasmine-html-reporter": "^0.2.2",
46 | "protractor": "~5.4.0",
47 | "ts-node": "~7.0.0",
48 | "tslint": "~5.11.0",
49 | "typescript": "~3.1.1"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/client/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { CarListComponent } from './car-list/car-list.component';
4 | import { CarEditComponent } from './car-edit/car-edit.component';
5 | import { OktaCallbackComponent } from '@okta/okta-angular';
6 | import { HomeComponent } from './home/home.component';
7 |
8 | const routes: Routes = [
9 | {path: '', redirectTo: '/home', pathMatch: 'full'},
10 | {
11 | path: 'home',
12 | component: HomeComponent
13 | },
14 | {
15 | path: 'car-list',
16 | component: CarListComponent
17 | },
18 | {
19 | path: 'car-add',
20 | component: CarEditComponent
21 | },
22 | {
23 | path: 'car-edit/:id',
24 | component: CarEditComponent
25 | },
26 | {
27 | path: 'implicit/callback',
28 | component: OktaCallbackComponent
29 | }
30 | ];
31 |
32 | @NgModule({
33 | imports: [RouterModule.forRoot(routes)],
34 | exports: [RouterModule]
35 | })
36 | export class AppRoutingModule { }
37 |
--------------------------------------------------------------------------------
/client/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | .toolbar-spacer {
2 | flex: 1 1 auto;
3 | }
4 |
--------------------------------------------------------------------------------
/client/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 | Welcome to {{title}}!
3 |
4 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/client/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async(() => {
7 | TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | }));
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.debugElement.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'client'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.debugElement.componentInstance;
26 | expect(app.title).toEqual('client');
27 | });
28 |
29 | it('should render title in a h1 tag', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.debugElement.nativeElement;
33 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to client!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/client/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { OktaAuthService } from '@okta/okta-angular';
3 |
4 | @Component({
5 | selector: 'app-root',
6 | templateUrl: './app.component.html',
7 | styleUrls: ['./app.component.css']
8 | })
9 | export class AppComponent implements OnInit {
10 | title = 'client';
11 | isAuthenticated: boolean;
12 |
13 | constructor(public oktaAuth: OktaAuthService) {
14 | }
15 |
16 | async ngOnInit() {
17 | this.isAuthenticated = await this.oktaAuth.isAuthenticated();
18 | // Subscribe to authentication state changes
19 | this.oktaAuth.$authenticationState.subscribe(
20 | (isAuthenticated: boolean) => this.isAuthenticated = isAuthenticated
21 | );
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/client/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 | import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
7 | import { CarListComponent } from './car-list/car-list.component';
8 | import { MatButtonModule, MatCardModule, MatInputModule, MatListModule, MatToolbarModule } from '@angular/material';
9 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
10 | import { CarEditComponent } from './car-edit/car-edit.component';
11 | import { FormsModule } from '@angular/forms';
12 | import { OktaAuthModule } from '@okta/okta-angular';
13 | import { AuthInterceptor } from './shared/okta/auth.interceptor';
14 | import { HomeComponent } from './home/home.component';
15 |
16 | const config = {
17 | issuer: 'https://dev-737523.oktapreview.com/oauth2/default',
18 | redirectUri: 'http://localhost:4200/implicit/callback',
19 | clientId: '0oagqzcu86BBOq2jF0h7'
20 | };
21 |
22 | @NgModule({
23 | declarations: [
24 | AppComponent,
25 | CarListComponent,
26 | CarEditComponent,
27 | HomeComponent
28 | ],
29 | imports: [
30 | BrowserModule,
31 | AppRoutingModule,
32 | HttpClientModule,
33 | BrowserAnimationsModule,
34 | MatButtonModule,
35 | MatCardModule,
36 | MatInputModule,
37 | MatListModule,
38 | MatToolbarModule,
39 | FormsModule,
40 | OktaAuthModule.initAuth(config)
41 | ],
42 | providers: [{provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}],
43 | bootstrap: [AppComponent]
44 | })
45 | export class AppModule { }
46 |
--------------------------------------------------------------------------------
/client/src/app/car-edit/car-edit.component.css:
--------------------------------------------------------------------------------
1 | .giphy {
2 | margin: 10px;
3 | }
4 |
--------------------------------------------------------------------------------
/client/src/app/car-edit/car-edit.component.html:
--------------------------------------------------------------------------------
1 |
2 |
26 |
27 |
--------------------------------------------------------------------------------
/client/src/app/car-edit/car-edit.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CarEditComponent } from './car-edit.component';
4 |
5 | describe('CarEditComponent', () => {
6 | let component: CarEditComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ CarEditComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(CarEditComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/client/src/app/car-edit/car-edit.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, OnInit } from '@angular/core';
2 | import { Subscription } from 'rxjs';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 | import { CarService } from '../shared/car/car.service';
5 | import { NgForm } from '@angular/forms';
6 | import { GiphyService } from '../shared/giphy/giphy.service';
7 |
8 | @Component({
9 | selector: 'app-car-edit',
10 | templateUrl: './car-edit.component.html',
11 | styleUrls: ['./car-edit.component.css']
12 | })
13 | export class CarEditComponent implements OnInit, OnDestroy {
14 | car: any = {};
15 |
16 | sub: Subscription;
17 |
18 | constructor(private route: ActivatedRoute,
19 | private router: Router,
20 | private carService: CarService,
21 | private giphyService: GiphyService) {
22 | }
23 |
24 | ngOnInit() {
25 | this.sub = this.route.params.subscribe(params => {
26 | const id = params['id'];
27 | if (id) {
28 | this.carService.get(id).subscribe((car: any) => {
29 | if (car) {
30 | this.car = car;
31 | this.car.href = car._links.self.href;
32 | this.giphyService.get(car.name).subscribe(url => car.giphyUrl = url);
33 | } else {
34 | console.log(`Car with id '${id}' not found, returning to list`);
35 | this.gotoList();
36 | }
37 | });
38 | }
39 | });
40 | }
41 |
42 | ngOnDestroy() {
43 | this.sub.unsubscribe();
44 | }
45 |
46 | gotoList() {
47 | this.router.navigate(['/car-list']);
48 | }
49 |
50 | save(form: NgForm) {
51 | this.carService.save(form).subscribe(result => {
52 | this.gotoList();
53 | }, error => console.error(error));
54 | }
55 |
56 | remove(href) {
57 | this.carService.remove(href).subscribe(result => {
58 | this.gotoList();
59 | }, error => console.error(error));
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/client/src/app/car-list/car-list.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oktadev/okta-spring-boot-2-angular-7-example/7c289c4582828e1a6c74d006697ba9aa7d56544d/client/src/app/car-list/car-list.component.css
--------------------------------------------------------------------------------
/client/src/app/car-list/car-list.component.html:
--------------------------------------------------------------------------------
1 |
2 | Car List
3 |
4 |
5 |
6 |
7 |
7 |