Skip to content
Harmless typosquatting dependency for OWASP Juice Shop abusing epilogue ngx-bar-rating
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
config
demo
src
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
gulpfile.js
karma.conf.js
package.json
tsconfig-aot.json
tsconfig.json
tslint.json
webpack.config.js

README.md

Angular Bar Rating

Minimal, light-weight Angular ratings.

npm npm Build Status npm

THIS IS NOT THE PACKAGE YOU ARE LOOKING FOR

THIS IS NOT THE MODULE YOU ARE LOOKING FOR! Please use https://github.com/MurhafSousli/ngx-bar-rating! This repository exists only for security awareness and training purposes to demonstrate the issue of typosquatting within the OWASP Juice Shop! Please check out https://github.com/bkimminich/juice-shop/issues/368 and https://iamakulov.com/notes/npm-malicious-packages/ for more information!


Table of Contents

Installation

Install it with npm

npm install --save ng2-bar-rating

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ng2-bar-rating:

map: {
  'ng2-bar-rating': 'node_modules/ng2-bar-rating/bundles/ngx-bar-rating.umd.js',
}

Here is a working plunkr | stackblitz

Basic usage:

Import BarRatingModule in the root module

import { BarRatingModule } from "ng2-bar-rating";

@NgModule({
  imports: [
    // ...
    BarRatingModule
  ]
})

In your template

<bar-rating [(rate)]="rate" [max]="5"></bar-rating>

Rating options (inputs):

Movie rating example

<bar-rating [(rate)]="rate" [max]="4" [theme]="'movie'" [showText]="true"
 [titles]="['Bad', 'Mediocre' , 'Good', 'Awesome']"></bar-rating>

It can be used with angular forms and reactive forms, for example:

<form #form="ngForm">
  <bar-rating name="rating" [(ngModel)]="formRating" [max]="4" required disabled></bar-rating>
</form>
<p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>
<pre>{{ formRating }}</pre>

Predefined themes

Add the rating theme either in index.html

<link rel="stylesheet" href="../node_modules/ng2-bar-rating/themes/br-default-theme.css"/>

Or in the global style style.scss (recommended)

  • Pure css stars (default) [theme]="'default'"
@import '~ngx-bar-rating/themes/br-default-theme'
  • Bootstrap stars [theme]="'bootstrap'"
@import '~ngx-bar-rating/themes/br-bootstrap-theme';
  • Fontawesome stars [theme]="'fontawesome'"
@import '~ngx-bar-rating/themes/br-fontawesome-theme';
  • Fontawesome-o stars [theme]="'fontawesome-o'"
@import '~ngx-bar-rating/themes/br-fontawesome-o-theme';
  • Horizontal bars [theme]="'horizontal'"
@import '~ngx-bar-rating/themes/br-horizontal-theme';
  • Vertical bars [theme]="'vertical'"
@import '~ngx-bar-rating/themes/br-vertical-theme';
  • Custom stars [theme]="'stars'"
@import '~ngx-bar-rating/themes/br-stars-theme';
  • Movie rating [theme]="'movie'"
@import '~ngx-bar-rating/themes/br-movie-theme';
  • Square rating [theme]="'square'"
@import '~ngx-bar-rating/themes/br-square-theme';

Rating style can be easily customized, check the classes used in any theme and add your own css.

You can also do the same for forms classes such as untouched, touched, dirty, invalid, valid ...etc

If you have a nice rating style you would like to share, prupose your theme and I will include it in the package.

Issues

If you identify any errors in this component, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!

Author

Murhaf Sousli

You can’t perform that action at this time.