memories/android/app/src/main/assets/welcome.html at cfe48e288bc80d58ff4aece08ffa3146c1522405 · pulsejet/memories · 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
<!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 invisible">
      <img src="memories.svg" alt="Memories Logo" class="logo" />
      <p>
        Start organizing and sharing your precious moments. Enter the address of
        your Nextcloud server to begin.
      </p>

      <input
        type="url"
        id="server-url"
        class="m-input"
        placeholder="nextcloud.example.com"
      />

      <div class="trust">
        <label for="trust-all">
          <input
            type="checkbox"
            id="trust-all"
            class="m-checkbox"
          />
          Disable certificate verification (unsafe)
        </label>
      </div>

      <button class="m-button" id="client-cert">
        Select client certificate
      </button>

      <button class="m-button login-button" id="login">
        Continue to Login
      </button>
      <br />

      <a class="m-button link" href="https://memories.gallery/install/">
        I don't have a server
      </a>
    </div>

    <script>
      const urlBox = document.getElementById("server-url");
      const loginButton = document.getElementById("login");
      const clientCertButton = document.getElementById("client-cert");
      const trustAllCheckbox = document.getElementById("trust-all");

      function validateUrl(url) {
        try {
          url = new URL(url);
          const protoOk = url.protocol === "http:" || url.protocol === "https:";
          const hostOk = url.hostname.length > 0;
          return protoOk && hostOk;
        } catch (e) {
          return false;
        }
      }

      function getUrl() {
          const url = urlBox.value.toLowerCase();
          if (!url.startsWith("http://") && !url.startsWith("https://")) {
              return "https://" + url;
          }
          return url;
      }

      function updateLoginEnabled() {
        const validUrl = validateUrl(getUrl());
        loginButton.disabled = !validUrl;
        const trustAll = trustAllCheckbox.checked;
        clientCertButton.disabled = !validUrl || trustAll;
      }

      function getMemoriesUrl() {
        const url = new URL(getUrl());

        // Add trailing slash to the path if it's not there already
        if (!url.pathname.endsWith("/")) {
          url.pathname += "/";
        }

        // Add index.php to the path if it's not there already
        if (!url.pathname.includes("index.php")) {
          url.pathname += "index.php/";
        }

        // Add path to memories
        url.pathname += "apps/memories/";

        return url;
      }

      // Update login button enabled state when the URL changes
      urlBox.addEventListener("input", updateLoginEnabled);
      updateLoginEnabled();

      // Login button click handler
      loginButton.addEventListener("click", async () => {
        try {
          urlBox.disabled = true;
          loginButton.disabled = true;

          // Abort request after 5 seconds
          const controller = new AbortController();
          const timeoutId = setTimeout(() => controller.abort(), 5000);

          // Login signal
          const encUrl = encodeURIComponent(encodeURIComponent(getMemoriesUrl().toString()));

          // Trust all certificates
          const trustAll = trustAllCheckbox.checked ? "1" : "0";

          await fetch(`http://127.0.0.1/api/login/${encUrl}?trustAll=${trustAll}`, {
            method: "GET",
            signal: controller.signal,
          });

          // API is fine, redirect to login page
          clearTimeout(timeoutId);
        } catch (e) {
          // unreachable?
        } finally {
          urlBox.disabled = false;
          loginButton.disabled = false;
        }
      });

       // ClientCert button click handler
      clientCertButton.addEventListener("click", async () => {
        try {
          const url = getUrl();
          // go to URL to have WebView and AdvancedX509KeyManager
          // handle certificate selection
          globalThis.nativex?.requestClientCertFor(url)
        } catch (e) {
        }
      });

      trustAllCheckbox.addEventListener("click", async() => {
        updateLoginEnabled();
      });

      // Set action bar color
      const themeColor = getComputedStyle(
        document.documentElement
      ).getPropertyValue("--theme-color");
      globalThis.nativex?.setThemeColor(themeColor, true);

      // Make container visible
      document.getElementById("main").classList.remove("invisible");
    </script>
  </body>
</html>