Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CE-1262 Set up authentication page #6

Merged
merged 34 commits into from
Sep 13, 2021
Merged

CE-1262 Set up authentication page #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
cbf8e1b
CE-1262 Install auth 0 dependency
Nutto55 Aug 26, 2021
c50fd0b
CE-1262 Add Auth0 functionality
Nutto55 Aug 26, 2021
84192db
CE-1262 Add login logout functionality
Nutto55 Aug 27, 2021
fad4afe
CE-1262 Add Logout simple button and avatar template
Nutto55 Aug 30, 2021
7d4c06e
Merge branch 'develop' into feature/CE-1262-set-up-authentication-page
naluinui Aug 30, 2021
db0b2f4
Merge branch 'feature/CE-1297-setup-biodiversity-analytics-deployment…
Nutto55 Sep 1, 2021
1438ace
CE-1262 Update authen logic and nav component to App vue
Nutto55 Sep 2, 2021
1fd0bbb
CE-1348 Add Pinia for store data tool
Nutto55 Sep 4, 2021
eaf22eb
CE-1348 Setup vuex services to store data
Nutto55 Sep 4, 2021
28baa84
CE-1262 Remove pinia
Nutto55 Sep 6, 2021
47e6d39
CE-1262 Implement another style of auth0
Nutto55 Sep 6, 2021
8297b69
CE-1262 Remove unuse auth
Nutto55 Sep 6, 2021
bf80732
CE-1262 Fix auth plugin type and update display value
Nutto55 Sep 6, 2021
0bcabef
CE-1262 Change app domain and Auth0 universal login theme
naluinui Sep 6, 2021
60691cc
CE-1262 Moving navbar from App to root page and store auth and user d…
Nutto55 Sep 6, 2021
8ec57ad
CE-1262 Install axios
Nutto55 Sep 6, 2021
5bac113
Merge branch 'develop' into feature/CE-1262-set-up-authentication-page
naluinui Sep 6, 2021
30cf9e4
CE-1262 Add sign out dropdown UI
naluinui Sep 6, 2021
ab9c8c3
CE-1262 Update logic to show/hide logout button on avatar hover
Nutto55 Sep 6, 2021
49d70ff
CE-1262 Update change log and documentation
Nutto55 Sep 6, 2021
7bb158f
CE-1262 Setup api client class for universal use when calling api
Nutto55 Sep 7, 2021
16e00c8
CE-1262 Update changelog
Nutto55 Sep 7, 2021
b1294e4
CE-1262 Update api calling example
Nutto55 Sep 7, 2021
2c19f81
CE-1262 Update auth config to be ts file
Nutto55 Sep 7, 2021
5a6d69c
CE-1262 Fix wrong spelling
Nutto55 Sep 7, 2021
e719fb5
CE-1262 Move navbar from root to be components and update route to su…
Nutto55 Sep 8, 2021
a0103c9
- Remove note file
Nutto55 Sep 8, 2021
213f646
CE-1262Update navbar to be calling fron root page instead from route
Nutto55 Sep 8, 2021
d5eb74a
CE-1262 Fix build failed
Nutto55 Sep 10, 2021
5c3349a
CE-1262 Update authen logic
Nutto55 Sep 10, 2021
7bcd28e
CE-1262 Add preload logic
Nutto55 Sep 10, 2021
653423a
Merge branch 'develop' into feature/CE-1262-set-up-authentication-page
Nutto55 Sep 10, 2021
50a4b65
CE-1262 Update code following pr comment
Nutto55 Sep 13, 2021
fc86f6a
CE-1262 Fix user init type
Nutto55 Sep 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ module.exports = {
],
'import/newline-after-import': ['error'],
'unused-imports/no-unused-imports-ts': 'error',
'simple-import-sort/exports': ['error']
'simple-import-sort/exports': ['error'],
'no-void': ['error', { allowAsStatement: true }]
}
}
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,8 @@

* **setup:** CE-1261 Setup biodiversity analytics project ([CE-1261](https://jira.rfcx.org/browse/CE-1261))
* **setup:** CE-1297 Setup biodiversity analytics deployment ([CE-1297](https://jira.rfcx.org/browse/CE-1297))
* **setup:** CE-1262 Set up authentication page ([CE-1262](https://jira.rfcx.org/browse/CE-1262))
* **setup:** CE-1348 Set up biodiversity analytics store data tool([CE-1348](https://jira.rfcx.org/browse/CE-1348))
* **setup:** Set up api service for calling an api

* **features:** CE-1327 User can see the comparison box at the top of report ([CE-1327](https://jira.rfcx.org/browse/CE-1327))
10 changes: 6 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
# Biodiversity Analytics

Biodiversity analytics website build with Vue 3 + Typescript + Vite + Windi CSS
Biodiversity analytics website build with Vue 3, Typescript, Vite, Windi CSS, and Vuex

## Getting started
## Requirements

- node 14+
- npm 7+

Requirements:
- node 14+, npm 7+
## Getting started

1. Install dependencies:

Expand Down
28 changes: 27 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,34 @@
</head>

<body class="min-h-screen bg-mirage-grey">
<div id="preload" class="bg-mirage-grey h-10 w-10 top-1/2 left-1/2">
<svg class="animate-spin bg-mirage-grey text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

</html>
</html>

<script lang="ts">
document.onreadystatechange = function () {
const state = document.readyState
if (state == 'interactive') {
document.getElementById('preload').style.visibility = 'visible'
document.getElementById('app').style.visibility = 'hidden'
Comment on lines +27 to +29
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm unsure about the sequence here...

  • Isn't #preload already visible?
  • Shouldn't #app already be hidden? (why not set hidden on app directly in the HTML?)
  • Aren't the Windicss classes on #preload embedded in main.ts? At this point external styles & scripts are still loading

} else if (state == 'complete') {
setTimeout(function () {
document.getElementById('preload').remove()
document.getElementById('app').style.visibility = 'visible'
}, 3000)
}
}
</script>
<style>
#preload {
position: fixed;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about config this with Windi?

Screen Shot 2564-09-10 at 14 34 25

https://windicss.org/utilities/positioning.html

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it doesn't work there

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can try to change this one. You will see overlapping white screen.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suspect you shouldn't be using Windicss classes in index.html.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used it and it seem to be ok except class fixed

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Nutto55 - Did you test is locally where the scripts load instantly or over a slow connection? I don't think you're testing the problem I'm expecting.

}
</style>
Loading