Skip to content

Commit 81beb95

Browse files
BenjaminCharmesml-evs
BenjaminCharmes
and
ml-evs
authored
Add Login Splash Screen (disabled for now) (#907)
Co-authored-by: Matthew Evans <git@ml-evs.science>
1 parent 89c84b3 commit 81beb95

File tree

4 files changed

+587
-0
lines changed

4 files changed

+587
-0
lines changed

‎webapp/src/router/index.js

+40
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,15 @@ import CollectionPage from "../views/CollectionPage.vue";
99
import ExampleGraph from "@/views/ExampleGraph.vue";
1010
import ItemGraphPage from "@/views/ItemGraphPage.vue";
1111
import Admin from "@/views/Admin.vue";
12+
import Login from "../views/Login.vue";
13+
import Login2 from "../views/Login2.vue";
14+
import Login3 from "../views/Login3.vue";
15+
// import { getUserInfo } from "@/server_fetch_utils.js";
16+
17+
//const isAuthenticated = async () => {
18+
// const user = await getUserInfo();
19+
// return user !== null;
20+
//};
1221

1322
const routes = [
1423
{
@@ -25,6 +34,24 @@ const routes = [
2534
alias: "/",
2635
component: Samples,
2736
},
37+
{
38+
path: "/next/login",
39+
name: "login",
40+
alias: "/",
41+
component: Login,
42+
},
43+
{
44+
path: "/next/login2",
45+
name: "login2",
46+
alias: "/",
47+
component: Login2,
48+
},
49+
{
50+
path: "/next/login3",
51+
name: "login3",
52+
alias: "/",
53+
component: Login3,
54+
},
2855
{
2956
path: "/equipment",
3057
name: "equipment",
@@ -81,4 +108,17 @@ const router = createRouter({
81108
routes,
82109
});
83110

111+
//router.beforeEach(async (to, from, next) => {
112+
// const isPublicRoute = to.name === "login" || to.name === "About";
113+
// const authenticated = await isAuthenticated();
114+
//
115+
// if (isPublicRoute && authenticated) {
116+
// next({ name: "samples" });
117+
// } else if (!isPublicRoute && !authenticated) {
118+
// next({ name: "login" });
119+
// } else {
120+
// next();
121+
// }
122+
//});
123+
84124
export default router;

‎webapp/src/views/Login.vue

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<template>
2+
<div class="login-container">
3+
<div class="welcome-section">
4+
<h1 style="font-size: 4rem">Welcome to Datalab</h1>
5+
<p>datalab is a place to store experimental data and the connections between them.</p>
6+
<p>
7+
datalab is open source (MIT license) and development occurs on GitHub at
8+
<a href="https://github.com/datalab-org/datalab"
9+
><font-awesome-icon :icon="['fab', 'github']" />&nbsp;datalab-org/datalab</a
10+
>
11+
with documentation available on
12+
<a href="https://the-datalab.readthedocs.io"
13+
><font-awesome-icon icon="book" />&nbsp;ReadTheDocs</a
14+
>.
15+
</p>
16+
<router-link to="/about" class="btn btn-default">Learn More</router-link>
17+
</div>
18+
19+
<div class="login-options">
20+
<div
21+
v-if="logo_url != null"
22+
class="pt-3 logo-container"
23+
style="display: flex; justify-content: center; align-items: center"
24+
>
25+
<a
26+
v-if="homepage_url != null"
27+
:href="homepage_url"
28+
style="display: inline-block"
29+
target="_blank"
30+
>
31+
<img class="logo-banner" :src="logo_url" />
32+
</a>
33+
<img v-else class="logo-banner" :src="logo_url" />
34+
</div>
35+
36+
<!-- <pre style="white-space: pre-wrap">{{ ASCII }}</pre> -->
37+
<div class="login-button">
38+
<a
39+
type="button"
40+
:class="{ disabled: !showGitHub }"
41+
class="btn btn-default btn-login p-3"
42+
aria-label="Login via GitHub"
43+
:href="apiUrl + '/login/github'"
44+
>
45+
<font-awesome-icon :icon="['fab', 'github']" /> Login via GitHub
46+
</a>
47+
<a
48+
type="button"
49+
:class="{ disabled: !showORCID }"
50+
class="btn btn-default btn-login p-3"
51+
aria-label="Login via ORCID"
52+
:href="apiUrl + '/login/orcid'"
53+
>
54+
<font-awesome-icon class="orcid-icon" :icon="['fab', 'orcid']" /> Login via ORCID
55+
</a>
56+
<a
57+
type="button"
58+
:class="{ disabled: !showEmail }"
59+
class="btn btn-default btn-login p-3"
60+
aria-label="Login via email"
61+
@click="emailModalIsOpen = true"
62+
>
63+
<font-awesome-icon :icon="['fa', 'envelope']" /> Login via email
64+
</a>
65+
</div>
66+
</div>
67+
</div>
68+
<GetEmailModal v-model="emailModalIsOpen" />
69+
</template>
70+
71+
<script>
72+
import GetEmailModal from "@/components/GetEmailModal.vue";
73+
import { getInfo } from "@/server_fetch_utils.js";
74+
import { API_URL, LOGO_URL, HOMEPAGE_URL } from "@/resources.js";
75+
76+
export default {
77+
components: {
78+
GetEmailModal,
79+
},
80+
data() {
81+
return {
82+
emailModalIsOpen: false,
83+
apiUrl: API_URL,
84+
logo_url: LOGO_URL,
85+
homepage_url: HOMEPAGE_URL,
86+
ASCII: `
87+
oooo o8 o888 oooo
88+
ooooo888 ooooooo o888oo ooooooo 888 ooooooo 888ooooo
89+
888 888 ooooo888 888 ooooo888 888 ooooo888 888 888
90+
888 888 888 888 888 888 888 888 888 888 888 888
91+
88ooo888o 88ooo88 8o 888o 88ooo88 8o o888o 88ooo88 8o o888ooo88
92+
`,
93+
};
94+
},
95+
computed: {
96+
showGitHub() {
97+
return this.$store.state.serverInfo?.features?.auth_mechanisms?.github ?? false;
98+
},
99+
showORCID() {
100+
return this.$store.state.serverInfo?.features?.auth_mechanisms?.orcid ?? false;
101+
},
102+
showEmail() {
103+
return this.$store.state.serverInfo?.features?.auth_mechanisms?.email ?? false;
104+
},
105+
},
106+
async mounted() {
107+
getInfo();
108+
},
109+
};
110+
</script>
111+
112+
<style scoped>
113+
.login-container {
114+
display: flex;
115+
flex-direction: row;
116+
height: 100vh;
117+
}
118+
119+
.welcome-section {
120+
flex: 1;
121+
gap: 1.5em;
122+
padding: 2rem;
123+
display: flex;
124+
flex-direction: column;
125+
justify-content: center;
126+
text-align: center;
127+
align-items: center;
128+
background-color: lightblue;
129+
}
130+
131+
.login-options {
132+
flex: 1;
133+
display: flex;
134+
flex-direction: column;
135+
align-items: center;
136+
justify-content: center;
137+
gap: 1rem;
138+
padding: 2rem;
139+
}
140+
141+
.login-button {
142+
display: flex;
143+
flex-direction: column;
144+
width: 50%;
145+
gap: 2em;
146+
}
147+
148+
.logo-container {
149+
position: fixed;
150+
top: 0;
151+
}
152+
153+
.logo-banner {
154+
max-width: 200px;
155+
width: 100px;
156+
display: block;
157+
margin-left: auto;
158+
margin-right: auto;
159+
filter: alpha(opacity=100);
160+
opacity: 1;
161+
}
162+
163+
.btn-login {
164+
font-size: 1.3rem;
165+
}
166+
167+
a > .logo-banner:hover {
168+
filter: alpha(opacity=40);
169+
opacity: 0.4;
170+
}
171+
172+
.orcid-icon {
173+
color: #a6ce39;
174+
}
175+
</style>

0 commit comments

Comments
 (0)