From c390e91bd7a8ccf78f27f5a3d1c865e917e17ef7 Mon Sep 17 00:00:00 2001
From: Yukino Song <nutosservice@gmail.com>
Date: Tue, 10 Sep 2024 00:07:06 +0800
Subject: [PATCH] Add save password option on login page w/ clients card on
 index

---
 src_assets/common/assets/web/ClientCard.vue   | 48 +++++++++++++++++++
 src_assets/common/assets/web/ResourceCard.vue |  2 +-
 src_assets/common/assets/web/index.html       |  3 ++
 src_assets/common/assets/web/login.html       | 31 ++++++++++--
 .../assets/web/public/assets/locale/en.json   |  8 ++++
 .../assets/web/public/assets/locale/zh.json   |  8 ++++
 6 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 src_assets/common/assets/web/ClientCard.vue

diff --git a/src_assets/common/assets/web/ClientCard.vue b/src_assets/common/assets/web/ClientCard.vue
new file mode 100644
index 00000000..3f3b5703
--- /dev/null
+++ b/src_assets/common/assets/web/ClientCard.vue
@@ -0,0 +1,48 @@
+<template>
+    <div class="card p-2">
+        <div class="card-body">
+            <h2>{{ $t('client_card.clients') }}</h2>
+            <br>
+            <p>{{ $t('client_card.clients_desc') }}</p>
+            <div class="card-group p-4 align-items-center">
+                <a v-for="{ platform, icon, name, link } of clients" class="btn m-1" :class="[link && 'btn-success' || 'btn-secondary']" :href="link" target="_blank" @click="shouldOpen($event, link)"><i v-if="icon" :class="icon"></i> <span class="platform-text">{{ platform }}</span> [ {{ name }} ] </a>
+            </div>
+            <i>* {{ $t('client_card.generic_moonlight_clients_desc') }}</i>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .platform-text {
+        font-weight: bold;
+    }
+</style>
+
+<script setup>
+    const clients = [
+        {
+            platform: 'Android',
+            icon: 'fa-brands fa-android',
+            name: 'Artemis',
+            link: 'https://github.com/ClassicOldSong/moonlight-android'
+        },
+        {
+            platform: 'iOS',
+            icon: 'fa-brands fa-apple',
+            name: 'Coming soon...',
+            link: ''
+        },
+        {
+            platform: 'Desktop',
+            icon: 'fa-solid fa-desktop',
+            name: 'Coming soon...',
+            link: ''
+        }
+    ]
+
+    const shouldOpen = (e, link) => {
+        if (!link) {
+            e.preventDefault();
+        }
+    }
+</script>
diff --git a/src_assets/common/assets/web/ResourceCard.vue b/src_assets/common/assets/web/ResourceCard.vue
index 13b95905..9a6278a9 100644
--- a/src_assets/common/assets/web/ResourceCard.vue
+++ b/src_assets/common/assets/web/ResourceCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card p-2">
+    <div class="card p-2 mt-4">
         <div class="card-body">
             <h2>{{ $t('resource_card.resources') }}</h2>
             <br>
diff --git a/src_assets/common/assets/web/index.html b/src_assets/common/assets/web/index.html
index 6ed5deab..c5a21bea 100644
--- a/src_assets/common/assets/web/index.html
+++ b/src_assets/common/assets/web/index.html
@@ -68,6 +68,7 @@
     </div>
     <!-- Resources -->
     <div class="my-4">
+      <Client-Card></Client-Card>
       <Resource-Card></Resource-Card>
     </div>
   </div>
@@ -77,6 +78,7 @@
   import { createApp } from 'vue'
   import { initApp } from './init'
   import Navbar from './Navbar.vue'
+  import ClientCard from './ClientCard.vue'
   import ResourceCard from './ResourceCard.vue'
   import ApolloVersion from './apollo_version'
 
@@ -84,6 +86,7 @@
   let app = createApp({
     components: {
       Navbar,
+      ClientCard,
       ResourceCard
     },
     data() {
diff --git a/src_assets/common/assets/web/login.html b/src_assets/common/assets/web/login.html
index 32115298..7f6676e5 100644
--- a/src_assets/common/assets/web/login.html
+++ b/src_assets/common/assets/web/login.html
@@ -21,11 +21,15 @@
             <input type="text" class="form-control" id="usernameInput" autocomplete="username"
               v-model="passwordData.username" required autofocus/>
           </div>
-          <div class="mb-4">
+          <div class="mb-2">
             <label for="passwordInput" class="form-label">{{ $t('_common.password') }}</label>
             <input type="password" class="form-control" id="passwordInput" autocomplete="password"
               v-model="passwordData.password" required />
           </div>
+          <div class="mb-3 form-check">
+            <label for="savePassword" class="form-check-label">{{ $t('login.save_password') }}</label>
+            <input type="checkbox" class="form-check-input" id="savePassword" v-model="savePassword"/>
+          </div>
           <button type="submit" class="btn btn-primary w-100 mb-2" v-bind:disabled="loading">
             {{ $t('welcome.login') }}
           </button>
@@ -44,16 +48,36 @@
   import { initApp } from './init'
 
   let app = createApp({
-    data() {
+    setup() {
+      const savedPasswordStr = localStorage.getItem('login')
+      if (savedPasswordStr) {
+        try {
+          const { username, password } = JSON.parse(savedPasswordStr);
+          return  {
+            error: null,
+            success: false,
+            loading: false,
+            savePassword: true,
+            passwordData: {
+              username,
+              password
+            }
+          }
+        } catch (e) {
+          console.error('Reading saved password failed!', e);
+        }
+      }
+
       return {
         error: null,
         success: false,
         loading: false,
+        savePassword: false,
         passwordData: {
           username: "",
           password: ""
         },
-      };
+      }
     },
     methods: {
       save() {
@@ -66,6 +90,7 @@
           this.loading = false;
           if (res.status === 200) {
             this.success = true;
+            localStorage.setItem('login', JSON.stringify(this.passwordData));
             location.href = './';
           } else {
             if (res.status === 401) {
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index 0561de54..297f0fe0 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -87,6 +87,11 @@
     "resolution_scale_factor": "Resolution Scale Factor",
     "resolution_scale_factor_desc": "Scale the client requested resolution based on this factor. e.g. 2000x1000 with a factor of 120% will become 2400x1200. Overrides client requested factor when the number isn't 100%. This option won't affect client requested streaming resolution."
   },
+  "client_card": {
+    "clients": "Clients",
+    "clients_desc": "Clients that are specifically tuned to work the best with Apollo",
+    "generic_moonlight_clients_desc": "Gereric Moonlight clients are still usable with Apollo."
+  },
   "config": {
     "adapter_name": "Adapter Name",
     "adapter_name_desc_linux_1": "Manually specify a GPU to use for capture.",
@@ -341,6 +346,9 @@
     "wan_encryption_mode_2": "Required for all clients",
     "wan_encryption_mode_desc": "This determines when encryption will be used when streaming over the Internet. Encryption can reduce streaming performance, particularly on less powerful hosts and clients."
   },
+  "login": {
+    "save_password": "Remember Password"
+  },
   "index": {
     "description": "Apollo is a self-hosted game stream host for Moonlight.",
     "download": "Download",
diff --git a/src_assets/common/assets/web/public/assets/locale/zh.json b/src_assets/common/assets/web/public/assets/locale/zh.json
index 69dba790..4bb22818 100644
--- a/src_assets/common/assets/web/public/assets/locale/zh.json
+++ b/src_assets/common/assets/web/public/assets/locale/zh.json
@@ -85,6 +85,11 @@
     "resolution_scale_factor": "分辨率缩放比例",
     "resolution_scale_factor_desc": "基于此比例缩放客户端请求的分辨率。例如 2000x1000 缩放 120% 将变成 2400x1200。当此项为非 100% 时覆盖客户端请求的缩放比例。此选项不会影响客户端请求的串流分辨率。"
   },
+  "client_card": {
+    "clients": "客户端",
+    "clients_desc": "为 Apollo 精心特调的客户端",
+    "generic_moonlight_clients_desc": "普通 Moonlight 客户端也可与 Apollo 共同使用。"
+  },
   "config": {
     "adapter_name": "适配器名称",
     "adapter_name_desc_linux_1": "手动指定用于捕获的 GPU。",
@@ -341,6 +346,9 @@
     "wan_encryption_mode_2": "强制所有客户端使用",
     "wan_encryption_mode_desc": "这决定了在公网串流时是否加密。加密会降低串流性能，尤其是在性能较弱的主机和客户端上。"
   },
+  "login": {
+    "save_password": "记住密码"
+  },
   "index": {
     "description": "Apollo 是供 Moonlight 使用的自建游戏串流服务。",
     "download": "下载",