Skip to content

Commit 0cd2e07

Browse files
NoelDeMartinNoelDeMartin
committed
#445 Fix auth in browse.html and browse-test.html
1 parent d07e9bf commit 0cd2e07

3 files changed

Lines changed: 36 additions & 171 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: 31 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('inputArea')
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,86 +61,53 @@
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>
142101
body {
143102
padding-top: calc(var(--browse-header-offset, var(--app-header-height, 3.8rem)) + 0.35rem);
144103
}
104+
.outline-view {
105+
width: 100%;
106+
}
145107
.header-mash {
146108
padding:1em !important;
147109
background-color:#ccbbbb !important;
148110
}
149-
.input-row {
150-
}
151111
.browser-main {
152112
margin-top: 0 !important;
153113
}
@@ -157,38 +117,13 @@
157117
padding-bottom: 0.5em;
158118
margin-left:1em;
159119
}
160-
#loginButtonArea input {
161-
display:inline-block;
162-
margin:0.25em !important;
163-
padding:0.25em !important;
164-
}
165-
#webId {
166-
display:inline-block;
167-
padding-top:0.6em;
168-
padding-bottom:0.6em;
169-
}
170120
#uriField, .uri-field {
171121
font-size:100%;
172122
min-width:25em;
173123
padding:0.5em;
174124
width:70%;
175125
margin-top:0.6em !important;
176126
}
177-
178-
/* Local fix: make full-screen idp popup overlay appear above all fixed page elements */
179-
div[style*="position: fixed"][style*="justify-content: center"][style*="align-items: center"],
180-
div[style*="min-width: 400px"][style*="box-shadow"],
181-
div[style*="z-index : 10"],
182-
div[style*="z-index: 10"] {
183-
z-index: 2147483647 !important;
184-
top: 0 !important;
185-
left: 0 !important;
186-
right: 0 !important;
187-
bottom: 0 !important;
188-
justify-content: center !important;
189-
align-items: center !important;
190-
}
191-
192127
</style>
193128

194129
</body>

‎static/browse.html‎

Lines changed: 3 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,9 @@
1515
}, true);
1616
</script>
1717
<link type="text/css" rel="stylesheet" href="mash.css" />
18-
<script type="text/javascript" src="mashlib.js"></script>
18+
<script type="text/javascript" src="mashlib.min.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('inputArea')
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"
@@ -152,8 +108,6 @@
152108
padding:1em !important;
153109
background-color:#ccbbbb !important;
154110
}
155-
.input-row {
156-
}
157111
.browser-main {
158112
margin-top: 0 !important;
159113
}
@@ -163,38 +117,13 @@
163117
padding-bottom: 0.5em;
164118
margin-left:1em;
165119
}
166-
#loginButtonArea input {
167-
display:inline-block;
168-
margin:0.25em !important;
169-
padding:0.25em !important;
170-
}
171-
#webId {
172-
display:inline-block;
173-
padding-top:0.6em;
174-
padding-bottom:0.6em;
175-
}
176120
#uriField, .uri-field {
177121
font-size:100%;
178122
min-width:25em;
179123
padding:0.5em;
180124
width:70%;
181125
margin-top:0.6em !important;
182126
}
183-
184-
/* Local fix: make full-screen idp popup overlay appear above all fixed page elements */
185-
div[style*="position: fixed"][style*="justify-content: center"][style*="align-items: center"],
186-
div[style*="min-width: 400px"][style*="box-shadow"],
187-
div[style*="z-index : 10"],
188-
div[style*="z-index: 10"] {
189-
z-index: 2147483647 !important;
190-
top: 0 !important;
191-
left: 0 !important;
192-
right: 0 !important;
193-
bottom: 0 !important;
194-
justify-content: center !important;
195-
align-items: center !important;
196-
}
197-
198127
</style>
199128

200129
</body>

0 commit comments

Comments
 (0)