Add sync page

pull/653/merge
Varun Patil 2023-05-18 19:50:19 -07:00
parent 9464a54481
commit 94b8fc82d6
6 changed files with 82 additions and 25 deletions

View File

@ -26,7 +26,15 @@ body {
text-align: center; text-align: center;
} }
p { .animatable {
transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
}
.invisible {
transform: translateY(10px);
opacity: 0;
}
p, div.p {
color: white; color: white;
margin-bottom: 30px; margin-bottom: 30px;
line-height: 1.5em;; line-height: 1.5em;;
@ -78,6 +86,7 @@ input.m-input:focus {
border: none; border: none;
border-radius: 20px; border-radius: 20px;
cursor: pointer; cursor: pointer;
text-decoration: none;
transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out;
} }
@ -90,7 +99,6 @@ input.m-input:focus {
.m-button.link { .m-button.link {
background-color: unset; background-color: unset;
color: var(--fg-color); color: var(--fg-color);
text-decoration: none;
} }
.login-button { .login-button {

View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Memories</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="main" class="container animatable">
<img src="memories.svg" alt="Memories Logo" class="logo">
<p id="waiting" class="animatable">
Waiting for login to complete <br/>
Keep this page open in the background
</p>
<div id="sync" class="p animatable invisible">
You are now logged in to the server!
<br/><br/>
You can set up automatic uploads from this device using the
Nextcloud mobile app. Click the button below to download the app,
or skip this step and continue.
<br/>
<a class="m-button login-button" href="https://play.google.com/store/apps/details?id=com.nextcloud.client">
Set up automatic upload
</a>
<br/>
<p id="conn-error" class="error"></p>
<button class="m-button link" onclick="start()">
Continue
</button>
</div>
</div>
<script>
window.loggedIn = async () => {
const waiting = document.getElementById('waiting');
waiting.classList.add('invisible');
await new Promise(resolve => setTimeout(resolve, 700));
waiting.remove();
document.getElementById('sync').classList.remove('invisible');
}
async function start() {
const sync = document.getElementById('main');
sync.classList.add('invisible');
await new Promise(resolve => setTimeout(resolve, 700));
window.nativex?.reload();
}
</script>
</body>
</html>

View File

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Memories</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<img src="memories.svg" alt="Memories Logo" class="logo">
<p>
Waiting for login to complete <br/>
Keep this page open in the background
</p>
</body>
</html>

View File

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<div class="container"> <div id="main" class="container animatable invisible">
<img src="memories.svg" alt="Memories Logo" class="logo"> <img src="memories.svg" alt="Memories Logo" class="logo">
<p> <p>
Start organizing and sharing your precious moments. Start organizing and sharing your precious moments.
@ -21,6 +21,7 @@
<button class="m-button login-button" id="login"> <button class="m-button login-button" id="login">
Continue to Login Continue to Login
</button> </button>
<br/>
<p id="conn-error" class="error"></p> <p id="conn-error" class="error"></p>
@ -108,7 +109,10 @@
// Set action bar color // Set action bar color
const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--theme-color'); const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--theme-color');
globalThis.nativex.setThemeColor(themeColor, true); globalThis.nativex?.setThemeColor(themeColor, true);
// Make container visible
document.getElementById('main').classList.remove('invisible');
</script> </script>
</body> </body>
</html> </html>

View File

@ -100,6 +100,13 @@ import java.net.URLDecoder
} }
} }
@JavascriptInterface
fun reload() {
mCtx.runOnUiThread {
mCtx.loadDefaultUrl()
}
}
@JavascriptInterface @JavascriptInterface
fun login(baseUrl: String?, loginFlowUrl: String?) { fun login(baseUrl: String?, loginFlowUrl: String?) {
if (baseUrl == null || loginFlowUrl == null) return; if (baseUrl == null || loginFlowUrl == null) return;

View File

@ -85,7 +85,7 @@ import java.net.SocketTimeoutException
private fun pollLogin(pollUrl: String, pollToken: String, baseUrl: String) { private fun pollLogin(pollUrl: String, pollToken: String, baseUrl: String) {
mCtx.binding.webview.post { mCtx.binding.webview.post {
mCtx.binding.webview.loadUrl("file:///android_asset/waiting.html") mCtx.binding.webview.loadUrl("file:///android_asset/sync.html")
} }
val client = OkHttpClient() val client = OkHttpClient()
@ -130,9 +130,9 @@ import java.net.SocketTimeoutException
mCtx.runOnUiThread { mCtx.runOnUiThread {
// Save login info (also updates header) // Save login info (also updates header)
storeCredentials(baseUrl, loginName, appPassword) storeCredentials(baseUrl, loginName, appPassword)
mCtx.runOnUiThread {
mCtx.loadDefaultUrl() // Go to next screen
} mCtx.binding.webview.evaluateJavascript("window.loggedIn()", {})
} }
return; return;