luci-theme-argon/luasrc/view/themes/argon/sysauth.htm

<%#
	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

	Argon Theme
	https://demos.creative-tim.com/argon-dashboard/index.html

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

<%+themes/argon/out_header_login%>
<%
	local util		= require "luci.util"
	local fs		= require "nixio.fs"
	local nutil		= require "nixio.util"
	local json		= require "luci.jsonc"
	local sys		= require "luci.sys"
	local uci		= require 'luci.model.uci'.cursor()

	-- Fetch Local Background Media

	local function glob(...)
		local iter, code, msg = fs.glob(...)
		if iter then
			return nutil.consume(iter)
		else
			return nil, code, msg
		end
	end


	local imageTypes = " jpg png gif webp "
	local videoTypes = " mp4 webm "
	local allTypes = imageTypes .. videoTypes
	local function fetchMedia(path, themeDir)
		local backgroundTable = {}
		local backgroundCount = 0
		for i, f in ipairs(glob(path)) do
			attr = fs.stat(f)
			if attr then
				local ext = fs.basename(f):match(".+%.(%w+)$")
				if ext ~= nil then
					ext = ext:lower()
				end
				if ext ~= nil and string.match(allTypes, " "..ext.." ") ~= nil then
					local bg = {}
					bg.type = ext
					bg.url = themeDir .. fs.basename(f)
					table.insert(backgroundTable, bg)
					backgroundCount = backgroundCount + 1
				end
			end
		end
		return backgroundTable, backgroundCount
	end
	local function selectBackground(themeDir)
		local bgUrl			= media .. "/img/bg1.jpg"
		local backgroundType	= "Image"
		local mimeType			= ""

		if fs.access("/etc/config/argon") then
			local online_wallpaper = uci:get_first('argon', 'global', 'online_wallpaper') or (uci:get_first('argon', 'global', 'bing_background') == '1' and 'bing')
			if (online_wallpaper and online_wallpaper ~= "none") then
				local picurl = sys.exec("/usr/libexec/argon/online_wallpaper")
				if (picurl and picurl ~= '') then
					return picurl, "Image", ""
				end
			end
		end

		local backgroundTable, backgroundCount = fetchMedia("/www" .. themeDir .. "*", themeDir)
		if ( backgroundCount > 0 ) then
			local currentBg = backgroundTable[math.random(1, backgroundCount)]
			bgUrl			= currentBg.url
			if (string.match(videoTypes, " "..currentBg.type.." ") ~= nil) then
				backgroundType	= "Video"
				mimeType		= "video/" .. currentBg.type
			end
		end

		return bgUrl, backgroundType, mimeType
	end

	local boardinfo			= util.ubus("system", "board")
	local themeDir			= media .. "/background/"
	local bgUrl, backgroundType, mimeType = selectBackground(themeDir)
%>
<!-- Login Page Start -->
<div class="login-page">
	<% if ( backgroundType == "Video" ) then %>
	<!-- Video Player Start -->
	<div class="video">
		<video autoplay loop muted id="video">
			<source src="<%=bgUrl%>" type="<%=mimeType%>">
		</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>
	<!-- Video Player End -->
	<% else %>
	<!-- Image Background Start -->
	<div class="main-bg" id="main-bg" style="background-image:url(<%=bgUrl%>)"></div>
	<!-- Image Background End -->
	<% end %>
	<!-- Login Container Start -->
	<div class="login-container">
		<div class="login-form">
			<!-- Logo Start -->
			<a class="brand" href="/"><img src="<%=media%>/img/argon.svg" class="icon">
				<span class="brand-text"><%=striptags( (boardinfo.hostname or "?") ) %></span>
			</a>
			<!-- Logo End -->
			<!-- Login Form Start -->
			<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>
			<!-- Login Form End -->
			<script type="text/javascript">//<![CDATA[
				var input = document.getElementsByName('luci_password')[0];
				if (input)
					input.focus();
			//]]></script>
<%+themes/argon/footer_login%>