├── .angular-cli.json ├── .gitignore ├── .snyk ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── e2e ├── app.e2e-spec.ts ├── app.po.ts └── tsconfig.e2e.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── app.routing.ts │ ├── dashboard │ │ ├── dashboard.component.html │ │ ├── dashboard.component.scss │ │ ├── dashboard.component.spec.ts │ │ └── dashboard.component.ts │ ├── guards │ │ ├── auth.guard.ts │ │ └── level0.guard.ts │ ├── interfaces │ │ └── user.interface.ts │ ├── layouts │ │ ├── full-layout.component.html │ │ └── full-layout.component.ts │ ├── pages │ │ ├── 404.component.html │ │ ├── 404.component.ts │ │ ├── 500.component.html │ │ ├── 500.component.ts │ │ ├── login.component.html │ │ ├── login.component.ts │ │ ├── pages-routing.module.ts │ │ ├── pages.module.ts │ │ ├── register.component.html │ │ └── register.component.ts │ └── providers │ │ ├── http │ │ ├── http-client.service.ts │ │ └── token.decorator.ts │ │ ├── logging │ │ ├── global-error.service.ts │ │ └── logging.service.ts │ │ └── user │ │ └── user.service.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── scss │ ├── _bootstrap-variables.scss │ ├── _custom-variables.scss │ ├── _custom.scss │ ├── bootstrap │ │ ├── .scss-lint.yml │ │ ├── _alert.scss │ │ ├── _badge.scss │ │ ├── _breadcrumb.scss │ │ ├── _button-group.scss │ │ ├── _buttons.scss │ │ ├── _card.scss │ │ ├── _carousel.scss │ │ ├── _close.scss │ │ ├── _code.scss │ │ ├── _custom-forms.scss │ │ ├── _custom.scss │ │ ├── _dropdown.scss │ │ ├── _forms.scss │ │ ├── _grid.scss │ │ ├── _images.scss │ │ ├── _input-group.scss │ │ ├── _jumbotron.scss │ │ ├── _list-group.scss │ │ ├── _media.scss │ │ ├── _mixins.scss │ │ ├── _modal.scss │ │ ├── _nav.scss │ │ ├── _navbar.scss │ │ ├── _normalize.scss │ │ ├── _pagination.scss │ │ ├── _popover.scss │ │ ├── _print.scss │ │ ├── _progress.scss │ │ ├── _reboot.scss │ │ ├── _responsive-embed.scss │ │ ├── _tables.scss │ │ ├── _tooltip.scss │ │ ├── _transitions.scss │ │ ├── _type.scss │ │ ├── _utilities.scss │ │ ├── _variables.scss │ │ ├── bootstrap-grid.scss │ │ ├── bootstrap-reboot.scss │ │ ├── bootstrap.scss │ │ ├── mixins │ │ │ ├── _alert.scss │ │ │ ├── _background-variant.scss │ │ │ ├── _badge.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _breakpoints.scss │ │ │ ├── _buttons.scss │ │ │ ├── _cards.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _float.scss │ │ │ ├── _forms.scss │ │ │ ├── _gradients.scss │ │ │ ├── _grid-framework.scss │ │ │ ├── _grid.scss │ │ │ ├── _hover.scss │ │ │ ├── _image.scss │ │ │ ├── _list-group.scss │ │ │ ├── _lists.scss │ │ │ ├── _nav-divider.scss │ │ │ ├── _navbar-align.scss │ │ │ ├── _pagination.scss │ │ │ ├── _reset-text.scss │ │ │ ├── _resize.scss │ │ │ ├── _screen-reader.scss │ │ │ ├── _size.scss │ │ │ ├── _table-row.scss │ │ │ ├── _text-emphasis.scss │ │ │ ├── _text-hide.scss │ │ │ ├── _text-truncate.scss │ │ │ ├── _transforms.scss │ │ │ └── _visibility.scss │ │ └── utilities │ │ │ ├── _align.scss │ │ │ ├── _background.scss │ │ │ ├── _borders.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _display.scss │ │ │ ├── _flex.scss │ │ │ ├── _float.scss │ │ │ ├── _position.scss │ │ │ ├── _screenreaders.scss │ │ │ ├── _sizing.scss │ │ │ ├── _spacing.scss │ │ │ ├── _text.scss │ │ │ └── _visibility.scss │ └── style.scss ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── typings.d.ts ├── tsconfig.json └── tslint.json /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "angular5-starter" 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 | "scss/style.scss" 23 | ], 24 | "scripts": [ 25 | "../node_modules/chart.js/dist/Chart.bundle.min.js", 26 | "../node_modules/chart.js/dist/Chart.min.js" 27 | ], 28 | "environmentSource": "environments/environment.ts", 29 | "environments": { 30 | "dev": "environments/environment.ts", 31 | "prod": "environments/environment.prod.ts" 32 | } 33 | } 34 | ], 35 | "e2e": { 36 | "protractor": { 37 | "config": "./protractor.conf.js" 38 | } 39 | }, 40 | "lint": [ 41 | { 42 | "project": "src/tsconfig.app.json", 43 | "exclude": "**/node_modules/**" 44 | }, 45 | { 46 | "project": "src/tsconfig.spec.json", 47 | "exclude": "**/node_modules/**" 48 | }, 49 | { 50 | "project": "e2e/tsconfig.e2e.json", 51 | "exclude": "**/node_modules/**" 52 | } 53 | ], 54 | "test": { 55 | "karma": { 56 | "config": "./karma.conf.js" 57 | } 58 | }, 59 | "defaults": { 60 | "styleExt": "scss", 61 | "prefixInterfaces": false, 62 | "class": { 63 | "spec": false 64 | }, 65 | "component": {} 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /.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 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | # System Files 41 | .DS_Store 42 | Thumbs.db 43 | package-lock.json -------------------------------------------------------------------------------- /.snyk: -------------------------------------------------------------------------------- 1 | # Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities. 2 | version: v1.8.0 3 | ignore: {} 4 | # patches apply the minimum changes required to fix a vulnerability 5 | patch: 6 | 'npm:moment:20170905': 7 | - chart.js > moment: 8 | patched: '2017-11-30T23:56:09.848Z' 9 | - ng2-charts > chart.js > moment: 10 | patched: '2017-11-30T23:56:09.848Z' 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: trusty 3 | 4 | language: node_js 5 | node_js: 6 | - '8' 7 | 8 | install: 9 | - export DISPLAY=:99.0 10 | - sh -e /etc/init.d/xvfb start 11 | - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - 12 | - sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list' 13 | - sudo apt-get update -q 14 | - sudo apt-get install -q google-chrome-stable 15 | 16 | before_script: 17 | - npm install 18 | 19 | script: 20 | - npm run build -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at opensource@naologic.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute 2 | 3 | I'm really glad you're reading this, because we need volunteer developers to help this project come to fruition. 4 | 5 | Here are some important resources: 6 | 7 | * [Naologic for Developers](http://naologic.com) tells you where we are, 8 | * [All the org](https://github.com/naologic) some other open source resources 9 | * [Bugs?](https://github.com/naologic/angular5-starter/issues) is where to report them 10 | 11 | ## Testing 12 | 13 | Please test the code and submit with unit tests. I know, it takes time to write them and nobody really likes it 14 | but it's necessary to give everybody good code. 15 | 16 | ## Submitting changes 17 | 18 | Please send a [GitHub Pull Request to noalogic](https://github.com/naologic/angular5-starter/pull/new/master) 19 | with a clear list of what you've done (read more about [pull requests](http://help.github.com/pull-requests/)). 20 | When you send a pull request, we will love you forever if you include RSpec examples. 21 | We can always use more test coverage. 22 | Please follow our coding conventions (below) and make sure all of your commits are atomic (one feature per commit). 23 | 24 | Always write a clear log message for your commits. One-line messages are fine for small changes, 25 | but bigger changes should look like this: 26 | 27 | $ git commit -m "A brief summary of the commit 28 | > 29 | > A paragraph describing what changed and its impact." 30 | 31 | ## Coding conventions 32 | 33 | Start reading our code and you'll get the hang of it. We optimize for readability: 34 | 35 | * We indent using 4 spaces (soft tabs) 36 | * We avoid logic in views, putting HTML generators into helpers 37 | * We ALWAYS put spaces after list items and method parameters (`[1, 2, 3]`, not `[1,2,3]`), around operators (`x += 1`, not `x+=1`), and around hash arrows. 38 | * This is open source software. Consider the people who will read your code, and make it look nice for them. It's sort of like driving a car: Perhaps you love doing donuts when you're alone, but with passengers the goal is to make the ride as smooth as possible. 39 | * So that we can consistently serve images from the CDN, always use image_path or image_tag when referring to images. Never prepend "/images/" when using image_path or image_tag. 40 | * Also for the CDN, always use cwd-relative paths rather than root-relative paths in image URLs in any CSS. So instead of url('/images/blah.gif'), use url('../images/blah.gif'). 41 | 42 | Thanks, 43 | Gabriel 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Gabriel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular5 Starter 2 | [![Build Status](https://travis-ci.org/naologic/angular5-starter.svg?branch=master)](https://travis-ci.org/naologic/angular5-starter) 3 | [![Known Vulnerabilities](https://snyk.io/test/github/naologic/angular5-starter/badge.svg)](https://snyk.io/test/github/naologic/angular5-starter) 4 | 5 | _This project is a starter pack with Angular5 for different projects_ 6 | 7 | ## Development server 8 | 9 | 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. 10 | 11 | ## Code scaffolding 12 | 13 | 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`. 14 | 15 | ## Build 16 | 17 | 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. 18 | 19 | ## Running unit tests 20 | 21 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 22 | 23 | ## Running end-to-end tests 24 | 25 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 26 | 27 | Made with :green_heart: in London :uk: -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('ng4fbbootstrap 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | "sourceMap": true, 9 | "declaration": false, 10 | "moduleResolution": "node", 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "types": [ 14 | "jasmine", 15 | "jasminewd2", 16 | "node" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular5-starter", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e", 12 | "test-single-run": "karma start karma.conf.js --single-run", 13 | "snyk-protect": "snyk protect", 14 | "prepublish": "npm run snyk-protect" 15 | }, 16 | "private": true, 17 | "dependencies": { 18 | "@angular/animations": "^5.0.2", 19 | "@angular/common": "^5.0.2", 20 | "@angular/compiler": "^5.0.2", 21 | "@angular/core": "^5.0.2", 22 | "@angular/forms": "^5.0.2", 23 | "@angular/http": "^5.0.2", 24 | "@angular/platform-browser": "^5.0.2", 25 | "@angular/platform-browser-dynamic": "^5.0.2", 26 | "@angular/router": "^5.0.2", 27 | "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", 28 | "@types/moment-timezone": "^0.5.1", 29 | "angular-super-validator": "^1.0.4", 30 | "angular2-toaster": "^4.0.1", 31 | "angularfire2": "^5.0.0-rc.2", 32 | "bootstrap": "^4.0.0-beta.2", 33 | "chart.js": "^2.7.1", 34 | "core-js": "^2.4.1", 35 | "d3": "^4.11.0", 36 | "dragula": "^3.7.2", 37 | "firebase": "^5.0.3", 38 | "lodash": "^4.17.4", 39 | "moment": "^2.19.2", 40 | "moment-timezone": "^0.5.14", 41 | "ng2-charts": "^1.6.0", 42 | "ngx-bootstrap": "^1.9.3", 43 | "popper.js": "^1.12.9", 44 | "rxjs": "^5.5.2", 45 | "stacktrace-js": "^2.0.0", 46 | "zone.js": "^0.8.14", 47 | "snyk": "^1.52.1" 48 | }, 49 | "devDependencies": { 50 | "@angular/cli": "^1.5.2", 51 | "@angular/compiler-cli": "^5.0.2", 52 | "@angular/language-service": "^5.0.2", 53 | "@types/jasmine": "^2.8.2", 54 | "@types/jasminewd2": "~2.0.2", 55 | "@types/node": "^8.0.53", 56 | "codelyzer": "^4.0.1", 57 | "jasmine-core": "^2.8.0", 58 | "jasmine-spec-reporter": "^4.2.1", 59 | "karma": "~1.7.0", 60 | "karma-chrome-launcher": "^2.2.0", 61 | "karma-cli": "~1.0.1", 62 | "karma-coverage-istanbul-reporter": "^1.2.1", 63 | "karma-jasmine": "~1.1.0", 64 | "karma-jasmine-html-reporter": "^0.2.2", 65 | "protractor": "^5.2.0", 66 | "ts-node": "^3.3.0", 67 | "tslint": "^5.8.0", 68 | "typescript": "^2.6.1" 69 | }, 70 | "snyk": true 71 | } 72 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naologic/angular5-starter/dbb64b547987800eb37bef37b15e398195695eaf/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | Welcome to {{title}}! 5 |

6 | 7 |
8 |

Here are some links to help you start:

9 | 20 | 21 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'body', 5 | template: '' 6 | }) 7 | export class AppComponent { 8 | public menu = []; 9 | title = 'app'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { ErrorHandler, Injector, NgModule} from '@angular/core'; 3 | import { Router } from '@angular/router'; 4 | import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; 5 | import { FormsModule, ReactiveFormsModule} from '@angular/forms'; 6 | import { HttpClientModule, HttpHandler} from '@angular/common/http'; 7 | import { HashLocationStrategy, LocationStrategy} from '@angular/common'; 8 | import { AppComponent } from './app.component'; 9 | import { ToasterModule, ToasterService} from 'angular2-toaster'; 10 | import { FullLayoutComponent } from './layouts/full-layout.component'; 11 | import { AppRoutingModule } from './app.routing'; 12 | import { Level0Guard } from './guards/level0.guard'; 13 | import { UserService } from './providers/user/user.service'; 14 | import { AuthGuard } from './guards/auth.guard'; 15 | import {environment} from "../environments/environment"; 16 | import { HttpClientService } from './providers/http/http-client.service'; 17 | import { DashboardComponent } from './dashboard/dashboard.component'; 18 | import { GlobalErrorHandler } from "./providers/logging/global-error.service"; 19 | 20 | 21 | const GUARDS = [ 22 | { 23 | provide: 'Level0Guard', 24 | useClass: Level0Guard 25 | }, 26 | { 27 | provide: 'AuthGuard', 28 | useClass: AuthGuard, 29 | deps: [UserService, Router] 30 | } 31 | ]; 32 | 33 | 34 | @NgModule({ 35 | declarations: [ 36 | AppComponent, 37 | FullLayoutComponent, 38 | DashboardComponent 39 | ], 40 | imports: [ 41 | BrowserModule, 42 | BrowserAnimationsModule, 43 | HttpClientModule, 44 | FormsModule, 45 | ReactiveFormsModule, 46 | ToasterModule, 47 | AppRoutingModule 48 | ], 49 | providers: [ 50 | { 51 | provide: 'APIConfig', 52 | useValue: environment.API 53 | }, 54 | { 55 | provide: ErrorHandler, 56 | useClass: GlobalErrorHandler 57 | }, 58 | { 59 | provide: LocationStrategy, 60 | useClass: HashLocationStrategy 61 | }, 62 | { 63 | provide: HttpClientService, 64 | useFactory: httpFactory, 65 | deps: [HttpHandler] 66 | }, 67 | ToasterService, 68 | UserService, 69 | ...GUARDS 70 | ], 71 | bootstrap: [ 72 | AppComponent 73 | ] 74 | }) 75 | export class AppModule { } 76 | 77 | export function httpFactory (httpHandler: HttpHandler, i: Injector) { 78 | return new HttpClientService(httpHandler, i); 79 | } 80 | -------------------------------------------------------------------------------- /src/app/app.routing.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { FullLayoutComponent } from './layouts/full-layout.component'; 4 | import { Level0Guard } from './guards/level0.guard'; 5 | import { DashboardComponent } from './dashboard/dashboard.component'; 6 | 7 | export const routes: Routes = [{ 8 | path: '', 9 | redirectTo: 'dashboard', 10 | pathMatch: 'full' 11 | }, 12 | { 13 | path: '', 14 | component: FullLayoutComponent, 15 | data: { 16 | title: 'Home' 17 | }, 18 | children: [ 19 | { 20 | path: 'dashboard', 21 | component: DashboardComponent, 22 | canLoad: ['Level0Guard', 'AuthGuard'] 23 | } 24 | ] 25 | }, 26 | { 27 | path: '', 28 | loadChildren: './pages/pages.module#PagesModule' 29 | }, 30 | { 31 | path: '**', 32 | redirectTo: '404' 33 | }]; 34 | 35 | @NgModule({ 36 | imports: [RouterModule.forRoot(routes, { useHash: false })], 37 | exports: [RouterModule] 38 | }) 39 | export class AppRoutingModule { } 40 | -------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.html: -------------------------------------------------------------------------------- 1 | 2 |

I am a dashboard

3 | -------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naologic/angular5-starter/dbb64b547987800eb37bef37b15e398195695eaf/src/app/dashboard/dashboard.component.scss -------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | describe('DashboardComponent', () => { 6 | let component: DashboardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ DashboardComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(DashboardComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dashboard', 5 | templateUrl: './dashboard.component.html', 6 | styleUrls: ['./dashboard.component.scss'] 7 | }) 8 | export class DashboardComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/guards/auth.guard.ts: -------------------------------------------------------------------------------- 1 | import { ActivatedRouteSnapshot, CanActivate, CanLoad, Route, Router, RouterStateSnapshot} from '@angular/router'; 2 | import { Observable } from 'rxjs/Observable'; 3 | import { UserService } from '../providers/user/user.service'; 4 | 5 | 6 | 7 | export class AuthGuard implements CanLoad, CanActivate { 8 | constructor( 9 | private user: UserService, 10 | private router: Router 11 | ) {} 12 | 13 | canActivate( 14 | route: ActivatedRouteSnapshot, 15 | state: RouterStateSnapshot 16 | ): Observable | Promise | boolean { 17 | if (this.user.hasTokenFake) 18 | return true; 19 | else { 20 | this.router.navigate(['login']); 21 | return false; 22 | } 23 | } 24 | 25 | canLoad(route: Route): Observable | Promise | boolean { 26 | if (this.user.hasTokenFake) 27 | return true; 28 | else { 29 | this.router.navigate(['login']); 30 | return false; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/guards/level0.guard.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { ActivatedRouteSnapshot, CanActivate, CanLoad, Route, RouterStateSnapshot} from '@angular/router'; 3 | import { Observable } from 'rxjs/Observable'; 4 | 5 | /** 6 | * Level0Guard is the mandatory top level guard for all the application 7 | * -- any root route should be checked against leve0 8 | * -- for custom roles (teams etc) add extra guards 9 | */ 10 | 11 | @Injectable() 12 | export class Level0Guard implements CanLoad, CanActivate { 13 | constructor() {} 14 | 15 | canActivate( 16 | route: ActivatedRouteSnapshot, 17 | state: RouterStateSnapshot 18 | ): Observable | Promise | boolean { 19 | return Promise.resolve(true); 20 | } 21 | 22 | canLoad(route: Route): Observable | Promise | boolean { 23 | return Promise.resolve(true); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/app/interfaces/user.interface.ts: -------------------------------------------------------------------------------- 1 | import {FormControl, FormGroup, Validators} from '@angular/forms'; 2 | 3 | export namespace UserInterface { 4 | export interface User { 5 | name: string; 6 | } 7 | export interface Login { 8 | username: string; 9 | password: string; 10 | } 11 | export interface Token { 12 | '.expires': string; 13 | '.issued': string; 14 | access_token: string; 15 | expires_in: number; 16 | refresh_token: string; 17 | token_type: 'bearer'; 18 | } 19 | export interface TokenInfo { 20 | hasToken: boolean; 21 | } 22 | export function newLoginForm(): FormGroup { 23 | return new FormGroup({ 24 | username: new FormControl('', [Validators.required, Validators.minLength(4), Validators.email]), 25 | password: new FormControl('', [Validators.required, Validators.minLength(4), Validators.maxLength(24)]) 26 | }); 27 | } 28 | } -------------------------------------------------------------------------------- /src/app/layouts/full-layout.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 | 43 | -------------------------------------------------------------------------------- /src/app/layouts/full-layout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ToasterService} from 'angular2-toaster'; 3 | import { Observable } from 'rxjs/Observable'; 4 | import 'rxjs/add/observable/of'; 5 | import 'rxjs/add/observable/merge'; 6 | import 'rxjs/add/observable/fromEvent'; 7 | import 'rxjs/add/operator/mapTo'; 8 | 9 | 10 | @Component({ 11 | selector: 'app-dashboard', 12 | templateUrl: './full-layout.component.html' 13 | }) 14 | export class FullLayoutComponent { 15 | public subscriptions = { online: null, userData: null }; 16 | public status: { isopen: boolean, online: boolean } = { isopen: false, online: true }; 17 | 18 | constructor( 19 | private toasterService: ToasterService 20 | ) { 21 | // -->Network: detect 22 | this.subscriptions.online = Observable.merge( 23 | Observable.of(navigator.onLine), 24 | Observable.fromEvent(window, 'online').mapTo(true), 25 | Observable.fromEvent(window, 'offline').mapTo(false) 26 | ).subscribe(on => { 27 | // -->Show: notification 28 | if (this.status.online === true && on === false) 29 | this.toasterService.pop('warning', 'Warning', 'Lost Connection'); 30 | if (this.status.online === false && on) 31 | this.toasterService.pop('info', 'Internet', 'Connection OK'); 32 | 33 | // -->Set: status 34 | this.status.online = on; 35 | }); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/app/pages/404.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

404

7 |

Oops! You're lost.

8 |

The page you are looking for was not found.

9 |
10 |
11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |
20 |
-------------------------------------------------------------------------------- /src/app/pages/404.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: '404.component.html' 5 | }) 6 | export class p404Component { 7 | 8 | constructor() { } 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/500.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

500

7 |

Houston, we have a problem!

8 |

The page you are looking for is temporarily unavailable.

9 |
10 |
11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |
20 |
-------------------------------------------------------------------------------- /src/app/pages/500.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: '500.component.html' 5 | }) 6 | export class p500Component { 7 | 8 | constructor() { } 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/login.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |

Login

10 |

Sign In to your account

11 |
12 | 13 | 14 |
15 |
16 |
17 |
Username is required.
18 |
Username must be at least {{ username.errors.minlength.requiredLength }} characters long.
19 |
Invalid email format
20 |
21 |
22 |
23 | 24 | 25 |
26 |
27 |
28 |
Password is required.
29 |
Password must be at least {{ password.errors.minlength.requiredLength }} characters long.
30 |
Password must be maximum {{ password.errors.maxlength.requiredLength }} characters long.
31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |

Sign up

47 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
-------------------------------------------------------------------------------- /src/app/pages/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormControl, FormGroup} from '@angular/forms'; 3 | import { SuperForm } from 'angular-super-validator'; 4 | import { UserInterface } from '../interfaces/user.interface'; 5 | import { HttpClientService } from '../providers/http/http-client.service'; 6 | import { Router } from '@angular/router'; 7 | 8 | @Component({ 9 | templateUrl: 'login.component.html' 10 | }) 11 | export class LoginComponent { 12 | public formGroup: FormGroup; 13 | 14 | get username(): FormControl { return this.formGroup.get('username') as FormControl; } 15 | get password(): FormControl { return this.formGroup.get('password') as FormControl; } 16 | 17 | constructor( 18 | private http: HttpClientService, 19 | private router: Router 20 | ) { 21 | this.formGroup = UserInterface.newLoginForm(); 22 | } 23 | 24 | /** 25 | * Login with current user/pass 26 | */ 27 | public login(): void { 28 | 29 | if (this.formGroup.valid) { 30 | this.formGroup.disable(); 31 | // -->Set: data 32 | const data = this.formGroup.getRawValue(); 33 | data.grant_type = 'password'; 34 | 35 | this.http.login(data) 36 | .subscribe(ok => { 37 | 38 | this.router.navigate(['/dashboard']); 39 | 40 | }, err => { 41 | console.error('error', err); 42 | setTimeout(() => { this.formGroup.enable(); }, 1500); 43 | }); 44 | } else { 45 | const errors = SuperForm.getAllErrorsFlat(this.formGroup); 46 | console.error(errors); 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/app/pages/pages-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { p404Component } from './404.component'; 5 | import { p500Component } from './500.component'; 6 | import { LoginComponent } from './login.component'; 7 | import { RegisterComponent } from './register.component'; 8 | 9 | const routes: Routes = [ 10 | { 11 | path: '', 12 | data: { 13 | title: 'Example Pages' 14 | }, 15 | children: [ 16 | { 17 | path: '404', 18 | component: p404Component, 19 | data: { 20 | title: 'Page 404' 21 | } 22 | }, 23 | { 24 | path: '500', 25 | component: p500Component, 26 | data: { 27 | title: 'Page 500' 28 | } 29 | }, 30 | { 31 | path: 'login', 32 | component: LoginComponent, 33 | data: { 34 | title: 'Login Page' 35 | } 36 | }, 37 | { 38 | path: 'register', 39 | component: RegisterComponent, 40 | data: { 41 | title: 'Register Page' 42 | } 43 | } 44 | ] 45 | } 46 | ]; 47 | 48 | @NgModule({ 49 | imports: [RouterModule.forChild(routes)], 50 | exports: [RouterModule] 51 | }) 52 | export class PagesRoutingModule {} 53 | -------------------------------------------------------------------------------- /src/app/pages/pages.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { p404Component } from './404.component'; 6 | import { p500Component } from './500.component'; 7 | import { LoginComponent } from './login.component'; 8 | import { RegisterComponent } from './register.component'; 9 | 10 | import { PagesRoutingModule } from './pages-routing.module'; 11 | import { HttpClientService } from '../providers/http/http-client.service'; 12 | import { UserService } from '../providers/user/user.service'; 13 | 14 | @NgModule({ 15 | imports: [ 16 | CommonModule, 17 | PagesRoutingModule, 18 | FormsModule, 19 | ReactiveFormsModule 20 | ], 21 | declarations: [ 22 | p404Component, 23 | p500Component, 24 | LoginComponent, 25 | RegisterComponent 26 | ], 27 | providers: [ 28 | HttpClientService, 29 | UserService 30 | ] 31 | }) 32 | export class PagesModule { } 33 | -------------------------------------------------------------------------------- /src/app/pages/register.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |

Register

8 |

Create your account

9 |
10 | 11 | 12 |
13 | 14 |
15 | @ 16 | 17 |
18 | 19 |
20 | 21 | 22 |
23 | 24 |
25 | 26 | 27 |
28 | 29 | 30 |
31 |
32 |
33 |
34 | 35 |
36 |
37 | 38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
-------------------------------------------------------------------------------- /src/app/pages/register.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'register.component.html' 5 | }) 6 | export class RegisterComponent { 7 | 8 | constructor() { } 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/providers/http/http-client.service.ts: -------------------------------------------------------------------------------- 1 | import { Inject, Injectable } from '@angular/core'; 2 | import { Observable } from 'rxjs/Observable'; 3 | import { isArray, isPlainObject } from 'lodash'; 4 | import { UserInterface } from '../../interfaces/user.interface'; 5 | import { HttpClient, HttpHandler, HttpHeaders, HttpParams } from '@angular/common/http'; 6 | import { JsonLocalStorage } from './token.decorator'; 7 | import 'rxjs/add/operator/map'; 8 | import 'rxjs/add/operator/catch'; 9 | import 'rxjs/add/observable/of'; 10 | import 'rxjs/add/operator/first'; 11 | 12 | export interface HttpOptions { 13 | headers?: HttpHeaders | { 14 | [header: string]: string | string[]; 15 | }; 16 | observe: 'body'; 17 | params?: HttpParams | { 18 | [param: string]: string | string[]; 19 | }; 20 | reportProgress?: boolean; 21 | responseType?: 'json'; 22 | withCredentials?: boolean; 23 | } 24 | 25 | @Injectable() 26 | export class HttpClientService extends HttpClient { 27 | @JsonLocalStorage 28 | private token: UserInterface.Token; 29 | @JsonLocalStorage 30 | private tokenInfo: UserInterface.TokenInfo; 31 | 32 | get getTokenInfo(): UserInterface.TokenInfo { return this.tokenInfo; } 33 | get hasToken(): boolean { return this.tokenInfo.hasToken; } 34 | get getToken(): UserInterface.Token { return this.token; } 35 | 36 | constructor( 37 | handler: HttpHandler, 38 | @Inject('APIConfig') private APIConfig 39 | ) { 40 | super(handler); 41 | } 42 | 43 | /** -------------------------------- 44 | * Standard HTTP requests 45 | * -------------------------------- 46 | */ 47 | public getJson(uri: string): Observable { 48 | return super.get(this.getUrl(uri), this.getOptions()); 49 | } 50 | 51 | public postJSON(uri: string, data: Object): Observable { 52 | return super.post(this.getUrl(uri), data, this.getOptions()); 53 | } 54 | 55 | public putJson(uri: string, data: Object): Observable { 56 | return super.put(this.getUrl(uri), data, this.getOptions()); 57 | } 58 | 59 | public patchJson(uri: string, data: any): Observable { 60 | return super.patch(this.getUrl(uri), data, this.getOptions()); 61 | } 62 | 63 | public headJson(uri: string): Observable { 64 | return super.head(this.getUrl(uri), this.getOptions()); 65 | } 66 | 67 | public deleteJson(uri: string): Observable { 68 | return super.delete(this.getUrl(uri), this.getOptions()); 69 | } 70 | 71 | public optionsJson(uri: string): Observable { 72 | return super.options(this.getUrl(uri), this.getOptions()); 73 | } 74 | 75 | /** -------------------------------- 76 | * Custom HTTP requests 77 | * -------------------------------- 78 | */ 79 | 80 | /** 81 | * Submit the token form and recover the auth 82 | * 83 | * @param {UserInterface.Login} data 84 | * @returns {Observable} 85 | */ 86 | public login(data: UserInterface.Login): Observable { 87 | // -->Set: headers 88 | let params = new HttpParams(); 89 | params = params.append('username', data.username); 90 | params = params.append('password', data.password); 91 | 92 | let headers = new HttpHeaders(); 93 | headers = headers.append('Content-Type', 'application/x-www-form-urlencoded'); 94 | 95 | const options = { 96 | headers: headers, 97 | params: {}, 98 | observe: 'body', 99 | reportProgress: true, 100 | responseType: 'json', 101 | withCredentials: true, 102 | }; 103 | 104 | return super.post( 105 | this.APIConfig.AUTH_API, 106 | params, 107 | options 108 | ) 109 | .map(token => { 110 | // -->Set: token 111 | this.token = token; 112 | 113 | // -->Is: ok? 114 | this.tokenInfo = { 115 | hasToken: true 116 | }; 117 | 118 | // -->Return: token 119 | return token; 120 | }); 121 | } 122 | 123 | /** 124 | * Prepare request url 125 | * 126 | * @param {string} uri 127 | * @returns {string} 128 | */ 129 | private getUrl(uri: string): string { 130 | return this.APIConfig.API + uri; 131 | } 132 | 133 | /** 134 | * Get the HTTP options for the requests 135 | * 136 | * @returns {HttpOptions} 137 | */ 138 | private getOptions(data?) { 139 | let headers = new HttpHeaders(); 140 | headers = headers.append('Authorization', `Bearer ${this.token.access_token}`); 141 | 142 | const options = { 143 | headers: headers, 144 | observe: 'body', 145 | params: (data) ? new HttpParams({ 146 | fromObject: data 147 | }) : new HttpParams(), 148 | reportProgress: true, 149 | responseType: 'json', 150 | withCredentials: true 151 | }; 152 | 153 | return options; 154 | } 155 | } 156 | -------------------------------------------------------------------------------- /src/app/providers/http/token.decorator.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * LocalStorage for storing string values 3 | */ 4 | export function LocalStorage( 5 | target: Object, // The prototype of the class 6 | decoratedPropertyName: string // The name of the property 7 | ) { 8 | 9 | // get and set methods 10 | Object.defineProperty(target, decoratedPropertyName, { 11 | get: function () { 12 | return localStorage.getItem(decoratedPropertyName) || ''; 13 | }, 14 | set: function (newValue) { 15 | localStorage.setItem(decoratedPropertyName, newValue); 16 | } 17 | }); 18 | } 19 | 20 | /** 21 | * LocalStorage for storing string values 22 | */ 23 | export function JsonLocalStorage( 24 | target: Object, // The prototype of the class 25 | decoratedPropertyName: string // The name of the property 26 | ) { 27 | 28 | // get and set methods 29 | Object.defineProperty(target, decoratedPropertyName, { 30 | get: function () { 31 | return JSON.parse(localStorage.getItem(decoratedPropertyName)) || ''; 32 | }, 33 | set: function (newValue) { 34 | localStorage.setItem(decoratedPropertyName, JSON.stringify(newValue)); 35 | } 36 | }); 37 | } 38 | 39 | 40 | /** 41 | * SessionStorage for storing string values 42 | */ 43 | export function SessionStorage( 44 | target: Object, // The prototype of the class 45 | decoratedPropertyName: string // The name of the property 46 | ) { 47 | 48 | // get and set methods 49 | Object.defineProperty(target, decoratedPropertyName, { 50 | get: function () { 51 | return sessionStorage.getItem(decoratedPropertyName) || ''; 52 | }, 53 | set: function (newValue) { 54 | sessionStorage.setItem(decoratedPropertyName, newValue); 55 | } 56 | }); 57 | } 58 | -------------------------------------------------------------------------------- /src/app/providers/logging/global-error.service.ts: -------------------------------------------------------------------------------- 1 | import { ErrorHandler, Injectable, Injector } from '@angular/core'; 2 | import { LocationStrategy, PathLocationStrategy } from '@angular/common'; 3 | import { LoggingService } from './logging.service'; 4 | import * as StackTrace from 'stacktrace-js'; 5 | 6 | @Injectable() 7 | export class GlobalErrorHandler implements ErrorHandler { 8 | constructor( 9 | private injector: Injector 10 | ) { } 11 | 12 | handleError(error) { 13 | const loggingService = this.injector.get(LoggingService); 14 | const location = this.injector.get(LocationStrategy); 15 | const message = error.message ? error.message : error.toString(); 16 | 17 | const url = location instanceof PathLocationStrategy ? location.path() : ''; 18 | 19 | // get the stack trace, lets grab the last 10 stacks only 20 | StackTrace.fromError(error).then(stackframes => { 21 | const stackString = stackframes 22 | .splice(0, 20) 23 | .map(function(sf) { 24 | return sf.toString(); 25 | }).join('\n'); 26 | 27 | // log on the server 28 | loggingService.error({ message, url, stack: stackString }); 29 | }); 30 | 31 | throw error; 32 | } 33 | 34 | } -------------------------------------------------------------------------------- /src/app/providers/logging/logging.service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from "@angular/core"; 2 | 3 | 4 | export interface ErrorLog { 5 | message: string; 6 | url: string; 7 | stack: string; 8 | } 9 | 10 | @Injectable() 11 | export class LoggingService { 12 | constructor() {} 13 | 14 | /** 15 | * Log the error 16 | * 17 | * @param {string} message 18 | * @param {string} url 19 | * @param {string} stack 20 | */ 21 | public log(error: ErrorLog): void { 22 | console.log(error); 23 | } 24 | 25 | public error(error: ErrorLog): void { 26 | console.error(error); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/app/providers/user/user.service.ts: -------------------------------------------------------------------------------- 1 | import { Inject, Injectable } from '@angular/core'; 2 | import { HttpClientService } from '../http/http-client.service'; 3 | import { AngularFireAuth } from 'angularfire2/auth'; 4 | import * as firebase from 'firebase/app'; 5 | 6 | @Injectable() 7 | export class UserService { 8 | get hasTokenFake(): boolean { return true; } 9 | get currentUser(): firebase.User { return this.afAuth.auth.currentUser; } 10 | get isLoggedIn(): boolean { return !!this.currentUser; } 11 | 12 | constructor( 13 | private http: HttpClientService, 14 | private afAuth: AngularFireAuth, 15 | @Inject('APIConfig') private APIConfig 16 | ) {} 17 | 18 | 19 | /** 20 | * Login with Email 21 | */ 22 | public loginWithEmail(email: string, pass: string): void { 23 | this.afAuth.auth.signInWithEmailAndPassword(email, pass); 24 | } 25 | 26 | /** 27 | * Login with Token 28 | */ 29 | public loginWithToken(token: string): void { 30 | this.afAuth.auth.signInWithCustomToken(token); 31 | } 32 | 33 | /** 34 | * Login with provider 35 | * 36 | * @param {number} provider 37 | */ 38 | public loginWith(provider: number): void { 39 | let p; 40 | switch (provider) { 41 | case 0: 42 | p = new firebase.auth.GoogleAuthProvider(); 43 | break; 44 | case 1: 45 | p = new firebase.auth.FacebookAuthProvider(); 46 | break; 47 | case 2: 48 | p = new firebase.auth.GithubAuthProvider(); 49 | break; 50 | case 3: 51 | p = new firebase.auth.TwitterAuthProvider(); 52 | break; 53 | } 54 | this.afAuth.auth.signInWithPopup(p); 55 | } 56 | 57 | /** 58 | * Create a new user 59 | * 60 | * @param {string} email 61 | * @param {string} password 62 | */ 63 | public createUser(email: string, password: string): void { 64 | this.afAuth.auth.createUserWithEmailAndPassword(email, password); 65 | } 66 | 67 | /** 68 | * Get provider types for this email 69 | * 70 | * @param {string} email 71 | */ 72 | public getProviders(email: string): void { 73 | this.afAuth.auth.fetchProvidersForEmail(email); 74 | } 75 | 76 | /** 77 | * Reset my password 78 | * 79 | * @param {string} email 80 | */ 81 | public passwordReset(email: string): void { 82 | this.afAuth.auth.sendPasswordResetEmail(email, { 83 | url: '/back/to/my/url?' 84 | }); 85 | } 86 | 87 | /** 88 | * Verify the password reset 89 | * 90 | * @param {string} code 91 | */ 92 | public verifyPasswordReset(code: string): void { 93 | this.afAuth.auth.verifyPasswordResetCode(code); 94 | } 95 | 96 | /** 97 | * Logout 98 | */ 99 | public logout(): void { 100 | this.afAuth.auth.signOut(); 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naologic/angular5-starter/dbb64b547987800eb37bef37b15e398195695eaf/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | API: {} 4 | }; 5 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false, 8 | API: {} 9 | }; 10 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naologic/angular5-starter/dbb64b547987800eb37bef37b15e398195695eaf/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular5 Starter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by Angular itself. 59 | */ 60 | import 'zone.js/dist/zone'; // Included with Angular CLI. 61 | 62 | 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | 68 | /** 69 | * Date, currency, decimal and percent pipes. 70 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 71 | */ 72 | // import 'intl'; // Run `npm install --save intl`. 73 | /** 74 | * Need to import at least one locale-data with intl. 75 | */ 76 | // import 'intl/locale-data/jsonp/en'; 77 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-variables.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap overrides 2 | 3 | // Colors 4 | // 5 | // Grayscale and brand colors for use across Bootstrap. 6 | 7 | $gray-dark: #444D58; 8 | $gray: #94A0B2; 9 | $gray-light: #BCC5D0; 10 | $gray-lighter: #E3E8EC; 11 | $gray-lightest: #F1F3F8; 12 | 13 | $brand-primary: #20a8d8; 14 | $brand-success: #4dbd74; 15 | $brand-info: #63c2de; 16 | $brand-warning: #f8cb00; 17 | $brand-danger: #f86c6b; 18 | 19 | // Options 20 | // 21 | // Quickly modify global styling by enabling or disabling optional features. 22 | 23 | $enable-transitions: true; 24 | $enable-rounded: false; 25 | 26 | // Body 27 | // 28 | // Settings for the `` element. 29 | 30 | $body-bg: #EFF3F8; 31 | 32 | // Typography 33 | // 34 | // Font, line-height, and color for body text, headings, and more. 35 | 36 | $font-size-base: 0.875rem; 37 | 38 | // Breadcrumbs 39 | 40 | $breadcrumb-bg: #fff; 41 | $breadcrumb-padding-y: 1rem; 42 | $breadcrumb-padding-x: 1.25rem; 43 | 44 | // Cards 45 | 46 | $card-border-color: $gray-lighter; 47 | $card-cap-bg: #fff; 48 | 49 | // Dropdowns 50 | 51 | $dropdown-padding-y: 0; 52 | $dropdown-border-color: $gray-lighter; 53 | $dropdown-divider-bg: $gray-lightest; 54 | 55 | // Buttons 56 | 57 | $btn-secondary-border: $gray-light; 58 | 59 | // Progress bars 60 | 61 | $progress-bg: $gray-lightest; 62 | 63 | // Tables 64 | 65 | $table-bg-accent: $gray-lighter; 66 | $table-bg-hover: $gray-lighter; 67 | -------------------------------------------------------------------------------- /src/scss/_custom-variables.scss: -------------------------------------------------------------------------------- 1 | // Core Admin Variables 2 | 3 | $enable-sidebar-nav-rounded: false; 4 | 5 | $border-color: $gray-lighter; 6 | $layout-transition-speed: .25s; 7 | 8 | 9 | // Social Colors 10 | 11 | $facebook: #3b5998; 12 | $twitter: #00aced; 13 | $linkedin: #4875b4; 14 | $google-plus: #d34836; 15 | $flickr: #ff0084; 16 | $tumblr: #32506d; 17 | $xing: #026466; 18 | $github: #4183c4; 19 | $html5: #e34f26; 20 | $openid: #f78c40; 21 | $stack-overflow: #fe7a15; 22 | $youtube: #b00; 23 | $css3: #0170ba; 24 | $dribbble: #ea4c89; 25 | $google-plus: #bb4b39; 26 | $instagram: #517fa4; 27 | $pinterest: #cb2027; 28 | $vk: #45668e; 29 | $yahoo: #400191; 30 | $behance: #1769ff; 31 | $dropbox: #007ee5; 32 | $reddit: #ff4500; 33 | $spotify: #7ab800; 34 | $vine: #00bf8f; 35 | $foursquare: #1073af; 36 | $vimeo: #aad450; 37 | 38 | // Navbar 39 | 40 | $navbar-height: 60px; 41 | $navbar-bg: #fff; 42 | $navbar-border: ( 43 | bottom: ( 44 | size: 1px, 45 | style: solid, 46 | color: $border-color 47 | ) 48 | ); 49 | $navbar-brand-width: 220px; 50 | $navbar-brand-bg: #fff; 51 | $navbar-brand-logo: url('../img/color_logo_transparent.svg'); 52 | $navbar-brand-logo-size: 130px auto; 53 | $navbar-brand-border: ( 54 | bottom: ( 55 | size: 1px, 56 | style: solid, 57 | color: $border-color 58 | ) 59 | ); 60 | 61 | $navbar-color: $gray-light; 62 | $navbar-hover-color: $gray; 63 | $navbar-active-color: $gray; 64 | $navbar-disabled-color: $gray-lightest; 65 | 66 | // Sidebar 67 | 68 | $sidebar-width: 220px; 69 | $sidebar-padding: 0; 70 | $sidebar-minimized-width: 50px; 71 | $sidebar-minimized-height: $sidebar-minimized-width; 72 | $sidebar-compact-width: 50px; 73 | $sidebar-compact-height: $sidebar-compact-width; 74 | $sidebar-color: #fff; 75 | $sidebar-bg: $gray-dark; 76 | $sidebar-header-bg: rgba(0,0,0,.2); 77 | $sidebar-footer-bg: rgba(0,0,0,.2); 78 | $sidebar-borders: none; 79 | $mobile-sidebar-width: 200px; 80 | 81 | // Sidebar Navigation 82 | 83 | $sidebar-nav-color: #fff; 84 | $sidebar-nav-title-padding-y: 1rem; 85 | $sidebar-nav-title-padding-x: 1.25rem; 86 | $sidebar-nav-title-color: $gray-lighter; 87 | $sidebar-nav-link-padding-y: 1rem; 88 | $sidebar-nav-link-padding-x: 1.25rem; 89 | $sidebar-nav-link-color: #fff; 90 | $sidebar-nav-link-bg: transparent; 91 | $sidebar-nav-link-icon-color: $text-muted; 92 | 93 | $sidebar-nav-link-borders: 0; 94 | $sidebar-nav-link-hover-color: #fff; 95 | $sidebar-nav-link-hover-bg: $brand-primary; 96 | $sidebar-nav-link-hover-icon-color: #fff !important; 97 | 98 | $sidebar-nav-link-hover-borders: 0; 99 | $sidebar-nav-link-active-color: #fff; 100 | $sidebar-nav-link-active-bg: lighten($sidebar-bg, 5%); 101 | $sidebar-nav-link-active-icon-color: $brand-primary; 102 | 103 | $sidebar-nav-link-active-borders: 0; 104 | 105 | $sidebar-nav-dropdown-color: #fff; 106 | $sidebar-nav-dropdown-bg: rgba(0,0,0,.2); 107 | $sidebar-nav-dropdown-borders: 0; 108 | 109 | // Top Navigation 110 | 111 | $top-nav-bg: #fff; 112 | $top-nav-color: $body-color; 113 | $top-nav-borders: ( 114 | bottom: ( 115 | size: 1px, 116 | style: solid, 117 | color: $border-color 118 | ) 119 | ); 120 | $top-nav-ul-borders: ( 121 | all: ( 122 | size: 1px, 123 | style: solid, 124 | color: $border-color 125 | ) 126 | ); 127 | 128 | $top-nav-hover-color: #fff; 129 | $top-nav-hover-bg: $brand-primary; 130 | $top-nav-active-color: #fff; 131 | $top-nav-active-bg: $brand-primary; 132 | $top-nav-height: $navbar-height - 15px; 133 | 134 | // Breadcrumb 135 | 136 | $breadcrumb-borders: ( 137 | bottom: ( 138 | size: 1px, 139 | style: solid, 140 | color: $border-color 141 | ) 142 | ); 143 | 144 | // Aside 145 | 146 | $aside-menu-width: 250px; 147 | $aside-menu-color: $gray-dark; 148 | $aside-menu-bg: #fff; 149 | $aside-menu-borders: ( 150 | left: ( 151 | size: 1px, 152 | style: solid, 153 | color: $border-color 154 | ) 155 | ); 156 | 157 | $aside-menu-nav-padding-y: 1rem; 158 | $aside-menu-nav-padding-x: 1.25rem; 159 | 160 | // Footer 161 | 162 | $footer-height: 50px; 163 | $footer-bg: $gray-lightest; 164 | $footer-color: $body-color; 165 | $footer-borders: ( 166 | top: ( 167 | size: 1px, 168 | style: solid, 169 | color: $border-color 170 | ) 171 | ); 172 | 173 | // Cards 174 | 175 | $card-icon-bg: transparent; 176 | $card-icon-color: $body-color; 177 | -------------------------------------------------------------------------------- /src/scss/_custom.scss: -------------------------------------------------------------------------------- 1 | $something: #fff; 2 | $something: #fff; -------------------------------------------------------------------------------- /src/scss/bootstrap/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | padding: $alert-padding-y $alert-padding-x; 7 | margin-bottom: $alert-margin-bottom; 8 | border: $alert-border-width solid transparent; 9 | @include border-radius($alert-border-radius); 10 | } 11 | 12 | // Headings for larger alerts 13 | .alert-heading { 14 | // Specified to prevent conflicts of changing $headings-color 15 | color: inherit; 16 | } 17 | 18 | // Provide class for links that match alerts 19 | .alert-link { 20 | font-weight: $alert-link-font-weight; 21 | } 22 | 23 | 24 | // Dismissible alerts 25 | // 26 | // Expand the right padding and account for the close button's positioning. 27 | 28 | .alert-dismissible { 29 | // Adjust close link position 30 | .close { 31 | position: relative; 32 | top: -$alert-padding-y; 33 | right: -$alert-padding-x; 34 | padding: $alert-padding-y $alert-padding-x; 35 | color: inherit; 36 | } 37 | } 38 | 39 | 40 | // Alternate styles 41 | // 42 | // Generate contextual modifier classes for colorizing the alert. 43 | 44 | .alert-success { 45 | @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); 46 | } 47 | .alert-info { 48 | @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); 49 | } 50 | .alert-warning { 51 | @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); 52 | } 53 | .alert-danger { 54 | @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); 55 | } 56 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | display: inline-block; 8 | padding: $badge-padding-y $badge-padding-x; 9 | font-size: $badge-font-size; 10 | font-weight: $badge-font-weight; 11 | line-height: 1; 12 | color: $badge-color; 13 | text-align: center; 14 | white-space: nowrap; 15 | vertical-align: baseline; 16 | @include border-radius(); 17 | 18 | // Empty badges collapse automatically 19 | &:empty { 20 | display: none; 21 | } 22 | } 23 | 24 | // Quick fix for badges in buttons 25 | .btn .badge { 26 | position: relative; 27 | top: -1px; 28 | } 29 | 30 | // scss-lint:disable QualifyingElement 31 | // Add hover effects, but only for links 32 | a.badge { 33 | @include hover-focus { 34 | color: $badge-link-hover-color; 35 | text-decoration: none; 36 | cursor: pointer; 37 | } 38 | } 39 | // scss-lint:enable QualifyingElement 40 | 41 | // Pill badges 42 | // 43 | // Make them extra rounded with a modifier to replace v3's badges. 44 | 45 | .badge-pill { 46 | padding-right: $badge-pill-padding-x; 47 | padding-left: $badge-pill-padding-x; 48 | @include border-radius($badge-pill-border-radius); 49 | } 50 | 51 | // Colors 52 | // 53 | // Contextual variations (linked badges get darker on :hover). 54 | 55 | .badge-default { 56 | @include badge-variant($badge-default-bg); 57 | } 58 | 59 | .badge-primary { 60 | @include badge-variant($badge-primary-bg); 61 | } 62 | 63 | .badge-success { 64 | @include badge-variant($badge-success-bg); 65 | } 66 | 67 | .badge-info { 68 | @include badge-variant($badge-info-bg); 69 | } 70 | 71 | .badge-warning { 72 | @include badge-variant($badge-warning-bg); 73 | } 74 | 75 | .badge-danger { 76 | @include badge-variant($badge-danger-bg); 77 | } 78 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 3 | margin-bottom: $spacer-y; 4 | list-style: none; 5 | background-color: $breadcrumb-bg; 6 | @include border-radius($border-radius); 7 | @include clearfix; 8 | } 9 | 10 | .breadcrumb-item { 11 | float: left; 12 | 13 | // The separator between breadcrumbs (by default, a forward-slash: "/") 14 | + .breadcrumb-item::before { 15 | display: inline-block; // Suppress underlining of the separator in modern browsers 16 | padding-right: $breadcrumb-item-padding; 17 | padding-left: $breadcrumb-item-padding; 18 | color: $breadcrumb-divider-color; 19 | content: "#{$breadcrumb-divider}"; 20 | } 21 | 22 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built 23 | // without `