Add sync page
parent
9464a54481
commit
94b8fc82d6
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
|
@ -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>
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue