diff --git a/routers/web/devstar_home.go b/routers/web/devstar_home.go
new file mode 100644
index 0000000000..16a17224af
--- /dev/null
+++ b/routers/web/devstar_home.go
@@ -0,0 +1,18 @@
+package web
+
+import (
+	"code.gitea.io/gitea/modules/base"
+	gitea_web_context "code.gitea.io/gitea/services/context"
+	"net/http"
+)
+
+const (
+	// TplDevstarHome 显示 DevStar Home 页面 templates/devstar-home-vscode.tmpl
+	TplDevstarHome base.TplName = "devstar-home-vscode"
+)
+
+// DevstarHome 渲染适配于 VSCode 插件的 DevStar Home 页面
+func DevstarHome(ctx *gitea_web_context.Context) {
+	ctx.Data["Title"] = ctx.Tr("home")
+	ctx.HTML(http.StatusOK, TplDevstarHome)
+}
diff --git a/routers/web/web.go b/routers/web/web.go
index b2157de15c..f0df1d7b60 100644
--- a/routers/web/web.go
+++ b/routers/web/web.go
@@ -465,6 +465,7 @@ func registerRoutes(m *web.Router) {
 	// Especially some AJAX requests, we can reduce middleware number to improve performance.
 
 	m.Get("/", Home)
+	m.Get("/devstar-home", DevstarHome)
 	m.Get("/sitemap.xml", sitemapEnabled, ignExploreSignIn, HomeSitemap)
 	m.Group("/.well-known", func() {
 		m.Get("/openid-configuration", auth.OIDCWellKnown)
diff --git a/templates/devstar-home-vscode.tmpl b/templates/devstar-home-vscode.tmpl
new file mode 100644
index 0000000000..009bac1626
--- /dev/null
+++ b/templates/devstar-home-vscode.tmpl
@@ -0,0 +1,1221 @@
+<!DOCTYPE html>
+<html lang="{{ctx.Locale.Lang}}" data-theme="{{UserThemeName .SignedUser}}">
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>{{if .Title}}{{.Title}} - {{end}}{{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}}</title>
+	{{if .ManifestData}}<link rel="manifest" href="data:{{.ManifestData}}">{{end}}
+	<meta name="author" content="{{if .Repository}}{{.Owner.Name}}{{else}}{{MetaAuthor}}{{end}}">
+	<meta name="description" content="{{if .Repository}}{{.Repository.Name}}{{if .Repository.Description}} - {{.Repository.Description}}{{end}}{{else}}{{MetaDescription}}{{end}}">
+	<meta name="keywords" content="{{MetaKeywords}}">
+	<meta name="referrer" content="no-referrer">
+	{{if .GoGetImport}}
+	<meta name="go-import" content="{{.GoGetImport}} git {{.RepoCloneLink.HTTPS}}">
+	<meta name="go-source" content="{{.GoGetImport}} _ {{.GoDocDirectory}} {{.GoDocFile}}">
+	{{end}}
+	{{if and .EnableFeed .FeedURL}}
+	<link rel="alternate" type="application/atom+xml" title="" href="{{.FeedURL}}.atom">
+	<link rel="alternate" type="application/rss+xml" title="" href="{{.FeedURL}}.rss">
+	{{end}}
+	<link rel="icon" href="{{AssetUrlPrefix}}/img/favicon.svg" type="image/svg+xml">
+	<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
+	{{template "base/head_script" .}}
+	<noscript>
+		<style>
+			.dropdown:hover > .menu { display: block; }
+			.ui.secondary.menu .dropdown.item > .menu { margin-top: 0; }
+		</style>
+	</noscript>
+	{{template "base/head_opengraph" .}}
+	{{template "base/head_style" .}}
+</head>
+
+<body hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}' hx-swap="outerHTML" hx-ext="morph" hx-push-url="false">
+
+<div class="full height">
+	<noscript>{{ctx.Locale.Tr "enable_javascript"}}</noscript>
+
+	{{template "custom/body_inner_pre" .}}
+
+	{{$notificationUnreadCount := 0}}
+	{{if and .IsSigned .NotificationUnreadCount}}
+	{{$notificationUnreadCount = call .NotificationUnreadCount}}
+	{{end}}
+
+	<nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}">
+	<div class="navbar-left">
+		<!-- the logo -->
+		<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}">
+		<img width="auto" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
+		</a>
+
+		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
+		<div class="ui secondary menu item navbar-mobile-right only-mobile">
+			{{if .IsSigned}}
+			<a id="mobile-notifications-icon" class="item tw-w-auto tw-p-2" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
+			<div class="tw-relative">
+				{{svg "octicon-bell"}}
+				<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
+			</div>
+			</a>
+			{{end}}
+			<button class="item tw-w-auto ui icon mini button tw-p-2 tw-m-0" id="navbar-expand-toggle" aria-label="{{ctx.Locale.Tr "home.nav_menu"}}">{{svg "octicon-three-bars"}}</button>
+		</div>
+
+		<!-- navbar links non-mobile -->
+		{{template "custom/extra_links" .}}
+
+	</div>
+
+	<!-- the full dropdown menus -->
+	<div class="navbar-right">
+
+<!--	TODO: 注册触发外部链接	-->
+
+<!--		<a id="signup-link" class="item active" href="{{AppSubUrl}}/user/sign_up">-->
+<!--			{{svg "octicon-person"}} {{ctx.Locale.Tr "register"}}-->
+<!--		</a>-->
+		<a id="signin-link" class="item active" rel="nofollow" href="javascript:openLoginModal()">
+			{{svg "octicon-sign-in"}} {{ctx.Locale.Tr "sign_in"}}
+		</a>
+		<a id="logout-link" class="item active" href="javascript:logout()">
+				{{svg "octicon-sign-out"}}
+				{{ctx.Locale.Tr "sign_out"}}
+		</a>
+	</div><!-- end full right menu -->
+
+	</nav>
+
+
+<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}" class="page-content home">
+
+	<!-- united message-->
+	<div class="ui container tw-my-[--page-spacing]">
+		<div id="negative_message" class="ui negative message tw-text-center tw-whitespace-pre-line" style="display:none;"></div>
+		<div id="positive_message" class="ui positive message tw-text-center tw-whitespace-pre-line" style="display:none;"></div>
+	</div>
+
+	<div class="ui middle very relaxed page">
+
+		<!-- login -->
+		<div id="loginModal" class="ui modal" style=" width:50%; left: 25%; top: 20%">
+			<div class="close right" onclick="closeLoginModal()">X</div>
+			<div class="content">
+				<div class="ui container column fluid">
+					<h2 class="ui top attached header center">Login</h2>
+					<div class="ui attached segment">
+						<form id="loginForm" class="ui form" action="javascript:login()">
+							<div class="required field">
+								<label for="username">Username</label>
+								<input type="text" id="username" name="username" required>
+							</div>
+							<div class="required field">
+								<label for="password">Password</label>
+								<input type="password" id="password" name="password" required>
+							</div>
+							<button class="ui button primary center">Login</button>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+		<div class="column">
+			<div id="contentBeforeSigned" class="ui container" style="display: none">
+				<h3 class="header center">Please login!</h3>
+			</div>
+			<div id="contentAfterSigned" class="ui container " style="display: none">
+				<button class="ui button primary" onclick="openModalForCreateRepository()">Create New Repository</button>
+
+				<div class="divider"></div>
+
+				<h2 class="header">Repositories</h2>
+				<table class="ui table" id="reposTable">
+					<thead>
+					<tr>
+						<th>repoName</th>
+						<th>repoURL</th>
+						<th>Operation</th>
+					</tr>
+					</thead>
+					<tbody>
+					<!-- 动态加载 -->
+					</tbody>
+				</table>
+			</div>
+		</div>
+
+		<div id="modalForCreatingRepo" class="ui modal" style="width:70%; left: 15%; top: 20%">
+			<div class="content">
+				<div class="close right" style="float: right" onclick="closeModalForCreatingRepo()">X</div>
+				<div class="ui container column fluid" style="height: 50%;">
+					<h2 class="ui top attached header center">Create New Repository</h2>
+					<div class="ui attached segment" >
+						<form id="creatingRepoForm" class="ui form" onsubmit="return createRepo()">
+						<!-- repo name -->
+						<div class="inline required field {{if .Err_RepoName}}error{{end}}">
+							<label for="repo_name">{{ctx.Locale.Tr "repo.repo_name"}}</label>
+							<input id="repo_name" name="repo_name" value="{{.repo_name}}" autofocus required maxlength="100">
+							<span class="help">{{ctx.Locale.Tr "repo.repo_name_helper"}}</span>
+						</div>
+
+						<!-- visibility -->
+<!--						<div class="inline field">-->
+<!--							<label>{{ctx.Locale.Tr "repo.visibility"}}</label>-->
+<!--							<div class="ui checkbox">-->
+<!--									<input id="is_private" name="private" type="checkbox" >-->
+<!--									<label>{{ctx.Locale.Tr "repo.visibility_helper"}}</label>-->
+<!--							</div>-->
+<!--							<span class="help">{{ctx.Locale.Tr "repo.visibility_description"}}</span>-->
+<!--						</div>-->
+
+						<!-- desc -->
+						<div class="inline field {{if .Err_Description}}error{{end}}">
+							<label for="description">{{ctx.Locale.Tr "repo.repo_desc"}}</label>
+							<textarea id="description" rows="2" name="description" placeholder="{{ctx.Locale.Tr "repo.repo_desc_helper"}}" maxlength="2048">{{.description}}</textarea>
+						</div>
+
+						<!-- template -->
+
+						<div id="devstar_template_area" class="inline field">
+							<label>{{ctx.Locale.Tr "repo.devstar_template"}}</label>
+							<div id="devstar_template_search" class="ui search selection dropdown">
+								<input type="hidden" id="devstar_template" name="devstar_template" value="">
+								<div id="devstar_template_name" class="default text">{{.devstar_template_name}}</div>
+								<div class="menu">
+								</div>
+							</div>
+							<span class="help">{{ctx.Locale.Tr "repo.devstar_template_desc" "https://DevStar.cn/"}}</span>
+						</div>
+
+					<div id="git_url_template_area" class="inline field">
+						<label>{{ctx.Locale.Tr "repo.git_url_template"}}</label>
+						<input id="git_url_template" name="git_url_template" value="" placeholder="{{ctx.Locale.Tr "repo.git_url_template_helper"}}">
+						<span class="help">{{ctx.Locale.Tr "repo.git_url_template_desc"}}</span>
+					</div>
+
+					<div id="repo_template_area">
+						<div class="inline field">
+							<label>{{ctx.Locale.Tr "repo.template"}}</label>
+							<div id="repo_template_search" class="ui search selection dropdown">
+								<input type="hidden" id="repo_template" name="repo_template" value="">
+								<div id="repo_template_name" class="default text">{{.devstar_template_name}}</div>
+								<div class="menu">
+								</div>
+							</div>
+						</div>
+
+						<div id="template_units" {{if not .repo_template}}class="tw-hidden"{{end}}>
+							<div class="inline field">
+								<label>{{ctx.Locale.Tr "repo.template.items"}}</label>
+								<div class="ui checkbox">
+									<input name="git_content" type="checkbox" {{if .git_content}}checked{{end}}>
+									<label>{{ctx.Locale.Tr "repo.template.git_content"}}</label>
+								</div>
+								<div class="ui checkbox" {{if not .SignedUser.CanEditGitHook}}data-tooltip-content="{{ctx.Locale.Tr "repo.template.git_hooks_tooltip"}}"{{end}}>
+									<input name="git_hooks" type="checkbox" {{if .git_hooks}}checked{{end}}>
+									<label>{{ctx.Locale.Tr "repo.template.git_hooks"}}</label>
+								</div>
+							</div>
+
+							<div class="inline field">
+								<label></label>
+								<div class="ui checkbox">
+									<input name="webhooks" type="checkbox" {{if .webhooks}}checked{{end}}>
+									<label>{{ctx.Locale.Tr "repo.template.webhooks"}}</label>
+								</div>
+								<div class="ui checkbox">
+									<input name="topics" type="checkbox" {{if .topics}}checked{{end}}>
+									<label>{{ctx.Locale.Tr "repo.template.topics"}}</label>
+								</div>
+							</div>
+							<div class="inline field">
+								<label></label>
+								<div class="ui checkbox">
+									<input name="avatar" type="checkbox" {{if .avatar}}checked{{end}}>
+									<label>{{ctx.Locale.Tr "repo.template.avatar"}}</label>
+								</div>
+								<div class="ui checkbox">
+									<input name="labels" type="checkbox" {{if .labels}}checked{{end}}>
+									<label>{{ctx.Locale.Tr "repo.template.issue_labels"}}</label>
+								</div>
+							</div>
+							<div class="inline field">
+								<label></label>
+								<div class="ui checkbox">
+									<input name="protected_branch" type="checkbox" {{if .protected_branch}}checked{{end}}>
+									<label>{{ctx.Locale.Tr "repo.settings.protected_branch"}}</label>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div id="non_template"  {{if .repo_template}}class="tw-hidden"{{end}}>
+						<!-- issue label -->
+						<div class="inline field">
+							<label>{{ctx.Locale.Tr "repo.issue_labels"}}</label>
+							<div class="ui search selection dropdown">
+								<input id="issue_label" type="hidden" name="issue_labels" value="{{.issueLabels}}">
+								<div class="default text">{{ctx.Locale.Tr "repo.issue_labels_helper"}}</div>
+								<div id="issue_label_menu" class="menu">
+									<div class="item" data-value="">{{ctx.Locale.Tr "repo.issue_labels_helper"}}</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="divider"></div>
+
+						<div class="inline field">
+							<label>.gitignore</label>
+							<div class="ui multiple search selection dropdown">
+								<input id="gitignore" type="hidden" name="gitignores" value="{{.gitignores}}">
+								<div class="default text">{{ctx.Locale.Tr "repo.repo_gitignore_helper"}}</div>
+								<div id="gitignore_menu" class="menu">
+								</div>
+							</div>
+							<span class="help">{{ctx.Locale.Tr "repo.repo_gitignore_helper_desc"}}</span>
+						</div>
+						<div class="inline field">
+							<label>{{ctx.Locale.Tr "repo.license"}}</label>
+							<div class="ui search selection dropdown">
+								<input id="license" type="hidden" name="license" value="{{.license}}">
+								<div class="default text">{{ctx.Locale.Tr "repo.license_helper"}}</div>
+								<div id="license_menu" class="menu">
+									<div class="item" data-value="">{{ctx.Locale.Tr "repo.license_helper"}}</div>
+								</div>
+							</div>
+							<span class="help">{{ctx.Locale.Tr "repo.license_helper_desc" "https://choosealicense.com/"}}</span>
+						</div>
+
+						<div class="inline field">
+							<label>{{ctx.Locale.Tr "repo.readme"}}</label>
+							<div class="ui selection dropdown">
+								<input id="readme" type="hidden" name="readme" value="{{.readme}}">
+								<div class="default text">{{ctx.Locale.Tr "repo.readme_helper"}}</div>
+								<div id="readme_menu" class="menu">
+									{{range .Readmes}}
+									<div class="item" data-value="{{.}}">{{.}}</div>
+									{{end}}
+								</div>
+							</div>
+							<span class="help">{{ctx.Locale.Tr "repo.readme_helper_desc"}}</span>
+						</div>
+						<div class="inline field">
+							<label for="default_branch">{{ctx.Locale.Tr "repo.default_branch"}}</label>
+							<input id="default_branch" name="default_branch" value="{{.default_branch}}" placeholder="{{.default_branch}}">
+							<span class="help">{{ctx.Locale.Tr "repo.default_branch_helper"}}</span>
+						</div>
+						<div class="inline field">
+							<label>{{ctx.Locale.Tr "repo.object_format"}}</label>
+							<div class="ui selection owner dropdown">
+								<input type="hidden" id="object_format_name" name="object_format_name" value="{{.DefaultObjectFormat.Name}}" required>
+								<div id="default_object_format_name" class="default text">{{.DefaultObjectFormat.Name}}</div>
+								<div id="object_format_menu" class="menu">
+									{{range .SupportedObjectFormats}}
+									<div class="item" data-value="{{.Name}}">{{.Name}}</div>
+									{{end}}
+								</div>
+							</div>
+							<span class="help">{{ctx.Locale.Tr "repo.object_format_helper"}}</span>
+						</div>
+						<div class="inline field">
+							<label>{{ctx.Locale.Tr "repo.template"}}</label>
+							<div class="ui checkbox">
+								<input id="is_template" name="template" type="checkbox">
+								<label>{{ctx.Locale.Tr "repo.template_helper"}}</label>
+							</div>
+						</div>
+					</div>
+					<br>
+					<div class="inline field">
+						<label></label>
+						<button class="ui primary button" >
+							{{ctx.Locale.Tr "repo.create_repo"}}
+						</button>
+					</div>
+
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div id="alertBox" class="ui alert"></div>
+
+		<!-- ====================== Created Repository ==========================-->
+
+<!--		<button onclick="loadRepositories()">Load Repositories</button>-->
+	</div>
+</div>
+
+</body>
+</html>
+
+<!-- ======================================= Script ==================================-->
+<script>
+	// ===================================== Initialization ===========================
+	// Global variables
+	DEVSTAR_DOMAIN = ""
+	var USERTOKEN = null
+	var USERNAME = null
+	var SIGNED = false
+
+	window.onload = async function () {
+		await getDevstarDomainFromVSCode()
+			.then(async devstarDomain => {
+				DEVSTAR_DOMAIN = devstarDomain.endsWith("/") ? devstarDomain.substring(0, devstarDomain.length-1) : devstarDomain
+			})
+			.catch(error => {
+				DEVSTAR_DOMAIN = "https://devstar.cn"
+				console.error('Failed to get devstar domain: ', error, '. Use default domain: ', DEVSTAR_DOMAIN)
+			})
+
+		// related to login status
+		await getUserTokenFromVSCode()
+			.then(async userToken => {
+				// verify user token
+				await verifyToken(userToken)
+					.then(result => {
+						// initialize user token
+						USERTOKEN = userToken
+					})
+					.catch(error => {
+						console.error('Error in verifying token:', error)
+					})
+			})
+			.catch(error => {
+				console.error("Failed to get user token from vscode: ", error)
+			})
+
+		await getUsernameFromVSCode()
+			.then(async username => {
+				USERNAME = username
+			})
+			.catch(error => {
+				console.error('Failed to get user name from vscode: ', error)
+			})
+
+		SIGNED = true ? USERTOKEN && USERNAME : false;
+		await reloadPageModules()
+	}
+
+	async function loadCreatingRepoForm() {
+		// fetch template data
+		const issueLabels = await fetchTemplateData(DEVSTAR_DOMAIN + `/api/v1/label/templates2`)
+		const gitignores = await fetchTemplateData(DEVSTAR_DOMAIN + `/api/v1/gitignore/templates`)
+		const licenses = await fetchTemplateData(DEVSTAR_DOMAIN + `/api/v1/licenses`)
+		const readmes = await fetchTemplateData(DEVSTAR_DOMAIN + `/api/v1/readme/templates`).then(data => {return data.data})
+		const object_formats = await fetchTemplateData(DEVSTAR_DOMAIN + `/api/v1/object_formats`).then(data => {return data.data})
+		// console.log('issueLabels, gitignores, licenses, readmes, object_formats', issueLabels, gitignores, licenses, readmes, object_formats)
+
+		// generate menus
+		const issue_label_menu = document.getElementById('issue_label_menu');
+		issueLabels.forEach(label => {
+			const newItem = document.createElement('div');
+			newItem.classList.add('item');
+			newItem.setAttribute('data-value', label.DisplayName);
+			newItem.innerHTML = `${label.DisplayName}<br><i>(${label.Description})</i>`;
+			issue_label_menu.appendChild(newItem);
+		});
+
+		const gitignore_menu = document.getElementById('gitignore_menu');
+		gitignores.forEach(gitignore => {
+			const newItem = document.createElement('div');
+			newItem.classList.add('item');
+			newItem.setAttribute('data-value', gitignore)
+			newItem.innerHTML = `${gitignore}`;
+			gitignore_menu.appendChild(newItem);
+		})
+
+		const license_menu = document.getElementById('license_menu');
+		licenses.forEach(license => {
+			const newItem = document.createElement('div');
+			newItem.classList.add('item');
+			newItem.setAttribute('data-value', license.name)
+			newItem.innerHTML = `${license.name}`;
+			license_menu.appendChild(newItem);
+		})
+
+		const readme_menu = document.getElementById('readme_menu');
+		readmes.forEach(readme => {
+			const newItem = document.createElement('div');
+			newItem.classList.add('item');
+			newItem.setAttribute('data-value', readme.name)
+			newItem.innerHTML = `${readme.name}`;
+			readme_menu.appendChild(newItem);
+		})
+
+    const defaultBranchElement = document.getElementById('default_branch');
+    if (defaultBranchElement) {
+        defaultBranchElement.value = 'main';   // Set the value of the input field to "main"
+        defaultBranchElement.placeholder = 'main'; // Optionally update the placeholder as well
+    }
+
+		const defaultObjectFormatElement = document.getElementById('object_format_name');
+		if (defaultObjectFormatElement) {
+			defaultObjectFormatElement.value = object_formats[0].name
+		}
+		const  default_object_format_name = document.getElementById('default_object_format_name')
+		if(default_object_format_name) {
+			default_object_format_name.innerHTML = object_formats[0].name
+		}
+
+		const object_format_menu = document.getElementById('object_format_menu')
+		object_formats.forEach(object_format => {
+			const newItem = document.createElement('div');
+			newItem.classList.add('item');
+			newItem.setAttribute('data-value', object_format.name)
+			newItem.innerHTML = `${object_format.name}`;
+			object_format_menu.appendChild(newItem);
+		})
+	}
+
+	async function fetchTemplateData(url) {
+		return new Promise((resolve, reject) => {
+			try {
+				fetch(url, {
+					method: 'GET',
+				})
+					.then(response => {
+						if (!response.ok) {
+							throw Error(`There is error when fetching template data from url: ${url}` + response)
+						}
+						return response.json()
+					})
+					.then(data => {
+						resolve(data)
+					})
+			} catch (error) {
+				reject('Failed to fetch template data')
+				console.error(error)
+			}
+		})
+	}
+
+	async function getDevstarDomainFromVSCode() {
+		return new Promise(async (resolve, reject) => {
+			await communicateVSCodeByWebview('getDevstarDomain', null)
+				.then(async data => {
+					const devstarDomain = data.devstarDomain
+
+					if (undefined === devstarDomain) {
+						reject("devstar domain is undefined")
+					}
+					resolve(devstarDomain)
+				})
+				.catch(error => {
+					reject(error)
+				})
+		})
+	}
+
+	async function getUserTokenFromVSCode() {
+		return new Promise(async (resolve, reject) => {
+			await communicateVSCodeByWebview('getUserToken', null)
+				.then(async data => {
+					const userToken = data.userToken
+
+					if (userToken === undefined) {
+						reject("userToken is undefined")
+					}
+					resolve(userToken)
+				})
+				.catch(error => {
+					reject(error)
+				})
+		})
+	}
+
+	async function getUsernameFromVSCode() {
+		return new Promise(async (resolve, reject) => {
+			await communicateVSCodeByWebview('getUsername', null)
+				.then(async data => {
+					const username = data.username
+					if (username === undefined) {
+						reject('username is undefined')
+					}
+
+					resolve(username)
+				})
+				.catch(error => {
+					reject(error)
+				})
+		})
+	}
+
+	function verifyToken(token) {
+		return new Promise((resolve, reject) => {
+			fetch(DEVSTAR_DOMAIN + '/api/devcontainer/user', {
+				method: 'GET',
+				headers: {
+					'Content-Type': 'application/json',
+					'Authorization': 'token ' + token
+				},
+			})
+				.then(response => {
+					if (response.ok) {
+						resolve(response.status)
+					} else {
+						reject(new Error("Error code", response.status))
+					}
+				})
+		})
+	}
+
+	async function reloadPageModules() {
+		// everytime login status change, call this function
+		if (SIGNED) {
+			// head
+			// document.getElementById('signup-link').style.display = 'none'
+			document.getElementById('signin-link').style.display = 'none'
+			document.getElementById('logout-link').style.display = 'flex'
+			// html content
+			document.getElementById('contentBeforeSigned').style.display = 'none'
+			document.getElementById('contentAfterSigned').style.display = 'block'
+			// load data for page
+			await loadCreatingRepoForm() // form for creating repo
+			loadRepositories() // repo list
+		} else {
+			// document.getElementById('signup-link').style.display = 'flex'
+			document.getElementById('signin-link').style.display = 'flex'
+			document.getElementById('logout-link').style.display = 'none'
+			// html content
+			document.getElementById('contentBeforeSigned').style.display = 'block'
+			document.getElementById('contentAfterSigned').style.display = 'none'
+		}
+	}
+
+	// ===================================== login and logout ===========================
+	// login model
+	function openLoginModal() {
+		// check if user has logged in, only show login modal when user has not logged in
+		if (SIGNED) {
+			console.log('User has logged in')
+			showMessage('positive', '已登录', 3000) // 消息显示3秒后消失
+		} else {
+			document.getElementById('loginModal').style.display = 'block';
+		}
+	}
+
+	function closeLoginModal() {
+		document.getElementById('loginModal').style.display = 'none';
+	}
+
+	async function login() {
+		var username = document.getElementById('username').value;
+		var password = document.getElementById('password').value;
+		const url = DEVSTAR_DOMAIN + `/api/v1/users/${username}/tokens`;
+
+		// Base64编码用户名和密码
+		const base64Credentials = btoa(username + ':' + password);
+
+		const tokenName = generateTokenName(10);
+		postData = {
+			"name": tokenName,
+			"scopes": ["write:user", "write:repository"]
+		}
+
+		fetch(url, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'Authorization': 'Basic ' + base64Credentials
+			},
+			body: JSON.stringify(postData)
+		})
+			.then(response => {
+				if (!response.ok) {
+					throw new Error('Error in logging ' + response.statusText);
+					closeLoginModal()
+				}
+				return response.json();
+			})
+			.then(async data => {
+				// store token in global variable and vscode global state
+				USERTOKEN = data.sha1;
+				USERNAME = username;
+				setUserTokenToVSCode(USERTOKEN);
+				setUsernameToVSCode(username);
+				SIGNED = true
+				await reloadPageModules()
+
+				// if user public key exist, meaning that public key has been uploaded
+				await getUserPublicKeyFromVSCode()
+					.then(async userPublicKey => {
+						if (userPublicKey == '') {
+							await createUserPublicKeyByVSCode()
+								.then(async () => {
+									// only upload new created public key
+									await getUserPublicKeyFromVSCode()
+										.then(async userPublicKey => {
+											const dataFromResp = await communicateVSCodeByWebview('getMachineName', {});
+											const machineName = dataFromResp.machineName;
+
+											const keyTitle = `${USERNAME}-${machineName}`
+											await uploadNewCreatedPublicKey(userPublicKey, keyTitle);
+										})
+										.catch(error => {
+											console.error("Failed to get NEW CREATED user public key from vscode: ", error)
+										})
+								})
+						}
+					})
+					.catch(error => {
+						console.error("Failed to get user public key from vscode: ", error)
+					})
+
+				closeLoginModal()
+			})
+			.catch(error => {
+				closeLoginModal()
+				console.error('There has been a problem when logging', error);
+			});
+	}
+
+	function generateTokenName(length = 10) {
+		// tokenName is random string and number and _ combination (10 characters)
+		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_';
+		let name = '';
+		const charactersLength = characters.length;
+		for (let i = 0; i < length; i++) {
+			name += characters.charAt(Math.floor(Math.random() * charactersLength));
+		}
+		return name
+	}
+
+	async function logout() {
+		// remove token and username from global variable and vscode global state
+		USERTOKEN = null
+		USERNAME = null
+		await setUserTokenToVSCode('')
+		await setUsernameToVSCode('')
+		SIGNED = false
+
+		await reloadPageModules()
+	}
+
+	async function setUserTokenToVSCode(userToken) {
+		var removeUserToken = false;
+		if ('' === userToken) {
+			removeUserToken = true
+		}
+
+		communicateVSCodeByWebview('setUserToken', {userToken: userToken})
+			.then(result => {
+				if (result.ok) {
+					console.log(removeUserToken ? 'User token has been removed from vscode' : 'User token has been stored in vscode')
+				} else {
+					console.error(removeUserToken ? 'Failed to remove user token from vscode' : 'Failed to store user token into vscode')
+				}
+			})
+			.catch(error => {
+				console.error('Failed to set user token into vscode:', error)
+			})
+	}
+
+	async function setUsernameToVSCode(username) {
+		var removeUsername = false;
+		if ('' === username) {
+			removeUsername = true;
+		}
+
+		await communicateVSCodeByWebview('setUsername', {username: username})
+			.then(result => {
+				if (result.ok) {
+					console.log(removeUsername ? 'User name has been removed from vscode' : 'User name has been stored in vscode')
+				} else {
+					console.error(removeUsername ? 'Failed to removing user name from vscode' : 'Failed to store user name in vscode')
+				}
+			})
+			.catch(error => {
+				console.error("Error happened when setting user name: ", error)
+			})
+	}
+
+	async function getUserPublicKeyFromVSCode() {
+		return new Promise(async (resolve, reject) => {
+			await communicateVSCodeByWebview('getUserPublicKey', {})
+				.then(data => {
+					const publicKey = data.userPublicKey;
+					resolve(publicKey)
+				})
+				.catch(error => {
+					reject(error)
+				})
+		})
+	}
+
+	async function createUserPublicKeyByVSCode() {
+		await communicateVSCodeByWebview('createUserPublicKey', {})
+			.then(res => {
+				if (res.ok) {
+					console.log('User public key has been created')
+				} else {
+					console.error('Failed to create user public key')
+				}
+			})
+			.catch(error => {
+				console.error('Failed to request to create user public key: ', erro)
+			})
+	}
+
+	async function uploadNewCreatedPublicKey(userPublicKey, keyTitle) {
+		const postData = {
+			"key": userPublicKey,
+			"title": keyTitle
+		}
+
+		const uploadUrl = DEVSTAR_DOMAIN + `/api/v1/user/keys`;
+
+		fetch(uploadUrl, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'Authorization': 'token ' + USERTOKEN
+			},
+			body: JSON.stringify(postData)
+		})
+			.then(response => {
+				if (!response.ok) {
+					throw new Error('Error in logging ' + response.statusText);
+				}
+				return response.json();
+			})
+			.then(async data => {
+				console.log("Successfully upload new created public key.\n", data)
+			})
+			.catch(error => {
+				console.error('There has been a problem with your fetch operation:', error);
+			});
+	}
+
+	// ===================================== Repo ===========================
+	function loadRepositories() {
+		// clear old data
+		const tableBody = document.getElementById('reposTable').getElementsByTagName('tbody')[0];
+		tableBody.innerHTML = '';
+
+		// load new data
+		var url = DEVSTAR_DOMAIN + "/api/v1/user/repos?page=1&limit=20"
+		var token = USERTOKEN
+		fetch(url, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				'Authorization': 'token ' + token
+			},
+		})
+			.then(response => {
+				if (!response.ok) {
+					throw new Error('Network response was not ok when loading repos' + response.statusText);
+				}
+				return response.json();
+			})
+			.then(data => {
+				var repos = data;
+				repos.forEach((repo, index) => {
+					var row = tableBody.insertRow(-1); // 在表格末尾插入一行
+					var cell1 = row.insertCell(0);
+					var cell2 = row.insertCell(1);
+					var cell3 = row.insertCell(2);
+
+					const repoFullName = repo.full_name;
+					const repoURL = repo.html_url;
+					const repoID = repo.id;
+
+					cell1.textContent = repoFullName;
+					cell2.textContent = repoURL;
+					cell3.innerHTML = `<button class="ui button primary" onclick="openProject('${repoID}')">Open Project</button>
+                    <button class="ui red button" onclick="deleteDevContainer('${repoID}')">Delete Container</button>
+                    `;
+
+				});
+			})
+			.catch(error => {
+				console.error('There has been a problem with your fetch operation:', error);
+			});
+	}
+
+	// 打开弹窗
+	function openModalForCreateRepository() {
+		document.getElementById('modalForCreatingRepo').style.display = "block";
+	}
+
+	// 关闭弹窗
+	function closeModalForCreatingRepo() {
+		document.getElementById('modalForCreatingRepo').style.display = "none";
+	}
+
+	// 点击窗外关闭弹窗
+	window.onclick = function (event) {
+		if (event.target == document.getElementById('modalForCreatingRepo')) {
+			closeModalForCreatingRepo();
+		}
+		if (event.target == document.getElementById('loginModal')) {
+			closeLoginModal();
+		}
+	}
+
+	function createRepo() {
+		// 这里添加实际的表单提交逻辑
+		// 模拟表单处理
+		var repo_name = document.getElementById('repo_name').value;
+		// 暂时不支持private
+		// var is_private = document.getElementById('is_private').checked;
+		var description = document.getElementById('description').value;
+		var template_url = document.getElementById('devstar_template').value;
+		var issue_labels = document.getElementById('issue_label').value
+		var gitignore = document.getElementById('gitignore').value
+		var license = document.getElementById('license').value
+		var readme = document.getElementById('readme').value
+		var default_branch = document.getElementById('default_branch').value;
+		var object_format_name = document.getElementById('object_format_name').value;
+		var is_template = document.getElementById('is_template').checked
+
+		const url = DEVSTAR_DOMAIN + "/api/v1/user/repos"
+		var token = USERTOKEN
+
+		const postData = {
+			'name': repo_name,
+			// 'private': is_private,
+			'trust_model': 'default',
+			'auto_init': true
+		}
+
+		if (description) {
+			postData.description = description
+		}
+		if (issue_labels) {
+			postData.issue_labels = issue_labels
+		}
+		if (gitignore) {
+			postData.gitignore = gitignore
+		}
+		if (license) {
+			postData.license = license
+		}
+		if (readme) {
+			postData.readme = readme
+		}
+		if (default_branch) {
+			postData.default_branch = default_branch
+		}
+		if (object_format_name) {
+			postData.object_format_name = object_format_name
+		}
+		if (is_template) {
+			postData.template = is_template
+		}
+
+		fetch(url, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'Authorization': 'token ' + token
+			},
+			body: JSON.stringify(postData)
+		})
+			.then(response => {
+				console.log(response)
+				if (!response.ok) {
+					throw new Error('Network response was not ok when creating project' + response.statusText);
+				}
+				return response.json();
+			})
+			.then(data => {
+				console.log(data);
+				showMessage('positive', '项目创建成功！', 3000) // 消息显示3秒后消失
+				loadRepositories()
+				closeModalForCreatingRepo(); // 关闭创建项目弹窗
+			})
+			.catch(error => {
+				console.error('There has been a problem with your fetch operation:', error);
+			});
+		return false;
+	}
+
+	// ===================================== Projects ===========================
+
+	async function openProject(repoId) {
+		var newCreated = false;
+		// check if container exist
+		await hasDevContainer(repoId)
+			.then(async hasDevContainer => {
+				if (!hasDevContainer) {
+					showMessage('positive', "正在创建开发容器...", 3000)
+					await createDevContainer(repoId)
+						.then(res => {
+							newCreated = true;
+							showMessage('positive', "创建容器成功！", 3000)
+							showMessage('positive', "请等待容器打开！", 5000)
+							console.log(`Succeed to create dev container for repo ${repoId}`)
+						})
+						.catch(error => {
+							showMessage('negative', "创建容器失败！", 3000)
+							console.log(`Fail to create dev container for repo ${repoId}: `, error)
+							return;
+						})
+				}
+			}).catch(error => {
+				console.log("There has a problem when check if the repo has devContainer:", error)
+				return;
+			})
+
+		console.log("opening project")
+
+		// open devcontainer through repoId
+		var url = DEVSTAR_DOMAIN + "/api/devcontainer"
+		var token = USERTOKEN
+
+		const queryParams = new URLSearchParams({
+			repoId: repoId,
+			wait: true
+		}).toString();
+		const urlWithParams = `${url}?${queryParams}`;
+
+		fetch(urlWithParams, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				'Authorization': 'token ' + token
+			},
+		})
+			.then(response => {
+				if (!response.ok) {
+					throw new Error('Network response was not ok when querying devContainer by repoId' + response.statusText);
+				}
+				return response.json();
+			})
+			.then(data => {
+				const responseCode = data.code
+				const reponseMsg = data.msg
+
+				if (responseCode == 0) {
+					// container start successfully
+					// get devContainer ssh connection information
+					const devContainerHost = data.data.devContainerHost
+					const devContainerUsername = data.data.devContainerUsername
+					const devContainerPort = data.data.devContainerPort
+					const devContainerWorkDir = data.data.devContainerWorkDir
+
+					// default: open with key
+					communicateVSCodeByWebview('firstOpenRemoteFolder', {
+						host: `${devContainerHost}`,
+						username: `${devContainerUsername}`,
+						port: `${devContainerPort}`,
+						path: `${devContainerWorkDir}`
+					})
+				} else {
+					// show Error to User
+					showMessage('negative', "打开容器失败！", 1500)
+					const responseErrorMsg = data.data.ErrorMsg
+					console.error("Error happen when starting dev container", responseErrorMsg)
+				}
+			})
+			.catch(error => {
+				console.error('There has been a problem with your fetch operation:', error);
+			});
+	}
+
+	async function hasDevContainer(repoId) {
+		return new Promise((resolve, reject) => {
+			url = DEVSTAR_DOMAIN + "/api/devcontainer/user"
+			token = USERTOKEN
+
+			fetch(url, {
+				method: 'GET',  // 或者 'POST', 根据API要求
+				headers: {
+					'Content-Type': 'application/json',
+					'Authorization': 'token ' + token
+				},
+			})
+				.then(response => {
+					if (!response.ok) {
+						throw new Error('Network response was not ok when querying devContainer list' + response.statusText);
+					}
+					return response.json();
+				})
+				.then(data => {
+					const devContainers = data.data.devContainers;
+					devContainers.forEach((c, index) => {
+						if (c.repoId == repoId) {
+							// has devContainer
+							resolve(true)
+							return
+						}
+					});
+					resolve(false)
+				})
+				.catch(error => {
+					console.error('There has been a problem with your fetch operation:', error);
+					reject(error)
+				});
+		})
+	}
+
+	async function createDevContainer(repoId) {
+		return new Promise(async (resolve, reject) => {
+			// request creating container
+			const url = DEVSTAR_DOMAIN + "/api/devcontainer"
+			var token = USERTOKEN
+
+			const postData = {
+				"repoId": repoId.toString(),
+				// "sshPublicKeyList": [publicKey]
+			}
+
+			fetch(url, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'Authorization': 'token ' + token
+				},
+				body: JSON.stringify(postData)
+			})
+				.then(response => {
+					if (!response.ok) {
+						throw new Error(`Network response was not ok when creating devContainer ${repoId}` + response.statusText);
+					}
+					return response.json();
+				})
+				.then(data => {
+					const responseCode = data.code
+
+					if (responseCode == 0) {
+						resolve("success")
+					} else {
+						reject(data.data.ErrorMsg)
+					}
+				})
+				.catch(error => {
+					console.error('There has been a problem with your fetch operation:', error);
+					reject(error)
+				});
+
+		})
+	}
+
+	async function getDefaultPublicKeyFromVSCode() {
+		try {
+			const data = await communicateVSCodeByWebview('getDefaultPublicKey', null);
+			const defaultPublicKey = data.defaultPublicKey;
+
+			return defaultPublicKey;
+		} catch (error) {
+			console.log("Failed to get default public key: ", error)
+		}
+	}
+
+	function deleteDevContainer(repoId) {
+		var url = DEVSTAR_DOMAIN + "/api/devcontainer"
+		var token = USERTOKEN
+
+		const queryParams = new URLSearchParams({
+			repoId: repoId,
+		}).toString();
+		const urlWithParams = `${url}?${queryParams}`;
+
+		fetch(urlWithParams, {
+			method: 'DELETE',
+			headers: {
+				'Content-Type': 'application/json',
+				'Authorization': 'token ' + token
+			},
+		})
+			.then(response => {
+				if (!response.ok) {
+					throw new Error('Network response was not ok when DELETEING devContainer by repoId' + response.statusText);
+				}
+				return response.json();
+			})
+			.then(data => {
+				const respCode = data.code;
+				if (0 == respCode) {
+					console.log('Successfully delete dev container belong to repoId:', repoId, data)
+					showMessage('positive', "删除容器成功！", 1500)
+				} else {
+					const errorMsg = data.data.ErrorMsg
+					throw new Error(errorMsg)
+				}
+			})
+			.catch(error => {
+				showMessage('negative', `删除容器失败\n${error}`, 3000)
+				console.error(`Failed to delete dev container belong to repoId: ${repoId}\n`, error)
+			})
+	}
+
+	function firstOpenRemoteFolder(host, username, password, port, path) {
+		const message = {
+			action: 'firstOpenRemoteFolder',
+			host: host,
+			username: username,
+			password: password,
+			port: port,
+			path: path,
+		}
+		// 向iframe父页面发送消息
+		window.parent.postMessage(message, '*');
+	}
+
+	function openRemoteFolder(host, path) {
+		const message = {
+			action: 'openRemoteFolder',
+			host: host,
+			path: path,
+		}
+		// 向iframe父页面发送消息
+		window.parent.postMessage(message, '*');
+	}
+
+	// ===================================== Utils ===========================
+
+	// 统一message
+	function showMessage(type, message, duration) {
+		if ('positive' == type) {
+			document.getElementById('positive_message').innerHTML = message;
+			document.getElementById('positive_message').style.display = 'block';
+			setTimeout(function () {
+				document.getElementById('positive_message').style.display = 'none';
+			}, duration); // 消息显示 duration/1000 秒后消失
+		} else if ('negative' == type){
+			document.getElementById('negative_message').innerHTML = message;
+			document.getElementById('negative_message').style.display = 'block';
+			setTimeout(function () {
+				document.getElementById('negative_message').style.display = 'none';
+			}, duration); // 消息显示 duration/1000 秒后消失
+		}
+	}
+
+	async function communicateVSCodeByWebview(action, data) {
+		return new Promise((resolve, reject) => {
+			// request to webview
+			window.parent.postMessage({target: "vscode", action: action, data: data}, '*');
+
+			// response from webview
+			function handleResponse(event) {
+				const jsonData = event.data
+				if (jsonData.action === action) {
+					// return webview response
+					console.log("dataFromVSCodeByWebview", jsonData.data)
+
+					window.removeEventListener('message', handleResponse) // 清理监听器
+					resolve(jsonData.data)
+				}
+			}
+
+			window.addEventListener('message', handleResponse)
+
+			setTimeout(() => {
+				window.removeEventListener('message', handleResponse)
+				reject('timeout')
+			}, 5000); // 5秒超时
+
+		})
+	}
+
+
+</script>
+
+
+{{template "base/footer" .}}
+
