Skip to content

Commit 0c89b2f

Browse files
NoelDeMartintimea-solid
NoelDeMartin
authored and
timea-solid
committed
#445 Fix auth in browse.html and browse-test.html
1 parent 25c5b32 commit 0c89b2f

3 files changed

Lines changed: 41 additions & 170 deletions

File tree

‎src/styles/mash.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ body {
4242
color: inherit;
4343
}
4444

45-
solid-panes-header {
45+
solid-panes-header, #PageHeader {
4646
position: fixed;
4747
top: 0;
4848
left: 0;
@@ -1642,6 +1642,7 @@ label:focus-visible {
16421642
/* Generated by AI */
16431643
@media screen and (max-width: 768px) {
16441644
solid-panes-header,
1645+
#PageHeader,
16451646
#PageFooter {
16461647
width: 100%;
16471648
}

‎static/browse-test.html‎

Lines changed: 34 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,6 @@
1818
<script type="text/javascript" src="mashlib.js"></script>
1919
<script>
2020
document.addEventListener('DOMContentLoaded', function() {
21-
const authn = SolidLogic.authn
22-
const authSession = SolidLogic.authSession
23-
const store = SolidLogic.store
2421
const dom = document
2522
// Disable cross-site proxy - modern Solid servers support CORS
2623
// $rdf.Fetcher.crossSiteProxyTemplate = self.origin + '/xss?uri={uri}'
@@ -37,14 +34,10 @@
3734

3835
var subject = $rdf.sym(uri);
3936
outliner.GotoSubject(subject, true, undefined, true, undefined);
40-
mungeLoginArea();
4137
}
4238

4339
const uriField = dom.getElementById('uriField')
4440
const goButton = dom.getElementById('goButton')
45-
const loginButtonArea = document.getElementById("loginButtonArea");
46-
const webIdArea = dom.getElementById('webId')
47-
const banner = dom.getElementById('PageHeader')
4841
const pageHeader = dom.getElementById('PageHeader')
4942

5043
function updateHeaderOffset () {
@@ -55,7 +48,7 @@
5548

5649
window.addEventListener('resize', updateHeaderOffset)
5750
updateHeaderOffset()
58-
51+
5952
uriField.addEventListener('keyup', function (e) {
6053
if (e.keyCode === 13) {
6154
go(e)
@@ -68,82 +61,52 @@
6861
uriField.value = initial
6962
go()
7063
}
71-
async function mungeLoginArea(){
72-
loginButtonArea.innerHTML="";
73-
if(uriField.value) {
74-
loginButtonArea.appendChild(UI.login.loginStatusBox(document, null, {}))
75-
}
76-
const me = authn.currentUser()
77-
if (me) {
78-
const logoutButton = loginButtonArea.querySelector('input');
79-
logoutButton.value = "Logout";
80-
let displayId = `&lt;${me.value}>`;
81-
webIdArea.innerHTML = displayId;
82-
banner.style.backgroundColor="#bbccbb";
83-
} else {
84-
banner.style.backgroundColor="#ccbbbb";
85-
}
86-
loginButtonArea.style.display="inline-block";
87-
updateHeaderOffset()
88-
}
89-
90-
if (authSession) {
91-
authSession.events.on("login", () => {
92-
mungeLoginArea();
93-
go()
94-
})
95-
authSession.events.on("logout", () => {
96-
mungeLoginArea();
97-
webIdArea.innerHTML = "public user";
98-
go()
99-
})
100-
authSession.events.on("sessionRestore", (url) => {
101-
mungeLoginArea();
102-
go()
103-
})
104-
}
105-
mungeLoginArea();
10664
});
10765
</script>
10866
</head>
10967
<body>
110-
<header id="PageHeader" role="banner" class="header-mash">
111-
SolidOS Databrowser
112-
<div class="input-row" id="inputArea">
113-
Viewing <input id="uriField" type="text" class="uri-field" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
68+
<solid-ui-provider>
69+
<header id="PageHeader" role="banner" class="header-mash">
70+
SolidOS Databrowser
71+
<div class="input-row" id="inputArea">
72+
Viewing <input id="uriField" type="text" class="uri-field" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
73+
</div>
74+
</header>
75+
<div class="user-row">
76+
<solid-ui-account></solid-ui-account>
11477
</div>
115-
</header>
116-
<div class="user-row">
117-
As user <span id="webId">&lt;public user></span>
118-
<span id="loginButtonArea"></span>
119-
</div>
120-
<main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
78+
<main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
79+
<table
80+
id="OutlineView"
81+
class="outline-view"
82+
aria-label="Resource browser"
83+
style="width: 100%"
84+
>
85+
</table>
12186

122-
<table
123-
id="OutlineView"
124-
class="outline-view"
125-
aria-label="Resource browser"
126-
style="width: 100%"
127-
>
128-
</table>
87+
<section
88+
id="GlobalDashboard"
89+
class="global-dashboard"
90+
aria-label="Dashboard"
91+
hidden
92+
>
93+
</section>
12994

130-
<section
131-
id="GlobalDashboard"
132-
class="global-dashboard"
133-
aria-label="Dashboard"
134-
hidden
135-
>
136-
</section>
95+
</main>
13796

138-
</main>
97+
<footer id="PageFooter" role="contentinfo"></footer>
98+
</solid-ui-provider>
13999

140-
<footer id="PageFooter" role="contentinfo"></footer>
141100
<style>
101+
body {
102+
padding-top: calc(var(--browse-header-offset, var(--app-header-height, 3.8rem)) + 0.35rem);
103+
}
104+
.outline-view {
105+
width: 100%;
106+
}
142107
.header-mash {
143108
padding:1em !important;
144109
}
145-
.input-row {
146-
}
147110
.browser-main {
148111
margin-top: 0 !important;
149112
}
@@ -153,38 +116,13 @@
153116
padding-bottom: 0.5em;
154117
margin-left:1em;
155118
}
156-
#loginButtonArea input {
157-
display:inline-block;
158-
margin:0.25em !important;
159-
padding:0.25em !important;
160-
}
161-
#webId {
162-
display:inline-block;
163-
padding-top:0.6em;
164-
padding-bottom:0.6em;
165-
}
166119
#uriField, .uri-field {
167120
font-size:100%;
168121
min-width:25em;
169122
padding:0.5em;
170123
width:70%;
171124
margin-top:0.6em !important;
172125
}
173-
174-
/* Local fix: make full-screen idp popup overlay appear above all fixed page elements */
175-
div[style*="position: fixed"][style*="justify-content: center"][style*="align-items: center"],
176-
div[style*="min-width: 400px"][style*="box-shadow"],
177-
div[style*="z-index : 10"],
178-
div[style*="z-index: 10"] {
179-
z-index: 2147483647 !important;
180-
top: 0 !important;
181-
left: 0 !important;
182-
right: 0 !important;
183-
bottom: 0 !important;
184-
justify-content: center !important;
185-
align-items: center !important;
186-
}
187-
188126
</style>
189127

190128
</body>

‎static/browse.html‎

Lines changed: 5 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,6 @@
1818
<script type="text/javascript" src="mashlib.js"></script>
1919
<script>
2020
document.addEventListener('DOMContentLoaded', function() {
21-
const authn = SolidLogic.authn
22-
const authSession = SolidLogic.authSession
23-
const store = SolidLogic.store
2421
const dom = document
2522
// Disable cross-site proxy - modern Solid servers support CORS
2623
// $rdf.Fetcher.crossSiteProxyTemplate = self.origin + '/xss?uri={uri}'
@@ -37,15 +34,11 @@
3734

3835
var subject = $rdf.sym(uri);
3936
outliner.GotoSubject(subject, true, undefined, true, undefined);
40-
mungeLoginArea();
4137
}
4238

4339
const uriField = dom.getElementById('uriField')
4440
const goButton = dom.getElementById('goButton')
45-
const loginButtonArea = document.getElementById("loginButtonArea");
46-
const webIdArea = dom.getElementById('webId')
47-
const banner = dom.getElementById('PageHeader')
48-
const pageHeader = dom.querySelector('solid-panes-header')
41+
const pageHeader = dom.getElementById('PageHeader')
4942

5043
function updateHeaderOffset () {
5144
if (!pageHeader) return
@@ -68,41 +61,6 @@
6861
uriField.value = initial
6962
go()
7063
}
71-
async function mungeLoginArea(){
72-
loginButtonArea.innerHTML="";
73-
if(uriField.value) {
74-
loginButtonArea.appendChild(UI.login.loginStatusBox(document, null, {}))
75-
}
76-
const me = authn.currentUser()
77-
if (me) {
78-
const logoutButton = loginButtonArea.querySelector('input');
79-
logoutButton.value = "Logout";
80-
let displayId = `&lt;${me.value}>`;
81-
webIdArea.innerHTML = displayId;
82-
banner.style.backgroundColor="#bbccbb";
83-
} else {
84-
banner.style.backgroundColor="#ccbbbb";
85-
}
86-
loginButtonArea.style.display="inline-block";
87-
updateHeaderOffset()
88-
}
89-
90-
if (authSession) {
91-
authSession.events.on("login", () => {
92-
mungeLoginArea();
93-
go()
94-
})
95-
authSession.events.on("logout", () => {
96-
mungeLoginArea();
97-
webIdArea.innerHTML = "public user";
98-
go()
99-
})
100-
authSession.events.on("sessionRestore", (url) => {
101-
mungeLoginArea();
102-
go()
103-
})
104-
}
105-
mungeLoginArea();
10664
});
10765
</script>
10866
</head>
@@ -115,11 +73,9 @@
11573
</div>
11674
</header>
11775
<div class="user-row">
118-
As user <span id="webId">&lt;public user></span>
119-
<span id="loginButtonArea"></span>
76+
<solid-ui-account></solid-ui-account>
12077
</div>
12178
<main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
122-
12379
<table
12480
id="OutlineView"
12581
class="outline-view"
@@ -142,14 +98,15 @@
14298
</solid-ui-provider>
14399

144100
<style>
101+
body {
102+
padding-top: calc(var(--browse-header-offset, var(--app-header-height, 3.8rem)) + 0.35rem);
103+
}
145104
.outline-view {
146105
width: 100%;
147106
}
148107
.header-mash {
149108
padding:1em !important;
150109
}
151-
.input-row {
152-
}
153110
.browser-main {
154111
margin-top: 0 !important;
155112
}
@@ -159,38 +116,13 @@
159116
padding-bottom: 0.5em;
160117
margin-left:1em;
161118
}
162-
#loginButtonArea input {
163-
display:inline-block;
164-
margin:0.25em !important;
165-
padding:0.25em !important;
166-
}
167-
#webId {
168-
display:inline-block;
169-
padding-top:0.6em;
170-
padding-bottom:0.6em;
171-
}
172119
#uriField, .uri-field {
173120
font-size:100%;
174121
min-width:25em;
175122
padding:0.5em;
176123
width:70%;
177124
margin-top:0.6em !important;
178125
}
179-
180-
/* Local fix: make full-screen idp popup overlay appear above all fixed page elements */
181-
div[style*="position: fixed"][style*="justify-content: center"][style*="align-items: center"],
182-
div[style*="min-width: 400px"][style*="box-shadow"],
183-
div[style*="z-index : 10"],
184-
div[style*="z-index: 10"] {
185-
z-index: 2147483647 !important;
186-
top: 0 !important;
187-
left: 0 !important;
188-
right: 0 !important;
189-
bottom: 0 !important;
190-
justify-content: center !important;
191-
align-items: center !important;
192-
}
193-
194126
</style>
195127

196128
</body>

0 commit comments

Comments
 (0)