<%
local all_lang = {"english","french","german","italian","dutch","portuguese","spanish","schinese","tchinese","japanese","czech","romanian","turkish","korean","polish"}
if _GET["lang"] ~= nil then
	for _,val in pairs(all_lang) do
		if _GET["lang"] == val then
			setcookie("client_lang",val,os.time()+3600*24*365)
			break
		end
	end

	if _COOKIE["client_lang"] == nil then
		_COOKIE["client_lang"] = "english"
	end
end

include("language.html")

local nType = c_GetLicenseInfo()
local client_login_name = _COOKIE["client_login_name"] or ""
local oldtheme = _COOKIE["oldtheme"] or ""
client_login_name = specialhtml_encode(client_login_name)

local imageDate = c_GetFileTime(c_GetAppPath().."/webclient/images/"..c_GetDomainLogo())
local strUserAgent = string.match(strHead,"User%-Agent:%s?(%s[^\r\n]*)")
local isIE = false
if strUserAgent ~= nil and string.find(strUserAgent, "MSIE") then
	isIE = true
end

if _SESSION["username"] == nil then
%>
<html>
<head>
<title>Wing FTP Server - Web Client</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="0" />
<link rel="Shortcut Icon" href="images/logo.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bulma.min.css" type="text/css">
<link rel="stylesheet" href="css/allfonts.min.css" type="text/css">
<style type="text/css">
img { 
	float:left; margin-right:10px; margin-top:-22px;
} 
input:focus,select:focus {
	border:0px;
}
.main {
	width:480px; margin:0 auto; margin-top:100px;
}

.hiddenimg {
	margin:5px;
	display:none;
}

@media only screen and (max-width: 1023px), only screen and (max-device-width: 1023px) {
	.main {
		width:380px; margin:0 auto; margin-top:60px;
	}
}

.alert-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.alert-overlay.active {
	opacity: 1;
	visibility: visible;
}

.alert-modal {
	background: #fff;
	border-radius: 8px;
	width: 95%;
	max-width: 460px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	transform: scale(0.7);
	opacity: 0;
	transition: all 0.3s ease;
}

.alert-overlay.active .alert-modal {
	transform: scale(1);
	opacity: 1;
}

.alert-header {
	padding: 16px 20px 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.alert-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	background: #409eff;
}

.error .alert-icon {
	background: #f56c6c;
}

.alert-title {
	font-size: 15px;
	font-weight: 500;
	color: #2d3748;
}

.alert-body {
	padding: 16px 20px;
}

.alert-message {
	font-size: 13px;
	color: #4a5568;
	line-height: 1.5;
	text-align: left;
}

.alert-footer {
	padding: 0 20px 16px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.alert-button {
	padding: 8px 16px;
	border: none;
	border-radius: 5px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}

.alert-cancel {
	background: #e2e8f0;
	color: #4a5568;
}

.alert-cancel:hover {
	background: #cbd5e0;
}

.alert-confirm {
	background: #409eff;
	color: white;
}

.alert-confirm:hover {
	background: #3182ce;
}
</style>
 </head>
 <body>
 <div class="alert-overlay" id="alertOverlay">
	<div class="alert-modal" id="alertModal">
		<div class="alert-header">
			<div class="alert-icon" id="alertIcon"></div>
			<div class="alert-title" id="alertTitle"></div>
		</div>
		<div class="alert-body">
			<p class="alert-message" id="alertMessage"></p>
		</div>
		<div class="alert-footer">
			<button class="alert-button alert-cancel" id="alertCancel"><%=LANG["create_cancel"]%></button>
			<button class="alert-button alert-confirm" id="alertConfirm"><%=LANG["create_submit"]%></button>
		</div>
	</div>
</div>

<script language="javascript">
var Alert = {

overlay: document.getElementById('alertOverlay'),
modal: document.getElementById('alertModal'),
icon: document.getElementById('alertIcon'),
title: document.getElementById('alertTitle'),
message: document.getElementById('alertMessage'),
cancelBtn: document.getElementById('alertCancel'),
confirmBtn: document.getElementById('alertConfirm'),


show: function(type, title, message, confirmCallback, cancelCallback) 
{
	try
	{
		this.title.innerText = title;
		this.message.innerHTML = message;
		this.modal.className = 'alert-modal ' + type;

		var iconText = '!';
		if (type === 'success') iconText = '✓';
		else if (type === 'error') iconText = '✕';
		else if (type === 'warning') iconText = '!';
		else if (type === 'info') iconText = 'i';

		this.icon.innerHTML = iconText;
		this.confirmBtn.onclick = function() {
			document.getElementById('alertOverlay').style.display = 'none';
			if (confirmCallback) confirmCallback();
		};

		this.cancelBtn.onclick = function() {
			document.getElementById('alertOverlay').style.display = 'none';
			if (cancelCallback) cancelCallback();
		};

		document.onkeydown =  function(e) 
		{
			if(!e) e=event;
			if (document.getElementById('alertOverlay').style.display != '') return;
			
			if (e.key == 'Enter')
			{
				e.preventDefault();
				document.getElementById('alertOverlay').style.display = 'none';
				if (confirmCallback) confirmCallback();
			}

			if (e.key == 'Escape' || e.key == 'Esc')
			{
				e.preventDefault();
				document.getElementById('alertOverlay').style.display = 'none';
				if (cancelCallback) cancelCallback();
			}
		};

		this.overlay.style.display = '';
		this.overlay.classList.add('active');
	}
	catch(e)
	{
		alert(message);
		if (confirmCallback) confirmCallback();
	}
}

};


if(!navigator.cookieEnabled)
{
	//alert("Cookies must be enabled on your browser!");
	Alert.show("error", "Error", "Cookies must be enabled on your browser!");
}

function $(obj)
{
	return document.getElementById(obj);
}

function ch()
{
	if ($("username_val").value=="")
	{
		Alert.show("info", "<%=LANG['login']%>", "<%=LANG['error_no_username']%>", function() {
			$("username_val").focus();
		}, function() {
			$("username_val").focus();
		});

		//alert("<%=LANG['error_no_username']%>");
		//$("username_val").focus();
		return false;
	}
	$("username").value = $("username_val").value.replace(/\+/g,"\t");
	$("password").value = $("password_val").value.replace(/\+/g,"\t");

	var isBrowserIE = navigator.userAgent.indexOf('MSIE')==-1? 0:1;
	if (isBrowserIE) 
		$("form_login").submit();

	return true;
}


function setCookie(name,value,date) 
{
	document.cookie = name + "=" + escape(value) + "; expires=" + date.toGMTString() + "; path=/;";
}

function getCookie(name) 
{
	var search; 
	search = name + "=" 
	offset = document.cookie.indexOf(search) 
	if (offset != -1) 
	{ 
		offset += search.length ; 
		end = document.cookie.indexOf(";", offset) ; 
		if (end == -1) 
		end = document.cookie.length; 
		return unescape(document.cookie.substring(offset, end)); 
	} 
	else 
	{
		return ""; 
	}
}

function deleteCookie(name) 
{
	var expdate = new Date(); 
	expdate.setTime(expdate.getTime() - (86400*1000)); 
	setCookie(name, "", expdate); 
}

var langindexArr = new Array("english","french","german","italian","dutch","portuguese","spanish","schinese","tchinese","japanese","czech","romanian","turkish","korean","polish");
var langArr = new Array("English","French","German","Italian","Dutch","Portuguese","Spanish","Simplified Chinese","Traditional Chinese","Japanese","Czech","Romanian","Turkish","Korean","Polish");

if(navigator.cookieEnabled)
{
	if(getCookie("client_lang") == "" && location.search.indexOf("?lang") == -1)
	{
		var language = null;
		if (navigator.appName == 'Netscape')
			language = navigator.language;
		else
			language = navigator.browserLanguage;

		if (language.indexOf('en') > -1) location = 'login.html?lang=english';
		else if (language.indexOf('fr') > -1) location = 'login.html?lang=french';
		else if (language.indexOf('de') > -1) location = 'login.html?lang=german';
		else if (language.indexOf('it') > -1) location = 'login.html?lang=italian';
		else if (language.indexOf('nl') > -1) location = 'login.html?lang=dutch';
		else if (language.indexOf('pt') > -1) location = 'login.html?lang=portuguese';
		else if (language.indexOf('es') > -1) location = 'login.html?lang=spanish';
		else if (language.indexOf('zh-TW') > -1) location = 'login.html?lang=tchinese';
		else if (language.indexOf('zh-HK') > -1) location = 'login.html?lang=tchinese';
		else if (language.indexOf('zh-MO') > -1) location = 'login.html?lang=tchinese';
		else if (language.indexOf('zh') > -1) location = 'login.html?lang=schinese';
		else if (language.indexOf('ja') > -1) location = 'login.html?lang=japanese';
		else if (language.indexOf('cz') > -1) location = 'login.html?lang=czech';
		else if (language.indexOf('ro') > -1) location = 'login.html?lang=romanian';
		else if (language.indexOf('tr') > -1) location = 'login.html?lang=turkish';
		else if (language.indexOf('ko') > -1) location = 'login.html?lang=korean';
		else if (language.indexOf('pl') > -1) location = 'login.html?lang=polish';
		else location = 'login.html?lang=english';
	}
	else
	{
		langArr = new Array("English","Français","Deutsch","Italiano","Nederlands","Português","Español","简体中文","繁體中文","日本語","Czech","Romanian","Türkçe","한국어","Polski");
	}
}

function changelanguage(obj)
{
	var l = obj.options[obj.selectedIndex].value;
	location = 'login.html?lang='+l;
}

function switchcheckbox()
{
	if($("remember").checked == false)
	{
		deleteCookie("client_login_name");
	}
}

function showQRcode()
{
	if($("qrcode").style.display == "none" || $("qrcode").style.display == "")
		$("qrcode").style.display = "block";
	else
		$("qrcode").style.display = "none";
}
</script>

<div class="main">

<form class="box" id="form_login" method="post" action="loginok.html" onsubmit="return ch()">
<input name="username" id="username" type="hidden">
<input name="password" id="password" type="hidden">

<div class="field">
	<p class="subtitle is-4" style="color:#CCC; margin-top:22px;"><img src="images/<%=c_GetDomainLogo()%>?t=<%=imageDate%>">Web Client</p>
</div>

<div class="field" style="margin-top:50px">
  <p class="control has-icons-left">
    <%if isIE then print(LANG["username"]) end%><input class="input" name="username_val" id="username_val" type="text" autocomplete="new-password" maxlength="128" value="<%=client_login_name%>" placeholder="<%=LANG["username"]%>">
    <span class="icon is-small is-left">
	  <img src="images/input_user.png" class="hiddenimg" title="<%=LANG["username"]%>">
      <i class="fas fa-user"></i>
    </span>
  </p>
</div>
<div class="field" style="margin-top:5px">
  <p class="control has-icons-left">
    <%if isIE then print(LANG["password"]) end%><input class="input" name="password_val" id="password_val" type="password" autocomplete="off" maxlength="128" placeholder="<%=LANG["password"]%>">
    <span class="icon is-small is-left">
	  <img src="images/input_pass.png" class="hiddenimg" title="<%=LANG["password"]%>">
      <i class="fas fa-lock"></i>
    </span>
  </p>
</div>

<div class="field" style="margin-top:5px">
<div class="control has-icons-left">
  <div class="select is-fullwidth">
    <select id="lang_sel" onchange="changelanguage(this)">
    </select>
  </div>
  <span class="icon is-small is-left">
    <img src="images/select_lang.png" class="hiddenimg" title="<%=LANG["language"]%>">
    <i class="fas fa-globe"></i>
  </span>
</div>
</div>

<div class="field" style="margin:10px 0px 20px 0px; font-size:10pt;">
	<span style="padding:3px; margin-right:3px;"><%=LANG["str_theme_label"]%></span>
    <input type="radio" name="theme" value="modern" <% if oldtheme ~= "1" then print("checked") end%>><%=LANG["str_theme_modern"]%>
    <input type="radio" name="theme" value="classic" style="margin-left:2px;" <% if oldtheme == "1" then print("checked") end%>><%=LANG["str_theme_classic"]%>
</div>

<div class="level" style="margin-top:5px">
<div class="level-left" style="float:left; font-size:10pt;">
  <input type="checkbox" name="remember" id="remember" value="true" <% if client_login_name ~= "" then print("checked") end%> onclick="switchcheckbox()" style="margin-right:5px;"><%=LANG["remember"]%>
</div>
<div class="level-right" style="float:right; margin:5px;">
  <p style="font-size:9pt; cursor:pointer; min-width:80px;" onclick="showQRcode();"><img src="images/phone.png" style="margin-right:3px; margin-top:1px;"><%=LANG["button_downpicture"]%> App</p>
  <p><a href="https://wftpserver.com/download_client.html" target="_blank"><img src="images/qrcode.png" id="qrcode" border="0" style="display:none; margin-top:1px; margin-bottom:10px; margin-left:18px;" title="<%=LANG["scan_qrcode"]%>"></a></p>
</div>
</div>

<div class="control" style="padding-top:20px">
<button class="button is-info is-fullwidth" id="button_submit" type="submit">
<span class="icon">
  <i class="fas fa-sign-in-alt"></i>
</span>
<span><%=LANG["login"]%></span>	
</button>
</div>

</form>

<div style="text-align:center; margin-top:30px; font-size:10pt;">
	<% if nType == 4 then %>
	  FTP server software powered by <b><a href="https://www.wftpserver.com/">Wing FTP Server v<%=c_GetVersion()%></a></b>
	<% else %>
	  <a href="https://www.wftpserver.com/">Wing FTP Server</a> ©2003-2026 <b>wftpserver.com</b> All Rights Reserved
	<% end %>
</div>

</div>
</body>
</html>

<script language="javascript">
if(navigator.cookieEnabled)
{
	for(var index in langArr)
	{
		$("lang_sel").options.add(new Option(langArr[index],langindexArr[index]));
		if(getCookie("client_lang") == langindexArr[index])
			$("lang_sel").options[index].selected = true;
	}
}

<% if client_login_name == "" then %>
$("button_submit").focus();
$("username_val").focus();
<% else %>
$("button_submit").focus();
$("password_val").focus();
<% end %>
</script>

<noscript><center><H2><%=LANG["error_nojavascript"]%></H2></center></noscript>

<% 
else
	local enableTwoFactor, twoFactorCode = c_GetSecretCode(_SESSION["username"])
	if enableTwoFactor ~= nil and enableTwoFactor == true and _SESSION["currentpath"] == nil then
		rawset(_SESSION,"logintime",os.time())
		if _SESSION["totp_randomkey"] == nil or _SESSION["totp_randomkey"] == "" then
			rawset(_SESSION,"totp_randomkey",c_TotpRandomKey(_REMOTE_IP))
		end
		SessionModule.save(_SESSION_ID)
		if twoFactorCode ~= nil and twoFactorCode == "" then
%>
<html>
<head>
<title>Wing FTP Server - Web Client</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="0" />
<link rel="Shortcut Icon" href="images/logo.ico" type="image/x-icon">
</head>

<style type="text/css">
<!--
body{
background:#60605E;
text-align: center;
overflow: auto;
}
a:link,a:visited,a:active,a:hover{color: #FFF;text-decoration:none;}

div{
font-size:15px;
color:#000000;
}

.btn_login{
border:none; border-radius:5px; background-color:#007BFF; color:#FFF; padding:8 20px; text-decoration:none; font-size:15px;
}
-->
</style>

<body>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr> 
	<td align="left" valign="top" style="padding-top:30px;"> 
	<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width: 980px; _width: 980px;">
		<tr style="background:#EEE;">
			<td height="80">
				<img src="images/iphone.png" border="0" style="vertical-align:middle;"> <b><%=LANG["totp_auth_required"]%></b>
			</td>
			<td align="right" style="padding-right:15px;">
				<input type="image" src="images/return.png" onclick="gotoUrl('logout.html');" style="border:0px; cursor:pointer;" alt="<%=LANG["str_switch_account"]%>" title="<%=LANG["str_switch_account"]%>">
			</td>
		</tr>
		<tr> 
		  <td style="background:#FFF; padding:20px;" colspan="2">
			  <div style="height: 450px;">
				<div style="margin-top:30px;">
				  <%=LANG["totp_init_tip1"]%>
				</div>
				<div style="margin-top:30px;">
				  <%=LANG["totp_init_tip2"]%> "<b><span id="secret"></span></b>".
				  <div id="qrcode" style="margin-top:10px;"></div>
				</div>
				<div style="margin-top:30px;">
				  <%=LANG["totp_init_tip3"]%>
				  <div style="margin-top:15px;">
				  <form id="form_login2" method="post" action="checkcode.html">
				  <input name="secretcode" id="secretcode" type="hidden" />
				  <input name="digitalcode" id="digitalcode" type="text" pattern="\d*" style="height:32px; width:150px; font-size:18px;" maxlength="6" />
				  <input class="btn_login" width="110" height="27" type="submit" value="<%=LANG["str_verify"]%>" onclick="return ch()" tabindex="5" />
				  </form>
				  </div>
				</div>
			  </div>
			</td>
		</tr>
		<tr> 
		<td height="50" style="font-size:12px;color:white;" colspan="2">
		<a href="https://www.wftpserver.com/" target="_blank">Wing FTP Server</a> ©2003-2026 <b>wftpserver.com</b> All Rights Reserved
		</td>
		</tr>
	  </table>
	  </td>
  </tr>
</table>

<script src="include/arale-qrcode.js"></script>
<script>
function $(obj)
{
	return document.getElementById(obj);
}

var secret = "<%=_SESSION['totp_randomkey']%>";
var qrcode = new AraleQRCode({
size: 128, text: "otpauth://totp/<%=_SESSION['username']%>?issuer=Wing%20FTP%20Server&secret=<%=_SESSION['totp_randomkey']%>"
});
$("secret").innerHTML = secret;
$("secretcode").value = secret;
$("qrcode").appendChild(qrcode);

$("digitalcode").focus();


function ch()
{
	if($("digitalcode").value.length != 6)
	{
		$("digitalcode").focus();
		$("digitalcode").value = "";
		return false;
	}

	var isBrowserIE = navigator.userAgent.indexOf('MSIE')==-1? 0:1;
	if (isBrowserIE) 
		$("form_login2").submit();

	return true;
}

function gotoUrl(url) 
{
	var isBrowserIE = navigator.userAgent.indexOf('MSIE')==-1? 0:1;
	if (isBrowserIE) 
	{
		try
		{
			var referLink = document.createElement("a");
			referLink.href = url;
			document.body.appendChild(referLink);
			referLink.click();
		}
		catch(e)
		{
			window.location = url;
		}
	} 
	else
	{
		window.location = url;
	}
}
</script>
</body>
</html>
<% else %>
<html>
<head>
<title>Wing FTP Server - Web Client</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="0" />
<link rel="Shortcut Icon" href="images/logo.ico" type="image/x-icon">
</head>

<style type="text/css">
<!--
body{
background:#60605E;
text-align: center;
overflow: auto;
}
a:link,a:visited,a:active,a:hover{color: #FFF;text-decoration:none;}

div{
font-size:15px;
color:#000000;
}

.btn_login{
border:none; border-radius:5px; background-color:#007BFF; color:#FFF; padding:8 20px; text-decoration:none; font-size:15px;
}
-->
</style>

<body>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr> 
	<td align="left" valign="top" style="padding-top:30px;"> 
	<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width: 800px; _width: 800px;">
		<tr style="background:#EEE;">
			<td height="80">
				<img src="images/iphone.png" border="0" style="vertical-align:middle;"> <b><%=LANG["totp_auth_required"]%></b>
			</td>
			<td align="right" style="padding-right:15px;">
				<input type="image" src="images/return.png" onclick="gotoUrl('logout.html');" style="border:0px; cursor:pointer;" alt="<%=LANG["str_switch_account"]%>" title="<%=LANG["str_switch_account"]%>">
			</td>
		</tr>
		<tr> 
		  <td style="background:#FFF; padding:20px;" colspan="2">
			  <div style="height: 350px;">
				<div style="margin-top:30px;">
				  <%=LANG["totp_input_tip1"]%>
				</div>
				<div style="margin-top:30px;">
				  <%=LANG["totp_input_tip2"]%>
				  <div style="margin-top:15px;">
				  <form id="form_login3" method="post" action="checkcode.html">
				  <input name="secretcode" id="secretcode" type="hidden" value="" />
				  <input name="digitalcode" id="digitalcode" type="text" pattern="\d*" style="height:32px; width:150px; font-size:18px;" maxlength="6" />
				  <input class="btn_login" width="110" height="27" type="submit" value="<%=LANG["str_verify"]%>" onclick="return ch()" tabindex="5" />
				  </form>
				  </div>
				</div>
			  </div>
			</td>
		</tr>
		<tr> 
		<td height="50" style="font-size:12px;color:white;" colspan="2">
		<a href="https://www.wftpserver.com/" target="_blank">Wing FTP Server</a> ©2003-2026 <b>wftpserver.com</b> All Rights Reserved
		</td>
		</tr>
	  </table>
	  </td>
  </tr>
</table>

<script>
function $(obj)
{
	return document.getElementById(obj);
}

$("digitalcode").focus();

function ch()
{
	if($("digitalcode").value.length != 6)
	{
		$("digitalcode").focus();
		$("digitalcode").value = "";
		return false;
	}

	var isBrowserIE = navigator.userAgent.indexOf('MSIE')==-1? 0:1;
	if (isBrowserIE) 
		$("form_login3").submit();

	return true;
}

function gotoUrl(url) 
{
	var isBrowserIE = navigator.userAgent.indexOf('MSIE')==-1? 0:1;
	if (isBrowserIE) 
	{
		try
		{
			var referLink = document.createElement("a");
			referLink.href = url;
			document.body.appendChild(referLink);
			referLink.click();
		}
		catch(e)
		{
			window.location = url;
		}
	} 
	else
	{
		window.location = url;
	}
}
</script>
</body>
</html>
<%
		end
	else
		print("<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>")
		print("<meta http-equiv='Developer' content='www.wftpserver.com'>")
		if _SESSION["oldtheme"] ~= nil and _SESSION["oldtheme"] == 1 then
			print("<script>top.location='main.html';</script>")
		else
			print("<script>top.location='index.html';</script>")
		end
	end
end 
%>
