Ibenta Technical Test (Frontend)

Welcome to the Ibenta Technical Test for Frontend Developers. Please make sure you have access to this repo.

To do this test:

You can either use this template from creative-tim (see details below) or create a new template of your liking. But it should:

Run on npm 6 and node 10
Should be based on Vuejs
Should use Bootstrap whether its applied manually or using Bootstrap Vue plugin.

If you choose to use this template:

Fork this repo to your github account.
Create a branch: feature/<Your Name in Kebab Case>-<Todays Date> e.g. feature/john-smith-25-09-2020
Push all your changes in that branch.
When you're done with the test, create a pull request.
Send me the link of your pull request. Make sure I have access to your repo and PR.
Please also indicate the local path of your page for this test.

If you choose to use a different template:

Only bush the base template to master.
Create a branch: feature/<Your Name in Kebab Case>-<Todays Date> e.g. feature/john-smith-25-09-2020
Push all your changes in that branch.
When you're done with the test, create a pull request.
Send me the link of your pull request. Make sure I have access to your repo and PR.
Please also indicate the local path of your page for this test.

Level 1:

Create a page.
In that page create a form with the following fields:
1. Username - This is a required text field.
2. Email - This is a required email field. This should only contain a valid email value.
3. First Name - This is a required text field.
4. Last Name - This is a required text field
5. Password - This is a required password field.
Add a help text for each field.
Also add a text place holder on each field.
Add a validation for the fields. Please refer to the field definition above.
Add a submit button. Clicking this button will display an alert/notification that the user has been added.

Level 2:

Do all the steps in Level 1 but make use of Vue components and reuse as much as possible including the validation logic.
Create a table below the form that will display all the users that has been created.
Implement a delete functionality that will remove previously added user.
When the table is empty, display a message indicating the user that they need to add a user first.
Implement an edit functionality that will allow user to edit existing users from the table.

Bonus: Implement some form of automated testing.

Level 3:

Do all steps in Level 1 & Level 2
Implement an API client with the following details:
- Base URL is http://authentication-service.jx-ibenta-authentication-service-pr-15.ibenta.com/api
- Will use OAuth2 for security. OAuth2 details are as follows:
  - Grant Type: Client Credentials
  - Access Token URL: http://authentication-service.jx-ibenta-authentication-service-pr-15.ibenta.com/oauth/token
  - Client ID: AITWD1zyBVuPWgn4ZBHSREtXJDZXL9Lt
  - Client Secret: ELEGpyarKD0OWDrzfiqWqmpkOb4FSKnb
  - Scope: read write

Use this client to:

Create new users:

Request: POST http://authentication-service.jx-ibenta-authentication-service-pr-15.ibenta.com/api/users

Request Body:

    {
        "name": "jon.jones@ibenta.com.au",
        "firstName": "Jon",
        "lastName": "Jones",
        "email": "jon.jones@ibenta.com.au"
        "password": "Password1"
    }

Response: HTTP 201

Response Body: Note ignore permission, roles, groups and organisation

    {
        "name": "jon.jones@ibenta.com.au",
        "permissions": [],
        "firstName": "Jon",
        "lastName": "Jones",
        "email": "jon.jones@ibenta.com.au",
        "password": null,
        "roles": [],
        "groups": [],
        "id": 79,
        "organisation": null
    }

Update existing users:

Request: PUT http://authentication-service.jx-ibenta-authentication-service-pr-15.ibenta.com/api/users/{id}

Request Body:

    {
        "name": "jon.jones@ibenta.com.au",
        "firstName": "Jon",
        "lastName": "Jones",
        "email": "jon.jones@ibenta.com.au"
        "password": "Password1"
    }

Response: HTTP 200

Response Body: Note ignore permission, roles, groups and organisation

    {
        "name": "james.jones@ibenta.com.au",
        "permissions": [],
        "firstName": "Jon",
        "lastName": "Jones",
        "email": "jon.jones@ibenta.com.au",
        "password": null,
        "roles": [],
        "groups": [],
        "id": 79,
        "organisation": null
    }

Delete existing user:
- Request: DELETE http://authentication-service.jx-ibenta-authentication-service-pr-15.ibenta.com/api/users/{id}
- Response: HTTP 204

List all users:

Request: GET http://authentication-service.jx-ibenta-authentication-service-pr-15.ibenta.com/api/users
Response: HTTP 200

Response Body: Note ignore permission, roles, groups and organisation

    {
        "content": [
            {
                "name": "jon.jones@ibenta.com.au",
                "permissions": [],
                "firstName": "Jon",
                "lastName": "Jones",
                "email": "jon.jones@ibenta.com.au",
                "password": null,
                "roles": [],
                "groups": [],
                "id": 79,
                "organisation": null
            }
        ],
        "pageable": {
            "sort": {
                "sorted": false,
                "unsorted": true,
                "empty": true
            },
            "pageSize": 20,
            "pageNumber": 0,
            "offset": 0,
            "paged": true,
            "unpaged": false
        },
        "totalPages": 1,
        "totalElements": 1,
        "last": true,
        "first": true,
        "sort": {
            "sorted": false,
            "unsorted": true,
            "empty": true
        },
        "numberOfElements": 1,
        "size": 20,
        "number": 0,
        "empty": false
    }

Bonus: Implement pagination.