trying to port web app starter from PHP

2026-04-19 09:38:23 +00:00
parent 46d98a092f
commit be514d63d6
546 changed files with 76910 additions and 2807 deletions
@@ -0,0 +1,100 @@
+#load "../../lib/app.uce"
+
+RENDER(Request& context)
+{
+	String title = first(context.call["title"].to_string(), "Sign in with OAuth");
+	String subtitle = first(context.call["subtitle"].to_string(), "Choose your preferred authentication method");
+	String callback_url = first(context.call["callback_url"].to_string(), starter_link("auth/callback", context));
+
+	DTree services = context.call["services"];
+	if(services.get_type_name() != "array" || services["google"]["name"].to_string() == "")
+	{
+		services["google"]["name"] = "Google";
+		services["google"]["color"] = "#4285f4";
+		services["google"]["icon"] = "fab fa-google";
+		services["google"]["scope"] = "openid email profile";
+		services["google"]["auth_url"] = "https://accounts.google.com/o/oauth2/v2/auth";
+
+		services["github"]["name"] = "GitHub";
+		services["github"]["color"] = "#333333";
+		services["github"]["icon"] = "fab fa-github";
+		services["github"]["scope"] = "user:email";
+		services["github"]["auth_url"] = "https://github.com/login/oauth/authorize";
+
+		services["discord"]["name"] = "Discord";
+		services["discord"]["color"] = "#5865f2";
+		services["discord"]["icon"] = "fab fa-discord";
+		services["discord"]["scope"] = "identify email";
+		services["discord"]["auth_url"] = "https://discord.com/api/oauth2/authorize";
+
+		services["twitch"]["name"] = "Twitch";
+		services["twitch"]["color"] = "#9146ff";
+		services["twitch"]["icon"] = "fab fa-twitch";
+		services["twitch"]["scope"] = "user:read:email";
+		services["twitch"]["auth_url"] = "https://id.twitch.tv/oauth2/authorize";
+	}
+
+	<>
+		<form class="card">
+			<div>
+				<h2><?= title ?></h2>
+				<label><?= subtitle ?></label>
+			</div>
+			<? services.each([&](DTree service, String service_key) {
+				String client_id = context.call[service_key + "_client_id"].to_string();
+				String handler_name = starter_safe_name(service_key);
+				String service_name = service["name"].to_string();
+				String scope = service["scope"].to_string();
+				String auth_url = service["auth_url"].to_string();
+				String store_url = starter_link("auth/store-oauth-session", context);
+				?><div data-service="<?= service_key ?>">
+					<button type="button" class="btn" onclick='initiateOAuth_<?= handler_name ?>()'>
+						<i class="<?= service["icon"].to_string() ?>" style="color: <?= service["color"].to_string() ?>"></i>
+						Continue with <?= service_name ?>
+					</button>
+					<div class="loading" style="display: none;"><span>Connecting...</span></div>
+					<label>Secure authentication via <?= service_name ?></label>
+					<script>
+						window.initiateOAuth_<?= handler_name ?> = function () {
+							const wrapper = document.querySelector('[data-service="<?= service_key ?>"]');
+							if (!wrapper) return;
+							const button = wrapper.querySelector('.btn');
+							const loading = wrapper.querySelector('.loading');
+							if (button) button.style.display = 'none';
+							if (loading) loading.style.display = 'block';
+
+							const clientId = <?: starter_json_string(client_id) ?>;
+							if (!clientId || clientId.indexOf('YOUR_') === 0) {
+								alert('<?= service_name ?> OAuth is not configured yet.');
+								if (button) button.style.display = '';
+								if (loading) loading.style.display = 'none';
+								return;
+							}
+
+							const state = btoa(Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)).replace(/[^a-zA-Z0-9]/g, '');
+							const params = new URLSearchParams({
+								client_id: clientId,
+								redirect_uri: <?: starter_json_string(callback_url) ?>,
+								scope: <?: starter_json_string(scope) ?>,
+								response_type: 'code',
+								state: state
+							});
+
+							sessionStorage.setItem('oauth_state', state);
+							sessionStorage.setItem('oauth_service', <?: starter_json_string(service_key) ?>);
+
+							fetch(<?: starter_json_string(store_url) ?>, {
+								method: 'POST',
+								headers: {'Content-Type': 'application/json'},
+								body: JSON.stringify({oauth_service: <?: starter_json_string(service_key) ?>, oauth_state: state})
+							}).catch(console.error).finally(() => {
+								window.location.href = <?: starter_json_string(auth_url) ?> + '?' + params.toString();
+							});
+						};
+					</script>
+				</div><?
+			}); ?>
+			<div class="banner" id="oauth-status" style="display: none;"></div>
+		</form>
+	</>
+}