<%#
	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argon Template

	luci-theme-argon
	Copyright 2020 Jerryk <jerrykuku@gmail.com>

	Have a bug? Please create an issue here on GitHub!
	https://github.com/jerrykuku/luci-theme-argon/issues

	luci-theme-bootstrap:
	Copyright 2008 Steven Barth <steven@midlink.org>
	Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
	Copyright 2012 David Menting <david@nut-bolt.nl>

	MUI:
	https://github.com/muicss/mui
	
	Agron Theme
	https://demos.creative-tim.com/argon-dashboard/index.html

	Licensed to the public under the Apache License 2.0
-%>

<%+header_login%>
<%
	local util = require "luci.util"
	local boardinfo = util.ubus("system", "board")
	local fs	= require "nixio.fs"
	local nutil = require "nixio.util"
	local uci = require 'luci.model.uci'.cursor()
	local theme_dir = media .. "/background/"
	function glob(...)
		local iter, code, msg = fs.glob(...)
		if iter then
			return nutil.consume(iter)
		else
			return nil, code, msg
		end
	end

	function getExtension(str)
		return str:match(".+%.(%w+)$")
	end

	function fetchMedia(path)
		local bgArr = {}
		local numBg = 0
		for i, f in ipairs(glob(path)) do
			attr = fs.stat(f)
			if attr then
				local ext = getExtension(fs.basename(f))
				if ext == "jpg" or ext == "png" or ext == "gif" or ext == "mp4" then
					local bg = {}
					bg.type = ext
					bg.url = theme_dir .. fs.basename(f)
					table.insert(bgArr,bg)
					numBg = numBg + 1
				end
			end
		end
		return bgArr,numBg
	end

	local bgcount = 0
	local currentBg = {}
	local bgs = {}
	local theme_dir = media .. "/background/"
	local bing_background = fs.access('/etc/config/argon') and uci:get_first('argon', 'global', 'bing_background') or 0
	bgs,bgcount=fetchMedia("/www" .. theme_dir .. "*")
%>
<div class="login-page">
	
	<%
	local bg_url = media .. "/img/bg1.jpg"
	if ( bing_background == "0" ) then
		if bgcount > 0 then
			currentBg =  bgs[math.random(1,bgcount)]
		end
		if ( bgcount > 0 and currentBg.type == "mp4" ) then
	%>
	<div class="video">
		<video autoplay loop muted id="video">
			<source src="<%=currentBg.url%>" type="video/mp4">
		</video>
	</div>
	<div class="volume-control mute"></div>
	<script>
		$(".volume-control").click(function(){
			if($(this).hasClass("mute")){
				$(this).removeClass("mute")
				$("#video").prop('muted', false);
			}else{
				$(this).addClass("mute")
				$("#video").prop('muted', true);
			}
		})
	</script>
	<%  elseif ( bgcount > 0 and currentBg["type"] ~= "mp4") then
			bg_url = currentBg.url
		end
	else
		local bing = "123"
		local sys = require "luci.sys"
		local json = require "luci.jsonc"
		local remote_bg_url="http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US"
		--bing = sys.httpget(remote_bg_url)
		bing = sys.exec("wget --timeout=0.5 -qO- '%s'" %remote_bg_url)
		if (bing and bing ~= '') then
			bg_url = "https://www.bing.com" .. json.parse(bing).images[1].url
		end
	end
	%>
	<% if(currentBg["type"] ~= "mp4") then %>
	<div class="main-bg" id="main-bg" style="background-image:url(<%=bg_url%>)"></div>
	<% end %>
	<div class="login-container">
		<div class="login-form">
			<a class="brand" href="/"><img src="<%=media%>/img/argon.svg" class="icon"><span
					class="brand-text"><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %></span></a>
			<form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">

				<%- if fuser then %>
				<div class="errorbox"><%:Invalid username and/or password! Please try again.%></div>
				<% end -%>

				<div class="input-container">
					<div class="input-group user-icon">
						<input class="cbi-input-user" id="cbi-input-user" type="text" name="luci_username" value="<%=duser%>" />
						<label class="border" for="cbi-input-user"></label>
					</div>
					<div class="input-group pass-icon">
						<input class="cbi-input-password" id="cbi-input-password" type="password" name="luci_password" />
						<label class="border" for="cbi-input-password"></label>
					</div>
				</div>
				<div>
					<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
				</div>
			</form>

			<script type="text/javascript">//<![CDATA[
				var input = document.getElementsByName('luci_password')[0];
				if (input)
					input.focus();
			//]]></script>
			<%
			local uci  = require "luci.model.uci".cursor()
			local fs  = require "nixio.fs"
			local https_key = uci:get("uhttpd", "main", "key")
			local https_port = uci:get("uhttpd", "main", "listen_https")
			if type(https_port) == "table" then
				https_port = https_port[1]
			end

			if https_port and fs.access(https_key) then
				https_port = https_port:match("(%d+)$")
			%>
			<script type="text/javascript">//<![CDATA[
				if (document.location.protocol != 'https:') {
					var url = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + window.location.pathname;
					var img = new Image;
					img.onload = function () { window.location = url };
					img.src = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + '<%=resource%>/cbi/up.gif?' + Math.random();;
					setTimeout(function () {
						img.src = ''
					}, 5000);
				}
			//]]></script>
			<% end %>
<%+footer%>
