Skip to content

Commit fa56ce5

Browse files
linuxontheweblinuxontheweb
committed
I'm crushing your head!
1 parent 082bb24 commit fa56ce5

2 files changed

Lines changed: 178 additions & 20 deletions

File tree

‎list.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
["README.md/2181","app",["3d",["index.html/1098"]],"apps",["Audio.js/4093","BinView.js/9814","Folder.js/11196","Help.js/979","MediaPlayer.js/2074","Music.js/4844","Terminal.js/100191","TextEdit.js/5301","WorkMan.js/3808","YourApp.js/418","dev",["GetPoint.js/551","Grok.js/14796","Poker.js/36551","Three.js/5119"],"games",["Arcade.js/12599"],"hw",["MidiCtl.js/3691"],"media",["2Cameras.js/3258","Camera.js/3673","MediaPlayer.js/16115","VideoCutter.js/61912"],"template",["Basic.js/489","Template.js/396","WebAudio.js/2877"],"util",["HTML.js/1428","ImageView.js/2703","Unicoder.js/16896"]],"coms",["audio.js/1766","esprima.js/171872","extra.js/11288","fs.js/28766","games",["cfr.js/115420","poker.js/107498","slum.js/71075","zhold",["poker1.js/25062"]],"mail.js/44010","shell.js/175037","template.js/336","test",["dummy.js/21"],"test.js/2086","yt.js/66863","zhold",["mail.js/22724"]],"desk",["index.html/1184"],"index.html/486","login",["index.html/4701"],"mods",["audio",["multi_freq_worklet.js/1502","random_walk_worklet.js/3039"],"games",["GBEmulator.js/9708","NESEmulator.js/222309","binjgb.wasm/87232"],"help",["shell.js/3591"],"hw",["midi.js/2323"],"lang",["shell.js/185134"],"term",["email.js/10406","less.js/19318","log.js/13292","vim.js/162675"],"util",["libwabt.js/1299054","math.js/12125","pretty.js/93856","showdown.js/87205","walt.js/204893","wasm.js/42764","wasmparser.js/34331","webmparser.js/58730"],"workers",["poker.js/37420"]],"node",["server.js/7907","svcs",["imap.js/17772","mount.js/16553","smtp.js/1359","template.js/1831","ws.js/2156","ytdl.js/11982"]],"shell",["index.html/959"],"sys",["config.js/9365","desk.js/219258","fs.js/67626","terminal.js/4300","three.js/3443","util.js/32970"],"www",["blog.css/181","desk.css/1831","docs",["blog-template.html/291","help.html/9104","what-it-is.html/4370"],"examples",["test.sh/66"],"favicon.ico/15086","lotw256.png/41075","lotw48.png/2966","stuff",["noise.html/1669"]]]
1+
["README.md/2181","app",["3d",["index.html/1098"]],"apps",["Audio.js/4093","BinView.js/9814","Folder.js/11196","Help.js/979","MediaPlayer.js/2074","Music.js/4844","Terminal.js/100191","TextEdit.js/5301","WorkMan.js/3808","YourApp.js/418","dev",["GetPoint.js/551","Grok.js/14796","Poker.js/36551","Three.js/5119"],"games",["Arcade.js/12599"],"hw",["MidiCtl.js/3691"],"media",["2Cameras.js/3258","Camera.js/3673","MediaPlayer.js/16115","VideoCutter.js/61912"],"template",["Basic.js/489","Template.js/396","WebAudio.js/2877"],"util",["HTML.js/1428","ImageView.js/2703","Unicoder.js/16896"]],"coms",["audio.js/1766","esprima.js/171872","extra.js/11288","fs.js/28766","games",["cfr.js/115420","poker.js/107498","slum.js/71075","zhold",["poker1.js/25062"]],"mail.js/44010","shell.js/175037","template.js/336","test",["dummy.js/21"],"test.js/2086","yt.js/66863","zhold",["mail.js/22724"]],"desk",["index.html/1184"],"index.html/486","login",["index.html/10330"],"mods",["audio",["multi_freq_worklet.js/1502","random_walk_worklet.js/3039"],"games",["GBEmulator.js/9708","NESEmulator.js/222309","binjgb.wasm/87232"],"help",["shell.js/3591"],"hw",["midi.js/2323"],"lang",["shell.js/185134"],"term",["email.js/10406","less.js/19318","log.js/13292","vim.js/162675"],"util",["libwabt.js/1299054","math.js/12125","pretty.js/93856","showdown.js/87205","walt.js/204893","wasm.js/42764","wasmparser.js/34331","webmparser.js/58730"],"workers",["poker.js/37420"]],"node",["server.js/7907","svcs",["imap.js/17772","mount.js/16553","smtp.js/1359","template.js/1831","ws.js/2156","ytdl.js/11982"]],"shell",["index.html/959"],"sys",["config.js/9365","desk.js/219258","fs.js/67626","terminal.js/4300","three.js/3443","util.js/32970"],"www",["blog.css/181","desk.css/1831","docs",["blog-template.html/291","help.html/9104","what-it-is.html/4370"],"examples",["test.sh/66"],"favicon.ico/15086","lotw256.png/41075","lotw48.png/2966","stuff",["noise.html/1669"]]]

‎login/index.html‎

Lines changed: 177 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,122 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Firebase Auth</title>
6+
<link rel="icon" href="/www/favicon.ico">
7+
<title>Firebase Auth for LOTW</title>
8+
<style>
9+
.maindiv{
10+
display: flex;
11+
flex-direction: column;
12+
height: 100vh;
13+
width: 100vw;
14+
align-items: center;
15+
justify-content: center;
16+
}
17+
.gsi-material-button {
18+
-moz-user-select: none;
19+
-webkit-user-select: none;
20+
-ms-user-select: none;
21+
-webkit-appearance: none;
22+
background-color: WHITE;
23+
background-image: none;
24+
border: 1px solid #747775;
25+
-webkit-border-radius: 20px;
26+
border-radius: 20px;
27+
-webkit-box-sizing: border-box;
28+
box-sizing: border-box;
29+
color: #1f1f1f;
30+
cursor: pointer;
31+
font-family: 'Roboto', arial, sans-serif;
32+
font-size: 14px;
33+
height: 40px;
34+
letter-spacing: 0.25px;
35+
outline: none;
36+
overflow: hidden;
37+
padding: 0 12px;
38+
position: relative;
39+
text-align: center;
40+
-webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
41+
transition: background-color .218s, border-color .218s, box-shadow .218s;
42+
vertical-align: middle;
43+
white-space: nowrap;
44+
width: auto;
45+
max-width: 400px;
46+
min-width: min-content;
47+
}
48+
49+
.gsi-material-button .gsi-material-button-icon {
50+
height: 20px;
51+
margin-right: 12px;
52+
min-width: 20px;
53+
width: 20px;
54+
}
55+
56+
.gsi-material-button .gsi-material-button-content-wrapper {
57+
-webkit-align-items: center;
58+
align-items: center;
59+
display: flex;
60+
-webkit-flex-direction: row;
61+
flex-direction: row;
62+
-webkit-flex-wrap: nowrap;
63+
flex-wrap: nowrap;
64+
height: 100%;
65+
justify-content: space-between;
66+
position: relative;
67+
width: 100%;
68+
}
69+
70+
.gsi-material-button .gsi-material-button-contents {
71+
-webkit-flex-grow: 1;
72+
flex-grow: 1;
73+
font-family: 'Roboto', arial, sans-serif;
74+
font-weight: 500;
75+
overflow: hidden;
76+
text-overflow: ellipsis;
77+
vertical-align: top;
78+
}
79+
80+
.gsi-material-button .gsi-material-button-state {
81+
-webkit-transition: opacity .218s;
82+
transition: opacity .218s;
83+
bottom: 0;
84+
left: 0;
85+
opacity: 0;
86+
position: absolute;
87+
right: 0;
88+
top: 0;
89+
}
90+
91+
.gsi-material-button:disabled {
92+
cursor: default;
93+
background-color: #ffffff61;
94+
border-color: #1f1f1f1f;
95+
}
96+
97+
.gsi-material-button:disabled .gsi-material-button-contents {
98+
opacity: 38%;
99+
}
100+
101+
.gsi-material-button:disabled .gsi-material-button-icon {
102+
opacity: 38%;
103+
}
104+
105+
.gsi-material-button:not(:disabled):active .gsi-material-button-state,
106+
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
107+
background-color: #303030;
108+
opacity: 12%;
109+
}
110+
111+
.gsi-material-button:not(:disabled):hover {
112+
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
113+
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
114+
}
115+
116+
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
117+
background-color: #303030;
118+
opacity: 8%;
119+
}
120+
121+
</style>
7122
</head>
8123
<body>
9124

@@ -17,26 +132,63 @@
17132
18133
-->
19134

20-
<div id="login" style="display: block; text-align: center;">
135+
<div id="login" class="maindiv">
136+
<h2>Sign in to enable LOTW+Firebase integration</h2>
137+
<b style="font-size: 20px;">(Under construction)</b>
138+
<br>
21139
<!--
22140
<input type="email" id="email" placeholder="Email">
23141
<input type="password" id="password" placeholder="Password">
24142
<br><br>
25143
<button id="signUpBtn">Sign Up</button>
26144
<button id="signInBtn">Sign In</button>
27145
-->
28-
<button id="googleSignInBtn" style="font-size: 24px;">Sign In with Google</button>
29-
<br>
146+
<!-- <button id="googleSignInBtn" style="font-size: 24px;">Sign In with Google</button>-->
147+
148+
<button disabled id="googleSignInBtn" class="gsi-material-button">
149+
<div class="gsi-material-button-state"></div>
150+
<div class="gsi-material-button-content-wrapper">
151+
<div class="gsi-material-button-icon">
152+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
153+
<path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
154+
<path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
155+
<path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
156+
<path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
157+
<path fill="none" d="M0 0h48v48H0z"></path>
158+
</svg>
159+
</div>
160+
<span class="gsi-material-button-contents">Sign in with Google</span>
161+
<span style="display: none;">Sign in with Google</span>
162+
</div>
163+
</button>
30164
<br>
31-
<button id="githubSignInBtn" style="font-size: 24px;">Sign In with GitHub</button>
165+
<button disabled id="githubSignInBtn" class="gsi-material-button">
166+
<div class="gsi-material-button-state"></div>
167+
<div class="gsi-material-button-content-wrapper">
168+
<div class="gsi-material-button-icon">
169+
170+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
171+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.08-.731.084-.716.084-.716 1.192.085 1.816 1.29 1.816 1.29 1.063 1.816 2.784 1.29 3.465.987.108-.767.422-1.29.763-1.59-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.462-2.381 1.229-3.221-.124-.3-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.046.138 3.003.404 2.292-1.552 3.3-.931 3.3-.931.653 1.653.242 2.876.118 3.176.768.84 1.228 1.911 1.228 3.221 0 4.611-2.801 5.625-5.476 5.922.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.196-6.086 8.196-11.386 0-6.627-5.373-12-12-12z"/>
172+
</svg>
173+
</div>
174+
<span class="gsi-material-button-contents">Sign in with GitHub</span>
175+
<span style="display: none;">Sign in with GitHub</span>
176+
</div>
177+
</button>
178+
179+
32180
</div>
33-
<div id="authPart" style="display: none;">
34-
<h1>Authenticated</h1>
181+
182+
183+
<div id="authPart" class="maindiv" style="display: none;">
184+
<h2>Authenticated for Firebase access!</h2>
35185
<p id="userInfo"></p>
36-
<button id="signOutBtn">Sign Out</button>
186+
<button id="signOutBtn" class="gsi-material-button">
187+
<span class="gsi-material-button-contents">Sign out</span>
188+
</button>
37189
</div>
38190

39-
<script type="module">
191+
<!--script type="module">
40192
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.5/firebase-app.js";
41193
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, signOut, GoogleAuthProvider, signInWithPopup, GithubAuthProvider } from "https://www.gstatic.com/firebasejs/10.12.5/firebase-auth.js";
42194
@@ -67,10 +219,21 @@ <h1>Authenticated</h1>
67219
if (user) {
68220
console.log(user);
69221
loginDiv.style.display = 'none';
70-
authDiv.style.display = 'block';
71-
userInfo.textContent = `Welcome, ${user.email || user.displayName}`;
222+
authDiv.style.display = 'flex';
223+
userInfo.innerHTML = `Welcome, ${user.email || user.displayName}`;
224+
let provdat = user.providerData[0];
225+
if (!provdat) return;
226+
227+
if (provdat.providerId){
228+
userInfo.innerHTML+= `<br>You are signed in via: ${provdat.providerId}`;
229+
}
230+
if (provdat.photoURL){
231+
userInfo.innerHTML+= `<br><br><div><center><img src="${provdat.photoURL}" style="max-height: 48px;max-width: 48px;" /></center></div>`;
232+
}
233+
234+
72235
} else {
73-
loginDiv.style.display = 'block';
236+
loginDiv.style.display = 'flex';
74237
authDiv.style.display = 'none';
75238
}
76239
});
@@ -115,15 +278,10 @@ <h1>Authenticated</h1>
115278
116279
// Sign out
117280
document.getElementById('signOutBtn').addEventListener('click', () => {
118-
signOut(auth).then(() => alert('Signed out'));
281+
signOut(auth).then(() => console.log('Signed out'));
119282
});
120283
121-
</script>
122-
123-
<!--
124-
125-
126-
-->
284+
</script-->
127285

128286
</body>
129287
</html>

0 commit comments

Comments
 (0)