Update login page and index page with vue.

no-src · Nov 29, 2021 · 996212d · 996212d
1 parent a48760e
commit 996212d
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 27 deletions.
diff --git a/server/fs/file_server.go b/server/fs/file_server.go
@@ -31,7 +31,7 @@ func StartFileServer(src core.VFS, target core.VFS, addr string, init retry.Wait
 		return err
 	}
 
-	http.Handle("/", auth.Auth(handler.NewDefaultHandler(), store))
+	http.Handle("/", auth.Auth(handler.NewDefaultHandler(serverTemplate), store))
 
 	http.HandleFunc("/login/index", func(writer http.ResponseWriter, request *http.Request) {
 		t.ExecuteTemplate(writer, "login.html", nil)

diff --git a/server/fs/gin_file_server.go b/server/fs/gin_file_server.go
@@ -60,7 +60,7 @@ func StartFileServer(src core.VFS, target core.VFS, addr string, init retry.Wait
 	})
 
 	rootGroup.GET("/", func(context *gin.Context) {
-		handler.NewDefaultHandler().ServeHTTP(context.Writer, context.Request)
+		handler.NewDefaultHandler(serverTemplate).ServeHTTP(context.Writer, context.Request)
 	})
 
 	if src.IsDisk() || src.Is(core.RemoteDisk) {

diff --git a/server/handler/default_handler.go b/server/handler/default_handler.go
@@ -1,16 +1,20 @@
 package handler
 
 import (
-	"fmt"
 	"github.com/no-src/gofs/server"
+	"github.com/no-src/log"
+	"html/template"
 	"net/http"
 )
 
 type defaultHandler struct {
+	serverTemplate string
 }
 
-func NewDefaultHandler() http.Handler {
-	return &defaultHandler{}
+func NewDefaultHandler(serverTemplate string) http.Handler {
+	return &defaultHandler{
+		serverTemplate: serverTemplate,
+	}
 }
 
 func (h *defaultHandler) ServeHTTP(writer http.ResponseWriter, request *http.Request) {
@@ -20,6 +24,18 @@ func (h *defaultHandler) ServeHTTP(writer http.ResponseWriter, request *http.Req
 			writer.Write([]byte("server internal error"))
 		}
 	}()
-	writer.Header().Set("Content-Type", "text/html; charset=utf-8")
-	writer.Write([]byte(fmt.Sprintf("<html><head><title>gofs</title></head><body><div><p>welcome to gofs!</p><pre><a target='_blank' href='%s'>source</a></pre><pre><a target='_blank' href='%s'>target</a></pre></div></body></html>", server.SrcRoutePrefix, server.TargetRoutePrefix)))
+	t, err := template.ParseGlob(h.serverTemplate)
+	if err != nil {
+		log.Error(err, "parse template error")
+		writer.WriteHeader(http.StatusInternalServerError)
+		writer.Write([]byte("parse template error"))
+		return
+	}
+	t.ExecuteTemplate(writer, "index.html", struct {
+		Src    string
+		Target string
+	}{
+		server.SrcRoutePrefix,
+		server.TargetRoutePrefix,
+	})
 }
diff --git a/server/template/index.html b/server/template/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
+    <title>gofs</title>
+    <head>
+        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"/>
+        <script src="https://unpkg.com/vue@next"></script>
+        <script src="https://unpkg.com/element-plus"></script>
+    </head>
+</head>
+<body>
+<el-container id="app">
+    <el-header height="15px">welcome to gofs!</el-header>
+    <el-main>
+        <el-space direction="vertical">
+            <el-row>
+                <el-link type="primary" target="_blank" href="{{.Src}}">Src</el-link>
+            </el-row>
+            <el-row>
+                <el-link type="primary" target="_blank" href="{{.Target}}">Target</el-link>
+            </el-row>
+        </el-space>
+    </el-main>
+</el-container>
+
+<script>
+    const {defineComponent, ref} = Vue;
+    var Main = {};
+    const app = Vue.createApp(Main).use(ElementPlus).mount("#app");
+</script>
+</body>
+</html>
diff --git a/server/template/login.html b/server/template/login.html
@@ -1,29 +1,47 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
     <title>Login</title>
-    <style>
-        .login_form {
-            text-align: center;
-            margin-top: 50px;
-        }
-    </style>
+    <head>
+        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"/>
+        <script src="https://unpkg.com/vue@next"></script>
+        <script src="https://unpkg.com/element-plus"></script>
+    </head>
 </head>
 <body>
-<div class="login_form">
-    <form action="/login/submit" method="post">
-        <p>
-            <span>UserName:</span><input name="username" type="text">
-        </p>
-        <p>
-            <span>Password:</span><input name="password" type="password">
-        </p>
-        <p>
-            <button>Login</button>
-        </p>
-    </form>
-</div>
+<el-container id="app">
+    <el-row justify="center">
+        <el-card style="width: 400px;margin-top: 70px;">
+            <el-form ref="form" :model="form" label-width="95px" action="/login/submit" method="post">
+                <el-form-item label="UserName">
+                    <el-input name="username" v-model="username" placeholder="Please input your username"/>
+                </el-form-item>
+                <el-form-item label="Password">
+                    <el-input name="password" v-model="password" placeholder="Please input your password"
+                              show-password/>
+                </el-form-item>
+                <el-form-item>
+                    <el-button native-type="submit" type="primary" round :style="{width:'200px'}">Sign in</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+    </el-row>
+</el-container>
+
+<script>
+    const {defineComponent, ref} = Vue;
+    var Main = {
+        setup() {
+            return {
+                username: ref(''),
+                password: ref(''),
+            }
+        }
+    };
+
+    const app = Vue.createApp(Main).use(ElementPlus).mount("#app");
+</script>
 </body>
 </html>