├── .gitignore
├── LICENSE
├── README.md
├── client
├── .angular-cli.json
├── .editorconfig
├── .gitignore
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── 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
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
└── 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 2017 Okta, Inc.
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 5.0 and Spring Boot 2.0
2 |
3 | This example app shows how to build a basic CRUD app with Spring Boot 2.0, Spring Data, and Angular 5.0.
4 |
5 | Please read [Build a Basic CRUD App with Angular 5.0 and Spring Boot 2.0](https://developer.okta.com/blog/2017/12/04/basic-crud-angular-and-spring-boot) 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/).
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-5-example.git
22 | cd okta-spring-boot-2-angular-5-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 an OIDC App in Okta
40 |
41 | You will need to [create an OIDC App in Okta](https://developer.okta.com/blog/2017/12/04/basic-crud-angular-and-spring-boot#create-an-oidc-app-in-okta) to get your values to perform authentication.
42 |
43 | Log in to your Okta Developer account (or [sign up](https://developer.okta.com/signup/) if you don’t have an account) and navigate to **Applications** > **Add Application**. Click **Single-Page App**, click **Next**, and give the app a name you’ll remember. Change all instances of `localhost:8080` to `localhost:4200` and click **Done**.
44 |
45 | #### Server Configuration
46 |
47 | Set your domain and copy the `clientId` into `server/src/main/resources/application.yml`.
48 |
49 | **NOTE:** The value of `{yourOktaDomain}` should be something like `dev-123456.oktapreview`. Make sure you don't include `-admin` in the value!
50 |
51 | ```yaml
52 | security:
53 | oauth2:
54 | client:
55 | access-token-uri: https://{yourOktaDomain}.com/oauth2/default/v1/token
56 | user-authorization-uri: https://{yourOktaDomain}.com/oauth2/default/v1/authorize
57 | client-id: {clientId}
58 | scope: openid profile email
59 | resource:
60 | user-info-uri: https://{yourOktaDomain}.com/oauth2/default/v1/userinfo
61 | token-info-uri: https://{yourOktaDomain}.com/oauth2/default/v1/introspect
62 | prefer-token-info: false
63 | ```
64 |
65 | #### Client Configuration
66 |
67 | For the client, set the `issuer` and copy the `clientId` into `client/src/app/app.module.ts`.
68 |
69 | ```typescript
70 | const config = {
71 | issuer: 'https://{yourOktaDomain}.com/oauth2/default',
72 | redirectUri: window.location.origin + '/implicit/callback',
73 | clientId: '{clientId}'
74 | };
75 | ```
76 |
77 | ## Links
78 |
79 | This example uses the following open source libraries:
80 |
81 | * [Spring Security OAuth](http://projects.spring.io/spring-security-oauth/)
82 | * [Spring Security OAuth Boot 2 Autoconfig](https://github.com/spring-projects/spring-security-oauth2-boot)
83 | * [Okta Angular SDK](https://github.com/okta/okta-oidc-js/tree/master/packages/okta-angular)
84 |
85 | ## Help
86 |
87 | Please post any questions as comments on the [blog post](https://developer.okta.com/blog/2017/12/04/basic-crud-angular-and-spring-boot), 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.
88 |
89 | ## License
90 |
91 | Apache 2.0, see [LICENSE](LICENSE).
92 |
--------------------------------------------------------------------------------
/client/.angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "project": {
4 | "name": "client"
5 | },
6 | "apps": [
7 | {
8 | "root": "src",
9 | "outDir": "dist",
10 | "assets": [
11 | "assets",
12 | "favicon.ico"
13 | ],
14 | "index": "index.html",
15 | "main": "main.ts",
16 | "polyfills": "polyfills.ts",
17 | "test": "test.ts",
18 | "tsconfig": "tsconfig.app.json",
19 | "testTsconfig": "tsconfig.spec.json",
20 | "prefix": "app",
21 | "styles": [
22 | "styles.css"
23 | ],
24 | "scripts": [],
25 | "environmentSource": "environments/environment.ts",
26 | "environments": {
27 | "dev": "environments/environment.ts",
28 | "prod": "environments/environment.prod.ts"
29 | }
30 | }
31 | ],
32 | "e2e": {
33 | "protractor": {
34 | "config": "./protractor.conf.js"
35 | }
36 | },
37 | "lint": [
38 | {
39 | "project": "src/tsconfig.app.json",
40 | "exclude": "**/node_modules/**"
41 | },
42 | {
43 | "project": "src/tsconfig.spec.json",
44 | "exclude": "**/node_modules/**"
45 | },
46 | {
47 | "project": "e2e/tsconfig.e2e.json",
48 | "exclude": "**/node_modules/**"
49 | }
50 | ],
51 | "test": {
52 | "karma": {
53 | "config": "./karma.conf.js"
54 | }
55 | },
56 | "defaults": {
57 | "styleExt": "css",
58 | "component": {}
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/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 | /dist-server
6 | /tmp
7 | /out-tsc
8 |
9 | # dependencies
10 | /node_modules
11 |
12 | # IDEs and editors
13 | /.idea
14 | .project
15 | .classpath
16 | .c9/
17 | *.launch
18 | .settings/
19 | *.sublime-workspace
20 |
21 | # IDE - VSCode
22 | .vscode/*
23 | !.vscode/settings.json
24 | !.vscode/tasks.json
25 | !.vscode/launch.json
26 | !.vscode/extensions.json
27 |
28 | # misc
29 | /.sass-cache
30 | /connect.lock
31 | /coverage
32 | /libpeerconnection.log
33 | npm-debug.log
34 | yarn-error.log
35 | testem.log
36 | /typings
37 |
38 | # e2e
39 | /e2e/*.js
40 | /e2e/*.map
41 |
42 | # System Files
43 | .DS_Store
44 | Thumbs.db
45 |
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | # Client
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.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/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('client 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 app!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/client/e2e/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/e2e",
5 | "baseUrl": "./",
6 | "module": "commonjs",
7 | "target": "es5",
8 | "types": [
9 | "jasmine",
10 | "jasminewd2",
11 | "node"
12 | ]
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/client/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular/cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular/cli/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | reports: [ 'html', 'lcovonly' ],
20 | fixWebpackSourcePaths: true
21 | },
22 | angularCli: {
23 | environment: 'dev'
24 | },
25 | reporters: ['progress', 'kjhtml'],
26 | port: 9876,
27 | colors: true,
28 | logLevel: config.LOG_INFO,
29 | autoWatch: true,
30 | browsers: ['Chrome'],
31 | singleRun: false
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "ng",
7 | "start": "ng serve",
8 | "build": "ng build --prod",
9 | "test": "ng test",
10 | "lint": "ng lint",
11 | "e2e": "ng e2e"
12 | },
13 | "private": true,
14 | "dependencies": {
15 | "@angular/animations": "^5.2.0",
16 | "@angular/cdk": "^5.2.4",
17 | "@angular/common": "^5.2.0",
18 | "@angular/compiler": "^5.2.0",
19 | "@angular/core": "^5.2.0",
20 | "@angular/forms": "^5.2.0",
21 | "@angular/http": "^5.2.0",
22 | "@angular/material": "^5.2.4",
23 | "@angular/platform-browser": "^5.2.0",
24 | "@angular/platform-browser-dynamic": "^5.2.0",
25 | "@angular/router": "^5.2.0",
26 | "@okta/okta-angular": "^1.0.0",
27 | "core-js": "^2.4.1",
28 | "rxjs": "^5.5.6",
29 | "zone.js": "^0.8.19"
30 | },
31 | "devDependencies": {
32 | "@angular/cli": "~1.7.4",
33 | "@angular/compiler-cli": "^5.2.0",
34 | "@angular/language-service": "^5.2.0",
35 | "@types/jasmine": "~2.8.3",
36 | "@types/jasminewd2": "~2.0.2",
37 | "@types/node": "~6.0.60",
38 | "codelyzer": "^4.0.1",
39 | "jasmine-core": "~2.8.0",
40 | "jasmine-spec-reporter": "~4.2.1",
41 | "karma": "~2.0.0",
42 | "karma-chrome-launcher": "~2.2.0",
43 | "karma-coverage-istanbul-reporter": "^1.2.1",
44 | "karma-jasmine": "~1.1.0",
45 | "karma-jasmine-html-reporter": "^0.2.2",
46 | "protractor": "~5.1.2",
47 | "ts-node": "~4.1.0",
48 | "tslint": "~5.9.1",
49 | "typescript": "~2.5.3"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/client/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 | './e2e/**/*.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: 'e2e/tsconfig.e2e.json'
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/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 { AppComponent } from './app.component';
3 | describe('AppComponent', () => {
4 | beforeEach(async(() => {
5 | TestBed.configureTestingModule({
6 | declarations: [
7 | AppComponent
8 | ],
9 | }).compileComponents();
10 | }));
11 | it('should create the app', async(() => {
12 | const fixture = TestBed.createComponent(AppComponent);
13 | const app = fixture.debugElement.componentInstance;
14 | expect(app).toBeTruthy();
15 | }));
16 | it(`should have as title 'app'`, async(() => {
17 | const fixture = TestBed.createComponent(AppComponent);
18 | const app = fixture.debugElement.componentInstance;
19 | expect(app.title).toEqual('app');
20 | }));
21 | it('should render title in a h1 tag', async(() => {
22 | const fixture = TestBed.createComponent(AppComponent);
23 | fixture.detectChanges();
24 | const compiled = fixture.debugElement.nativeElement;
25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
26 | }));
27 | });
28 |
--------------------------------------------------------------------------------
/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 = 'app';
11 | isAuthenticated: boolean;
12 |
13 | constructor(private 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 { AppComponent } from './app.component';
5 | import { CarService } from './shared/car/car.service';
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 { GiphyService } from './shared/giphy/giphy.service';
11 | import { CarEditComponent } from './car-edit/car-edit.component';
12 | import { RouterModule, Routes } from '@angular/router';
13 | import { FormsModule } from '@angular/forms';
14 | import { OktaAuthModule, OktaCallbackComponent } from '@okta/okta-angular';
15 | import { AuthInterceptor } from './shared/okta/auth.interceptor';
16 | import { HomeComponent } from './home/home.component';
17 |
18 | const appRoutes: Routes = [
19 | {path: '', redirectTo: '/home', pathMatch: 'full'},
20 | {
21 | path: 'home',
22 | component: HomeComponent
23 | },
24 | {
25 | path: 'car-list',
26 | component: CarListComponent
27 | },
28 | {
29 | path: 'car-add',
30 | component: CarEditComponent
31 | },
32 | {
33 | path: 'car-edit/:id',
34 | component: CarEditComponent
35 | },
36 | {
37 | path: 'implicit/callback',
38 | component: OktaCallbackComponent
39 | }
40 | ];
41 |
42 | const config = {
43 | issuer: 'https://dev-158606.oktapreview.com/oauth2/default',
44 | redirectUri: 'http://localhost:4200/implicit/callback',
45 | clientId: '0oae8qa23sL5AmNXq0h7'
46 | };
47 |
48 | @NgModule({
49 | declarations: [
50 | AppComponent,
51 | CarListComponent,
52 | CarEditComponent,
53 | HomeComponent
54 | ],
55 | imports: [
56 | BrowserModule,
57 | HttpClientModule,
58 | BrowserAnimationsModule,
59 | MatButtonModule,
60 | MatCardModule,
61 | MatInputModule,
62 | MatListModule,
63 | MatToolbarModule,
64 | FormsModule,
65 | RouterModule.forRoot(appRoutes),
66 | OktaAuthModule.initAuth(config)
67 | ],
68 | providers: [CarService, GiphyService,
69 | {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}],
70 | bootstrap: [AppComponent]
71 | })
72 | export class AppModule { }
73 |
--------------------------------------------------------------------------------
/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/Subscription';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 | import { CarService } from '../shared/car/car.service';
5 | import { GiphyService } from '../shared/giphy/giphy.service';
6 | import { NgForm } from '@angular/forms';
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-5-example/1d37c959c4f77f22a7cb48c76a2ac43de2e3b9d3/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 |