Add SteemConnect to Contest Hero (Vue)

Repository

https://github.com/tobias-g1/contest-hero

Details & Components

I've began working on a small project which will all users to create, view and enter contests on the Steem blockchain, the main aim of the project is to help provide visibility to contests created by both smaller and larger users a like. I have currently implemented the basic structure of most of the pages although it's in no means finished and the information should on the site doesn't represent what would be displayed upon completion of a MVP. There is areas of the code I'm not happy with and overall I need to rewrite, however in order to move forward with the main functionality I now need to integrate SteemConnect. I have tried to implement this to no avail.

To provide reference, the site currently looks like this:

In order to complete this task, the following user stories should be catered to:

1. As a user I should be able to login to contest hero via SteemConnect.
2. As a user I should be able to refresh the page and still remain logged into SteemConnect.
3. As a developer I should be submit a post or vote a reuse the SteemConnect methods throughout all components.
4. As a user I should be able to log out of Contest hero following logging in via SteemConnect.

In order to do this you will need to integrate either of the following:

https://github.com/steemit/steemconnect-sdk
https://github.com/mktcode/vue-steemconnect

Following integration of one of the above, it would be ideal if the store was updated to have the relevant getters, mutations, state and actions required to complete the following tasks (not limited to if I've missed something important):

1. Understand if a user is logged in or not
2. Set user details
3. Get current username and information such as profile image
4. Log out
5. Set access token
6. Get access token

vue-steemconnect created by @mkt does a lot of this for you already, I do realise that this task is asking for a lot of what it does out of the box, but it doesn't seem work for me and might be something I have missed/don't understand hence why I need help from someone.

In order to prevent constant logins from occurring I also believe the access token needs to be stored in local storage, this can be completed how you deem best.

In terms of UI, I would only simply ask that a button is added to log into the top navigation found in app.vue (will move to a component later or you can if you'd prefer would on the nav in a single component), this should look like this:

and one a user has logged in it should look like this:

Note: I don't mind about how the UI is styled as I can change this later, I purely focussed on the functionality.

In order to complete this you will also need to create a new route, this route should be configured as /auth, this is because I have configured the following within the SteemConnect app. This page should be used to indicate that a they're being logged in and being redirected following success.

Redirect URI(s):
http://localhost:8080/auth

The client Id for this application should be:

contest-hero.app

In order to run the application, you should be able to do the following:

npm install 
npm run serve

I used to the vue-cli to create this if this is important for any reason.

Deadline

1 week following this task being accepted.

Communication

If you have any questions or need any further information, you can ask me on discord, my username is tobias-g#0123

Github

A link to my GitHub account can be found here:

https://github.com/tobias-g1