Description

As a developer, I want to group all user related operations and states in a user store module.

Story Points

3

Definitions of Done

• user store with states, mutations, actions, getters
  TBD

Description

As a user, I want to be able to login using my email and password

• Refer to the defined specification

Story Points

8

Definitions of Done

• ViewLogin.vue should be classified as Vue views. Official Doc
• a TheLogin.vue should defined as a Vue component. Official Doc
• a login page without style
• user should be able to login
• inputs are required to be validated use vuelidate. Refer to sample component.

Description

As a developer I want to lint unused imports e.g.

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue';

@Component
export default class App extends Vue {
}
</script>

Note that HelloWorld is not being used.

References:
https://vuejs.github.io/eslint-plugin-vue/rules/
https://eslint.org/docs/rules/

Description

Set up internationalization plugin

Story Points

1

Definitions of Done

• Add a wiki page on translations
• init setup of the plugin
• test component to test the plugin

Description

Ts lint complains of type issues with grpc-web package, and is stopping unit testing for now.

It is fixed with this commit. Just awaiting release.

Story Points

1

How to Reproduce

• Uncomment lines 18 - 30 in hwsc-frontend/tests/unit/store/gateway/mutations.spec.ts
• Run command npm run test:unit

Expected Outcome

• Test passes

Actual Outcome

• Ts complaint preventing running of test

Description

As a developer, I want to use docker-compose to run services locally and in the pipeline for frontend development.

For this task, I highly recommend looking at the docker-compose file in app-gateway-svc.
Start with user-svc, PSQL, and app-gateway-svc. Add the remaining services as required.

Story Points

5

Definitions of Done

• services, psql, mongodb are communicating

Description

Create more folder structure to better organize files

Story Points

1

Definitions of Done

• folder structure for scss, images, vuex store

Description

As of May 6th, 2019, running npm install produced the following warnings:

found 98 vulnerabilities (73 low, 9 moderate, 16 high) in 33024 scanned packages
  run `npm audit fix` to fix 97 of them.
  1 vulnerability requires semver-major dependency updates.

Story Points

TBD

How to Reproduce

1. Delete node_modules folder
2. In command line type npm install

Description

As a user, I want to maintain my authenticated session using my browsers local storage and history.

This task includes the following:

• login action
• authentication guard
• logout action
• auto login

Reference: https://hwsc-org.github.io/wikis/app-gateway-svc/epics.html#getnewauthtoken

For this task, I would recommend the to do the following prior to starting this task.

• history mode task
• I recommend writing your own epic for this task.
• Limit the pull request to 1 per definition of done, so it is easier to review and to find bugs right away.
• I recommend doing the definition of done sequentially. We can comeback if we have to modify the previous implementation.
• Draft components e.g. login, dashboard, or user pages.

Story Points

13

Definitions of Done

• user login action that saves the current user's uuid, auth token, token expiration in browser's local storage.
• Setup authentication guard in router
  The common pattern I have seen is something similar to the codes below:

const routes = [
  { path: '/', component: WelcomePage },
  { path: '/login', component: SigninPage },
  {
    path: '/dashboard',
    component: DashboardPage,
    beforeEnter (to, from, next) {
      if (store.state.token) {
        next()
      } else {
        next('/login')
      }
    }
  }
]

• user logout action that clears the user's uuid, auth token, token expiration from the browser's local local storage, and routes to a login or signin page
• auto-login action that attempts to login the user using the auth data stored in the browser's local storage during the created lifecycle hook of App.vue. If the authentication has expired, then route to the proper page. Hopefully, this covers keeping the session after restarting and refreshing the browser.
• dispatch another action to automatically get a new auth token per epic requirement using possibly setInterval(func, interval). This action can be possibly be dispatched within login action.

Description

As a developer, I need to use vuejs-logger within vuex store

Story Points

5

Definitions of Done

• able to log using vuejs-logger with the store modules.

Description

Re-bootstrap the outdated hwsc-frontend repo using the newest version of Vue CLI so that team can work with the latest versions of technology.

Story Points

3

Definitions of Done

• Bootstrap with option: ts, eslint, vuex, vue-router, unit testing
• Set up config files for ts and eslint
• Create and document in README setup

Description

TODO

Story Points

TODO

Definitions of Done

TODO

Description

As a developer, I want to encapsulate all properties and methods related to User in a class.
Reference https://github.com/hwsc-org/hwsc-api-blocks/blob/master/lib/user.proto to define User's properties.

Story Points

3

Definitions of Done

• use typescript access modifiers to prevent direct property manipulation
• class contains all properties of a User
• class contains basic getters and setters of a User
• unit tested

Refer: hwsc-org/hwsc-app-gateway-svc#9 (comment)

Filter Store

Contains all states related to filters and methods that manipulate these states.

States

filters: array of hardcoded strings

hard coded
Used in a dropdown menu to display to users the type of filters that are available and can choose from.

Filter types: publishers, call types, ground types, regions, oceans, sensor, sample rates, geographic coordinate, date

publishers: array of type Publisher

retrieved from backend
Used to generate a list of selectable, available publishers by their firstName and lastName. Sortable by firstName or lastName.

interface Publisher {
  firstName: string;
  lastName: string;
}

callTypes: array of strings

retrieved from backend
Used to generate a list of selectable, available call types, i.e: Herd, Friend, Feed Point, Dependency Migration.

groundTypes: array of strings

retrieved from backend
Used to generate a list of selectable ground types, i.e: Social Ground, Atlas, Breeding Migrating.

---- [NEEDS MORE INFO] regions: array of strings || array of type Region

retrieved from backend
Used to generate a list of selectable, available regions.

interface Region {
  city: string;
  country: string;
}

oceans: array of strings

hard coded
Used to generate a list of selectable oceans.

Oceans: Pacific, Atlantic, Indian, Southern, and Arctic.

sensors: array of type Sensor

retrieved from backend
Used to generate a list of selectable, available sensor by their tag and name. Sortable by tag or name.

interface Sensor {
  tag: string;
  name: string;
}

Getters

Mutations

SET_PUBLISHERS

Actions

Set actions should follow the same pattern below:

• if state some state is not set
  • set loading to true (display a loader somewhere)
  • request to backend for whatever you need.
  • when receiving response, set loading to false (remove the loader)
  • if request success:
    • commit a mutation to set state some state
  • else:
    • depending on error code:
      • redirect to the proper error page or
      • if a modal pop up, close it, and show a modal error and allow user to click OK and remain on page

Sets

• setPublishers
• setCallTypes
• setGroundTypes
• setRegions
• setSensors

5 hashes

6 hashes

some block quote
so i can get css

Description

We should check it out if we can add an authentication header in new AppGatewayServiceClient('http://localhost:50056', null, null); instead of adding it as metadata per GRPC calls https://github.com/hwsc-org/hwsc-frontend/pull/21/files#r285904231

Originally posted by @faraonc in https://github.com/hwsc-org/hwsc-frontend/pull/21/files

Story Points

1

Definitions of Done

TBD

Description

As a user, I want to remove the hashmark and use my browsers history mode.

Reference: https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode

Story Points

2

Definitions of Done

• hashmark removed
• leverage browser's history mode
• route to a 404 page as a fallback

Description

Enable https://github.com/improbable-eng/grpc-web official grpc-web in our web app

Story Points

3

Definitions of Done

• A successful GetStatus with app-gateway-svc using docker-compose

Description

As a developer, I need to be able to create an account using a registration page

Story Points

5

Epic Link

• #31

Definitions of Done

• A mock/prototype in Adobe XD
• Update Wiki with the link

Description

As a developer, I need a test page to test styles.

Story Points

3

Definitions of Done

• a test page in Vue

Description

As a user, I want to be able to click on a dropdown menu button and select my preferred language (if available).

Resources:
i18n vue locale changing
vue-flag-icon
example use of vue-flag-icon

Article on how to properly use flag icons

Story Points

2

Definitions of Done

• dropdown menu displaying all available languages
• clicking on preferred language switches to the selected language

Description

As a user, I want to query my metadata in a given index type e.g. oceanography

TODO needs an epic

Story Points

TODO

Definitions of Done

Description

The Vue.js's idiomatic way of managing state and http requests is through vuex actions property.

I believe the recommended workflow is the following:

• vuex holds the global state, and it will have getters, mutations, actions.
• all http requests is performed in the actions property due to the following reasons:
  • Instead of mutating the state, actions commit mutations
  • actions can contain arbitrary asynchronous operations
  • The only way to actually change state in a Vuex store is by committing a mutation in the mutations property.

Examples: https://vuex.vuejs.org/guide/actions.html

Story Points

5

Definitions of Done

• a modularized app-gateway-svc client if still needed
• ability of a component to dispatch an action. an example would be https://vuex.vuejs.org/guide/actions.html#dispatching-actions used in https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/components/ShoppingCart.vue#L33 and performs all the mutations in its definition https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/store/modules/cart.js#L32
• follows the workflow dispatch from vue component -> commit from vuex's action -> mutate the state from vuex's mutation
• unit tested

Note

app-gateway-svc client is not the only client. We should be able to use different clients within Vuex's mutations property e.g. elastic-search client + app-gateway-svc client + etc.

Description

As a developer, I want to use the vuetify to manage my web app's theme.

https://vuetifyjs.com/en/getting-started/quick-start

Story Points

3

Definitions of Done

• bootstrap vuetifiy

Description

As a developer, I need to have consistent styles that are only available and allowed for the web app.

Story Points

5

Epic Link

• #31

Definitions of Done

Libraries(CSS) for the following:

• font size
  • https://vuetifyjs.com/en/framework/typography
• font style
  • https://vuetifyjs.com/en/framework/typography
• colors
  • https://vuetifyjs.com/en/framework/theme#theme
  • https://theme-generator.vuetifyjs.com/
• icons
  • favicon
  • mascot
  • logo
• CSS implementations

Description

As a user, I want the app to load the translations based on my browser language preference (if it is available).

If language specified in browser is not available in the app, default english will be used.

Story Points

2

Definitions of Done

• Translation based on browser language preference is used on the app (if language is available)
• Test different browsers and loads the correct translations

Overview

User has to be able to register an account using the following information:

• email
• password
• first name
• last name
• organization

Acceptance Criteria

• User is able to register after filling in the input fields
• User is able to receive a verification e-mail
• User is able to click the verification link to get verified
• Email recipient is able to click a link to inform that he/she has not intention to create an account