Vuejs-Beep: Beep - Account Security Scanner built with Vue.js and Ionic 4

Beep

CircleCI SonarQube PRs Welcome MIT Licensed Powered by Modus_Create

Launch Progressive Web App Download Beep on the App Store Get Beep on Google Play


Beep: mobile account vulnerability scanner

Every day, over 4 million online data records are stolen or lost. Beep tells you if your online accounts have been stolen in any of these data breaches. Just enter your email address, username, or password, and we’ll tell you if it's been hacked.

Pioneering Vue.js as a New Backend for Ionic

Beep is one of the first apps built on Vue.JS and Ionic Framework. With this combination, PHP developers no longer have to struggle with Angular to build cross platform Ionic apps. We even built our own router.

How it works

We've made sure that Beep won't end up yet another name on the list of data breaches. How? We hash all of your passwords and account information. In other words, we never store your passwords in plain text. Instead, we transform your password into a really, really long code and then, we send only the first five characters of that code to a server.

Beep Screenshot Beep Screenshot Beep Screenshot Beep Screenshot Beep Screenshot Beep Screenshot

Installing

Once you clone this repo go into the terminal and install dependencies.

npm install

Now you're ready to serve the development build.

npm run serve

Developing

Beep is built with amazing libraries

Prerequisites

Node 8.x+ is required for development.

iOS build

Make sure you have cocoapods on your Mac OS. You can install cocoapods with gem

sudo gem install cocoapods

You can create an iOS-specific build by executing:

npm run build-ios

Android build

You will need Android SDK.

The easiest way to set it up on a Mac is with homebrew.

brew install android-sdk

On Linux you can either use your distribution's package manager

sudo apt-get install android-sdk

Or install via Flatpak or Snap

After the SDK is setup you can create an Android-specific build by executing:

npm run build-android

To create a production or debug APK you will need to sign your app. For a local debug build we have provided an example file

cp android/signing/keystore.properties.example android/signing/keystore.properties

This will rename the example file and allow you to proceed with the build process.

You may need to adjust the value of storeFile according to your platform

storeFile=~/.android/debug.keystore

Deploying

To prepare your assets for a production deployment execute:

npm run build

This will create files and assets in the dist/ directory

Run on Android

cd android
./gradlew installDebug

Ionic Vue

@modus/ionic-vue

Ionic Vue enables Vue apps to use Ionic 4 with little to no configuration and no changes to familiar approaches. Originally a Modus Labs project, Ionic Vue became part of the Ionic framework as the official support for Vue.

Theming

For minor customizations you can edit the supplied .env file which allows you to edit the App name and status-bar colors for mobile/PWA builds.

Modifications of colors, fonts and other parts of UI are done in src/theme/common.css and .vue files in src/components/ and src/views/ which specify scoped styling rules.

For making modifications to native iOS and Android builds you will have to make changes within android/ and ios/ directories.

An in-depth description is provided by Capacitor's documentation

Configuring iOS

Configuring Android

Tests

Unit tests

To run the test suite execute:

npm test

This will confirm that any changes made to the original code did not break any existing functionality.

To extend the test suite create a new file in tests/unit/ such as new-feature.spec.js

Automated end-to-end tests

To run the end-to-end automated tests install the necessary dependencies by executing:

cd tests_root/wdio && npm install

Next make sure that Chrome browser is installed on the machine. At the moment the tests are configured to run only in Chrome. In the future support for other browsers will be added. Before actually starting the scripts make sure that the Beep web app is either running locally or a baseUrl is added in the wdio.conf.js file. By default it's running on localhost:8080.

Finally, the following command needs to be executed:

npm run test:ui

Linting

Code linting is done with ESLint and Prettier

To run a check the project for any lint errors execute:

npm run lint

E2E testing on mobile devices is brought to you by CrossBrowserTesting.

CrossBrowserTesting

Modus Create

Modus Create is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.

Modus Create

This project is part of Modus Labs.

Modus Labs

Licensing

This project is MIT licensed.

Comments

  • Account field gets hide behind keyboard when user is in landscape mode (UI) Ios
    Account field gets hide behind keyboard when user is in landscape mode (UI) Ios

    Oct 5, 2018

    Describe the bug Account field gets hide behind keyboard when user is in landscape mode

    To Reproduce Steps to reproduce the behavior:

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error
    screen shot 2018-10-06 at 12 03 16 am

    Desktop (please complete the following information):

    • OS: iphone 6 IOS (11.2.6)

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]

    Additional context Add any other context about the problem here.

    Reply
  •  '#Hash proctected' links 'Overlaps' on 'Password' text field in landscape (Android)
    '#Hash proctected' links 'Overlaps' on 'Password' text field in landscape (Android)

    Oct 5, 2018

    Describe the bug In landscape mode '#Hash protected' links 'Overlaps' on 'Password' text field (Android)

    Smartphone (please complete the following information):

    • Device: Samsung 6s 7.0.1
    screen shot 2018-10-06 at 12 11 30 am
    Reply
  • Home_tests  and check_account Branch
    Home_tests and check_account Branch

    Oct 22, 2018

                                                                                                                                                                                                           
    Reply
  • [TEST-DO NOT MERGE] Use @modus/motherboard v0.0.1
    [TEST-DO NOT MERGE] Use @modus/motherboard v0.0.1

    Oct 22, 2018

    Testing Motherboard

                                                                                                                                                                                                           
    Reply
  • Migrate to @ionic/vue
    Migrate to @ionic/vue

    Nov 27, 2018

    @modus/ionic-vue is not @ionic/vue so it's probably a good time to migrate that dependency

    enhancement 
    Reply
  • Feedback module to send info to support
    Feedback module to send info to support

    Jan 29, 2019

    Would like to be able to elicit feedback from users directly in the app. This should be simple - when users are prompted for feedback, should open simple message box where the user can type in information - whether it is error information or feature ideas or issues with the UX. Plan is to keep it simple at this point, can add more in the future.

    Reply
  • Cancel pending request
    Cancel pending request

    Jan 30, 2019

    Describe the bug When a request to check a password or email is sent - a loading icon is shown, if the back button is pressed we should cancel the request and hide the icon.

    To Reproduce Steps to reproduce the behavior:

    1. Check password or email
    2. When the loading icon is shown, click the back arrow or the hardware back button

    Expected behavior The request should be canceled and loading icon hidden

    Screenshots or videos

    loading

    bug help wanted 
    Reply
  • Update README.md with steps to generate build files on local for both…
    Update README.md with steps to generate build files on local for both…

    Apr 5, 2019

    … iOS and Android

                                                                                                                                                                                                           
    Reply
  • PWA version is non-operational?
    PWA version is non-operational?

    Feb 12, 2020

    Describe the bug This app is absolutely non functional when using the browser (tested on Windows desktop / Chrome and iphone mobile browser)

    To Reproduce Steps to reproduce the behavior:

    1. Go to https://beep.modus.app/ (per top of github repo

    BEEP Account Security Scanner - Detect if your credentials have been compromised (Vue + Ionic) https://beep.modus.app

    1. Note the absolutely blank screen.
    2. Open up chrome developer tools. Note the console errors.
    3. Console error follows:

    ionic-vue.esm.js:191 Uncaught TypeError: (void 0) is not a function at SA (ionic-vue.esm.js:191) at Object.VA [as install] (ionic-vue.esm.js:556) at Function.t.use (vue.esm.js:4843) at Module.56d7 (main.js:25) at s (bootstrap:88) at Object.0 (bootstrap:262) at s (bootstrap:88) at n (bootstrap:45) at bootstrap:262 at bootstrap:262 SA @ ionic-vue.esm.js:191 VA @ ionic-vue.esm.js:556 t.use @ vue.esm.js:4843 56d7 @ main.js:25 s @ bootstrap:88 0 @ bootstrap:262 s @ bootstrap:88 n @ bootstrap:45 (anonymous) @ bootstrap:262 (anonymous) @ bootstrap:262

    Expected behavior Something, anything.

    Screenshots or videos Blank screen. I can see the cute red B favicon in the browser tab. Lots of content in header, lots of network downloads. All downloads (mostly chunks of .js content) seem to be successful.

    Desktop (please complete the following information):

    • OS: Windows 10 home ver 1909, Chrome browser and iphone Xr ios13.3 / browser . Same result. blank screen.
    • I also tried this on Microsoft Edge on desktop. Still a fail.

    What do you guys see? Am I doing this correctly?

    Reply
  • beep.modus.app is broken
    beep.modus.app is broken

    Dec 7, 2020

    Describe the bug beep.modus.app is broken

    To Reproduce Steps to reproduce the behavior:

    1. Go to 'beep.modus.app'
    2. The page is blank.

    Desktop (please complete the following information):

    • OS: MacOS
    • Browser chrome
    • Version 87.0

    Additional context Add any other context about the problem here.

    Reply
  • 💌 Improve hardware back on Android
    💌 Improve hardware back on Android

    Oct 8, 2018

    This is feedback from email

    Nice ionic app. You guys should make it work correctly with the hardware back button. There are numerous places where tapping back closes the app. When I open the app again it starts from the beginning; not where I left off. It's not a good user experience.

    bug 
    Reply
  • Update to latest ionic4 and ionic-vue
    Update to latest ionic4 and ionic-vue

    Jan 30, 2019

    Fixes #139

                                                                                                                                                                                                           
    Reply
  • include ionic 4 in the project instead of using CDN
    include ionic 4 in the project instead of using CDN

    Jun 29, 2018

    The task is done. As I told you @michaeltintiuc I am not really sure if this is an improvement :slightly_smiling_face: . Please do not merge this yet until we have a better understanding of the issue.

    Reply
  • Typo in
    Typo in "How does it work?" page

    Sep 15, 2018

    In the 'Pioneering Vue...' paragraph, there is an extra space between 'have to struggle with' and 'Angular'.

    To Reproduce Steps to reproduce the behavior:

    1. Open app
    2. Click on 'How does it work?'
    3. Scroll down to 'Pioneering Vue' paragraph body copy
    4. See typo as above

    Smartphone (please complete the following information):

    • Device: iPhone 8
    • OS: iOS 11.2.1
    bug 
    Reply
  • npm run build-android
    npm run build-android

    Nov 27, 2018

    i have an error in

    npm run build-android npm ERR! missing script: build-android

    npm ERR! A complete log of this run can be found in: npm ERR! /

    this is log

    0 info it worked if it ends with ok 1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build-android' ] 2 info using [email protected] 3 info using [email protected] 4 verbose stack Error: missing script: build-android 4 verbose stack at run (/usr/lib/node_modules/npm/lib/run-script.js:155:19) 4 verbose stack at /usr/lib/node_modules/npm/lib/run-script.js:63:5 4 verbose stack at /usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:115:5 4 verbose stack at /usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:418:5 4 verbose stack at checkBinReferences_ (/usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:373:45) 4 verbose stack at final (/usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:416:3) 4 verbose stack at then (/usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:160:5) 4 verbose stack at /usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:280:12 4 verbose stack at /usr/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:78:16 4 verbose stack at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3) 5 verbose cwd /var/www/html/test 6 verbose Linux 4.15.0-34-generic 7 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "build-android" 8 verbose node v8.12.0 9 verbose npm v6.4.1 10 error missing script: build-android 11 verbose exit [ 1, true ]

    Reply
  • [Feature] Ask for review
    [Feature] Ask for review

    Sep 17, 2018

    It would be nice to ask users for a review in the app store.

    We could use a Cordova plugin such as https://github.com/pushandplay/cordova-plugin-apprate

    Capacitor might work OOB with that plugin https://capacitor.ionicframework.com/docs/basics/cordova/

    Workflow idea

    • User checks for username/pass
    • Beep show results (red or green)
    • User navigates away
    • Beep prompts for review
    enhancement 
    Reply
  • WIP: Update tests to run in CI
    WIP: Update tests to run in CI

    Jan 28, 2019

    • Added WDIO config for running tests in parallel in Chrome & Firefox;
    • Updated Circle CI config;
    • Added docker-compose.yml file for managing the Selenium drivers;
    Reply
  • GI-127: Fixing styles based on original design and new Ionic theming API afte…
    GI-127: Fixing styles based on original design and new Ionic theming API afte…

    Jan 20, 2019

    Basic theming fixes

                                                                                                                                                                                                           
    Reply
  • Add tests to Circle CI workflows
    Add tests to Circle CI workflows

    Aug 20, 2018

    @popescunsergiu @namrata-modus I may need your help for integrating the testing suite in the Circle CI pipeline.

    1. are there any environment variables we should be looking to support in CI?
    2. what are the dependencies that a testing container needs to set up?
    3. how can we run tests in parallel?
    Reply
  • GI#94: Service to support app reviews on apps stores
    GI#94: Service to support app reviews on apps stores

    Sep 19, 2018

    You need to run this in order to install/sync new cordova dependencies:

    npm install
    npx cap sync
    

    This PR prompts to users if they want to provide a review for Beep on their respective apps store once they have done the very first account/password check using the app.

    Rules

    1. The prompt will be displayed only after the very first account/password check every time they use the app
    2. If the user say he/she doesn't want to provide a review right now, but they keep using Beep to do more account/password checks, the prompt won't be displayed after this new checks
    3. Once the user clicks on "Sure" (lets do the review), a flag will be stored into the Native storage of the device in order to avoid the prompt to be displayed anymore

    NOTES

    In order to test the whole workflow, run the app on real devices. Simulators (at least iOS simulators) are not able to resolve app url's, they always return an error saying the url is not valid.

    beepappreview

    Reply