add passwordless authentication featrue

.air.toml

@@ -4,7 +4,7 @@ tmp_dir = "tmp"
 
 [build]
   args_bin = ['s', '--assets-host', 'http://localhost:8082']
-  bin = "./tmp/main"
+  bin = ";SUPERTOKENS_DEBUG=1 GIN_MODE=debug ./tmp/main"
   cmd = "go build -o ./tmp/main ."
   delay = 1000
   exclude_dir = ["assets", "tmp", "vendor", "testdata", "node_modules"]

.nvmrc

@@ -0,0 +1 @@
+20

Dockerfile

@@ -3,7 +3,7 @@ FROM alpine:latest as certs
 # getting certs
 RUN apk update && apk upgrade && apk add --no-cache ca-certificates
 
-FROM node:16 as build_assets
+FROM node:20 as build_assets
 
 WORKDIR /app
 
@@ -35,6 +35,9 @@ RUN go build -ldflags '-w -s' -a -installsuffix cgo -o server
 
 FROM alpine:latest
 
+# set work dir
+WORKDIR /app
+
 # copy our static linked library
 COPY --from=build /app/server .
 # copy templates
@@ -48,5 +51,7 @@ COPY --from=certs /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/
 # tell we are exposing our service on ports 8080 8081
 EXPOSE 8080 8081
 
+ENV GIN_MODE=release
+
 # run it!
 CMD ["./server", "serve"]

README.md

@@ -21,7 +21,11 @@ Some features to mention:
   - [x] OpenSubtitles support
   - [ ] Subtitle uploading support
   - [ ] Chromecast support
-- [ ] Authentication with Patreon
+  - [ ] Subtitle size control
+- [x] Authentication
+  - [x] Passwordless authentication
+  - [ ] Patreon account linking
+- [ ] Ads integration
 - [ ] Embed support
 - [ ] 🚀Switch webtor.io to web-ui-v2
 

assets/src/js/app/action.js

@@ -0,0 +1,27 @@
+const target = document.currentScript.parentElement;
+const av = (await import('../lib/asyncView')).initAsyncView;
+av(target, 'action/post', async function() {
+    const self = this;
+    const progress = self.querySelector('form');
+    const el = document.createElement('div');
+    const closeable = target.querySelector('.closeable');
+    if (closeable) {
+        const initCloseable = (await import('../lib/closeable')).initCloseable;
+        initCloseable(closeable);
+    }
+    const initProgressLog = (await import('../lib/progressLog')).initProgressLog;
+    const pb = initProgressLog(progress, function(ev) {
+        if (ev.level == 'rendertemplate') {
+            window.addEventListener('player_ready', function(e) {
+                progress.classList.add('hidden');
+                el.classList.remove('hidden');
+            }, {once: true});
+            el.classList.add('hidden');
+            el.classList.add('mb-5')
+            self.appendChild(el);
+            ev.render(el);
+        }
+    });
+});
+
+export {}

assets/src/js/app/action/player.js

@@ -0,0 +1,24 @@
+import '../../../styles/player.css';
+const target = document.currentScript.parentElement;
+function ready() {
+    const event = new CustomEvent('player_ready');
+    window.dispatchEvent(event);
+}
+
+
+const av = (await import('../../lib/asyncView')).initAsyncView;
+av(target, 'action/preview_image', () => {
+    ready();
+});
+
+for (const format of ['audio', 'video']) {
+    av(target, 'action/stream_'+format, async function() {
+        const initPlayer = (await import('../../lib/mediaelement')).initPlayer;
+        initPlayer(this, ready);
+    }, async function() {
+        const destroyPlayer = (await import('../../lib/mediaelement')).destroyPlayer;
+        destroyPlayer();
+    });
+}
+
+export {}

assets/src/js/app/auth.js

@@ -0,0 +1,17 @@
+import {init} from '../lib/supertokens';
+window.addEventListener('DOMContentLoaded', async () => {
+    try {
+        const res = await init();
+    } catch (err) {
+        console.log(err);
+    }
+});
+const av = (await import('../lib/asyncView')).initAsyncView;
+av(document.querySelector('nav'), 'index', async function() {
+    const self = this;
+    window.addEventListener('auth', function() {
+        self.load();
+    }, { once: true });
+});
+
+export {}

assets/src/js/app/auth/login.js

@@ -0,0 +1,32 @@
+window.submitLoginForm = function(target, e) {
+    (async (data) => {
+        const initProgressLog = (await import('../../lib/progressLog')).initProgressLog;
+        const pl = initProgressLog(document.querySelector('.progress-alert'));
+        pl.clear();
+        pl.inProgress('sending magic link to ' + data.email, 'login');
+        const supertokens = (await import('../../lib/supertokens'));
+        const closeable = document.querySelector('.closeable');
+        if (closeable) {
+            const initCloseable = (await import('../../lib/closeable')).initCloseable;
+            initCloseable(closeable);
+        }
+        try {
+            const resp = await supertokens.sendMagicLink(data);
+            pl.done('login');
+            pl.finish('magic link sent to ' + data.email);
+        } catch (err) {
+            console.log(err);
+            if (err.statusText) {
+                pl.error(err.statusText.toLowerCase(), 'login');
+            } else if (err.message) {
+                pl.error(err.message.toLowerCase(), 'login');
+            } else {
+                pl.error('unknown error', 'login');
+            }
+        }
+    })({
+        email: target.querySelector('input[name=email]').value,
+    });
+    e.preventDefault();
+    return false;
+}

assets/src/js/app/auth/logout.js

@@ -0,0 +1,26 @@
+const target = document.currentScript.parentElement;
+const av = (await import('../../lib/asyncView')).initAsyncView;
+av(target, 'auth/logout', async function() {
+    const initProgressLog = (await import('../../lib/progressLog')).initProgressLog;
+    const pl = initProgressLog(target.querySelector('.progress-alert'));
+    pl.clear();
+    pl.inProgress('logging out', 'logout' );
+    const supertokens = (await import('../../lib/supertokens'));
+    try {
+        await supertokens.logout();
+        pl.done('logout');
+        pl.finish('logout successful');
+        window.dispatchEvent(new CustomEvent('auth'));
+    } catch (err) {
+        console.log(err);
+        if (err.statusText) {
+            pl.error(err.statusText.toLowerCase(), 'logout');
+        } else if (err.message) {
+            pl.error(err.message.toLowerCase(), 'logout');
+        } else {
+            pl.error('unknown error', 'logout');
+        }
+    }
+});
+
+export {}

assets/src/js/app/auth/verify.js

@@ -0,0 +1,31 @@
+const target = document.currentScript.parentElement;
+const av = (await import('../../lib/asyncView')).initAsyncView;
+av(target, 'auth/verify', async function() {
+    const initProgressLog = (await import('../../lib/progressLog')).initProgressLog;
+    const pl = initProgressLog(target.querySelector('.progress-alert'));
+    pl.clear();
+    pl.inProgress('checking magic link', 'verify');
+    const supertokens = (await import('../../lib/supertokens'));
+    try {
+        const res = await supertokens.handleMagicLinkClicked();
+        if (res.status === 'OK') {
+            pl.done('verify');
+            pl.finish('login successful');
+            window.dispatchEvent(new CustomEvent('auth'));
+        } else if (res.status === 'RESTART_FLOW_ERROR') {
+            pl.error('magic link expired, try to login again', 'verify');
+        } else {
+            pl.error('login failed, try to login again', 'verify');
+        }
+    } catch (err) {
+        if (err.statusText) {
+            pl.error(err.statusText.toLowerCase(), 'verify');
+        } else if (err.message) {
+            pl.error(err.message.toLowerCase(), 'verify');
+        } else {
+            pl.error('unknown error', 'verify');
+        }
+    }
+});
+
+export {}

assets/src/js/app/index.js

@@ -0,0 +1,22 @@
+const target = document.currentScript.parentElement;
+const av = (await import('../lib/asyncView')).initAsyncView;
+av(target, 'index', async function() {
+    const dropzone = target.querySelector('.dropzone');
+    if (dropzone) {
+        const initDrop = (await import('../lib/drop')).initDrop;
+        initDrop(dropzone);
+    }
+
+    const closeable = target.querySelector('.closeable');
+    if (closeable) {
+        const initCloseable = (await import('../lib/closeable')).initCloseable;
+        initCloseable(closeable);
+    }
+    const progress = this.querySelector('.progress-alert');
+    if (progress != null) {
+        const initProgressLog = (await import('../lib/progressLog')).initProgressLog;
+        initProgressLog(progress);
+    }
+});
+
+export {}

assets/src/js/app/layout.js

@@ -0,0 +1,56 @@
+function showProgress() {
+    const progress = document.getElementById('progress');
+    progress.classList.remove('hidden');
+}
+function hideProgress() {
+    const progress = document.getElementById('progress');
+    progress.classList.add('hidden');
+}
+
+function hideWrapper() {
+    var w = document.getElementById('wrapper');
+    w.classList.add('hidden');
+}
+function showWrapper() {
+    var w = document.getElementById('wrapper');
+    if (w != null) {
+        w.classList.remove('hidden');
+    }
+}
+
+window.progress = {
+    show: showProgress,
+    hide: hideProgress,
+};
+window.wrapper = {
+    show: showWrapper,
+    hide: hideWrapper,
+};
+window.finish = function() {
+    hideWrapper();
+};
+
+import '../../styles/style.css';
+
+
+import {bindAsync} from '../lib/async';
+
+window.addEventListener('DOMContentLoaded', async () => {
+    showWrapper();
+    hideProgress();
+    bindAsync({
+        async fetch(f, url, fetchParams) {
+            showProgress();
+            fetchParams.headers['X-CSRF-TOKEN'] = window._CSRF;
+            const res = await fetch(url, fetchParams);
+            hideProgress();
+            return res;
+        },
+        fallback: {
+            selector: 'main',
+            layout: 'async',
+        },
+    });
+});
+
+