obsidian-atmosphere/oauth-callback.html at main · treethought/obsidian-atmosphere · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Atmosphere OAuth - Redirecting...</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			padding: 1rem;
		}
		.container {
			text-align: center;
			padding: 3rem 2rem;
			background: white;
			border-radius: 16px;
			box-shadow: 0 20px 60px rgba(0,0,0,0.3);
			max-width: 500px;
			width: 100%;
		}
		h1 {
			color: #667eea;
			margin: 0 0 1rem 0;
			font-size: 1.75rem;
			font-weight: 600;
		}
		.spinner {
			margin: 2rem auto;
			width: 50px;
			height: 50px;
			border: 4px solid #f3f3f3;
			border-top: 4px solid #667eea;
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		p {
			color: #6b7280;
			margin: 1rem 0;
			line-height: 1.6;
		}
		.manual-link {
			margin-top: 2rem;
			padding: 1rem;
			background: #f9fafb;
			border-radius: 8px;
			border: 1px solid #e5e7eb;
			display: none;
		}
		.manual-link.show {
			display: block;
		}
		.link-text {
			word-break: break-all;
			font-family: monospace;
			font-size: 0.85rem;
			color: #374151;
			padding: 0.5rem;
			background: white;
			border-radius: 4px;
			margin-top: 0.5rem;
		}
		button {
			margin-top: 1rem;
			padding: 0.75rem 1.5rem;
			background: #667eea;
			color: white;
			border: none;
			border-radius: 8px;
			font-size: 1rem;
			font-weight: 500;
			cursor: pointer;
			transition: background 0.2s;
		}
		button:hover {
			background: #5568d3;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>✅ Authentication Successful!</h1>
		<div class="spinner"></div>
		<p id="status">Redirecting to Obsidian...</p>
		<div class="manual-link" id="manual-link">
			<p>If Obsidian doesn't open automatically:</p>
			<p style="font-size: 0.9rem; margin-bottom: 0.5rem;">1. Copy the link below</p>
			<div class="link-text" id="link-text"></div>
			<button onclick="copyLink()">Copy Link</button>
			<p style="font-size: 0.9rem; margin-top: 1rem;">2. Open Obsidian and paste it in your browser</p>
		</div>
	</div>

	<script>
		(function() {
			try {
				// extract OAuth parameters from URL hash (not search string)
				const params = new URLSearchParams(window.location.hash.slice(1));

				const obsidianUri = `obsidian://atmosphere-oauth?${params.toString()}`;

				// store the URI for manual copy
				document.getElementById('link-text').textContent = obsidianUri;

				window.location.href = obsidianUri;

				setTimeout(function() {
					const spinner = document.querySelector('.spinner');
					if (spinner) spinner.style.display = 'none';

					// Show success message
					document.querySelector('h1').textContent = '✅ Redirected!';
					document.getElementById('status').textContent = 'Return to Obsidian to complete login.';

					setTimeout(function() {
						try {
							window.close();
						} catch (e) {
							document.getElementById('status').textContent = 'You can close this window now.';
						}
					}, 500);
				}, 500);

				// show manual instructions after a longer delay if still open
				setTimeout(function() {
					document.getElementById('manual-link').classList.add('show');
				}, 3000);

			} catch (error) {
				console.error('Redirect error:', error);
				document.querySelector('.spinner').style.display = 'none';
				document.getElementById('status').textContent = 'An error occurred during redirect';
				document.getElementById('manual-link').classList.add('show');
			}
		})();

		function copyLink() {
			const linkText = document.getElementById('link-text').textContent;
			navigator.clipboard.writeText(linkText).then(function() {
				const btn = event.target;
				btn.textContent = '✓ Copied!';
				setTimeout(function() {
					btn.textContent = 'Copy Link';
				}, 2000);
			}).catch(function(err) {
				console.error('Failed to copy:', err);
				alert('Failed to copy. Please select and copy the link manually.');
			});
		}
	</script>
</body>
</html>