CyTube/www/index.html
calzoneman 3a7acd0526 Implement new session system
I replaced the old login system with a more secure one.
Instead of storing cookies containing the username and plaintext password, the password
is submitted once to obtain a session hash, which is valid for a given length of time.
Registering and logging in is now done via an iframe, which prevents custom javascript from having access to the password field.
Site admins need to run the following SQL before updating, or else all of your logins/registrations will fail:

ALTER TABLE `registrations` ADD `session_hash` VARCHAR( 64 ) NOT NULL ,
ADD `expire` BIGINT NOT NULL
2013-04-25 22:50:12 -05:00

278 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CyTube</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Calvin 'calzoneman' Montgomery">
<link href="./assets/css/bootstrap.css" rel="stylesheet">
<link href="./assets/css/ytsync.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="./assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="index.html">CyTube</a>
<div class="">
<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="help.html">Help</a></li>
</ul>
<div class="navbar-form pull-right" id="loginform">
<button class="btn" id="login">Login/Register</button>
</div>
<div class="navbar-form pull-right" id="logoutform" style="display: none;">
<button class="btn" id="logout">Logout</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div id="loggedin" class="span6" style="display: none;">
<h3 id="welcome"></h3>
</div>
</div>
<div class="row" id="motdrow">
<div class="span10 offset1 well">
<p id="motd"></p>
</div>
<div class="span12 drinkbar">
<h1 id="drinkcount"></h1>
</div>
</div>
<div class="row" id="main" style="margin-top: 20px;">
<div class="span5" id="chatdiv">
<p id="usercount"></p>
<div id="userlist">
</div>
<div id="messagebuffer">
</div>
<input type="text" id="chatline" class="span5">
</div>
<div class="span7" id="videodiv">
<p id="currenttitle">Currently Playing: </p>
<div id="ytapiplayer">
</div>
</div>
</div>
<div class="row" id="queuerow">
<div class="span5">
<div class="row-fluid">
<div class="span12" id="pollcontainer">
</div>
<div class="span12" id="librarydiv">
<div class="row-fluid">
<div class="span7">
<input type="text" id="library_query" class="input-block-level">
</div>
<div class="span5 btn-group">
<button class="btn" id="library_search">Library</button>
<button class="btn" id="youtube_search">YouTube</button>
</div>
</div>
<ul id="library" class="videolist">
</ul>
</div>
</div>
</div>
<div class="span7" id="queuediv">
<div id="playlist_controls"style="display: none;">
<div class="row-fluid">
<div class="span8">
<input type="text" id="mediaurl" class="input-block-level">
</div>
<div class="span4 btn-group">
<button class="btn" id="queue_next">Next</button>
<button class="btn" id="queue_end">End</button>
</div>
</div>
</div>
<button class="btn btn-block" id="voteskip">Voteskip</button>
<div class="row-fluid">
<ul id="queue" class="span12 videolist">
</ul>
<div class="span12 well well-small" id="plmeta">
<span id="plcount"></span>
<span id="pllength"></span>
<div class="clear: both;"></div>
</div>
<button class="btn btn-danger btn-block" id="qlockbtn" style="display:none;">Unlock Queue</button>
<div class="span12 btn-group" style="margin: 0">
<button class="btn" id="getplaylist" style="width: 34%">Get Playlist URLs</button>
<button class="btn" id="clearplaylist" style="width: 33%">Clear Playlist</button>
<button class="btn" id="shuffleplaylist" style="width: 33%">Shuffle Playlist</button>
</div>
</div>
</div>
</div>
<div class="row" style="display: none;" id="modnav">
<div class="span10 offset1" id="modtabs">
<ul class="nav nav-tabs">
<li class="active">
<a href="javascript:void(0)" id="show_chancontrols">Channel Controls</a>
</li>
<li>
<a href="javascript:void(0)" id="show_banlist">Ban List</a>
</li>
<li>
<a href="javascript:void(0)" id="show_motdeditor">MOTD</a>
</li>
<li>
<a href="javascript:void(0)" id="show_filtereditor">Chat Filters</a>
</li>
<li>
<a href="javascript:void(0)" id="show_acl">Channel Ranks</a>
</li>
</ul>
</div>
</div>
<div class="row modonly" style="display: none" id="chancontrols">
<div class="span10 offset1">
<form action="javascript:void(0)">
<fieldset>
<div class="span4">
<label>When the queue is open:</label>
<label class="checkbox">
<input type="checkbox" id="opt_qopen_allow_qnext">
Allow anyone to Queue Next
</label>
<label class="checkbox">
<input type="checkbox" id="opt_qopen_allow_move">
Allow anyone to move videos
</label>
<label class="checkbox">
<input type="checkbox" id="opt_qopen_allow_delete">
Allow anyone to delete videos
</label>
<label class="checkbox">
<input type="checkbox" id="opt_qopen_allow_playnext">
Allow anyone to jump to a video
</label>
</div>
<div class="span5">
<label>Page Title
<input type="text" id="opt_pagetitle" placeholder="Sync" class="pull-right">
</label>
<br>
<label>Custom CSS
<input type="text" id="opt_customcss" class="pull-right">
</label>
<br>
<label>Custom JS<sup class="text-warning">BETA</sup>
<input type="text" id="opt_customjs" class="pull-right">
</label>
<br>
<label class="checkbox">
<input type="checkbox" id="opt_allow_voteskip">
Allow voteskip
</label>
<br>
<label>Voteskip Ratio
<input type="text" id="opt_voteskip_ratio" class="pull-right">
</label>
<br>
<label class="checkbox">
<input type="checkbox" id="opt_chat_antiflood">
Prevent chat flood
</label>
</div>
<div class="span10">
<button class="btn btn-primary" id="opt_submit">Save</button>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row modonly" id="banlist" style="display: none;">
<div class="span10 offset1">
<table class="table table-striped">
<thead>
<th></th>
<th>IP</th>
<th>Name</th>
<th>Banned By</th>
</thead>
</table>
</div>
</div>
<div class="row modonly" id="motdeditor" style="display: none;">
<div class="span10 offset1">
<textarea rows="10" id="motdtext"></textarea>
<button class="btn btn-primary" id="updatemotd">Update</button>
</div>
</div>
<div class="row modonly" id="filtereditor" style="display: none;">
<div class="span10 offset1">
<table class="table table-striped">
<thead>
<th></th>
<th>Regex</th>
<th>Replacement</th>
<th>Active</th>
</thead>
</table>
</div>
</div>
<div class="row modonly" id="channelranks" style="display: none;">
<div class="span10 offset1">
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Rank</th>
<th>Control</th>
</thead>
</table>
</div>
</div>
<div class="row" id="layout_buttons">
<div class="span4 offset3">
<div class="btn-group" style="width: 100%">
<button id="largelayout" class="btn">Large Layout</button>
<button id="hugelayout" class="btn">Huge Layout</button>
<button id="narrowlayout" class="btn">Narrow Layout</button>
<button id="stlayout" class="btn">Synchtube Layout</button>
</div>
</div>
</div>
</div> <!-- /container -->
<div id="footer">
<p class="muted">
CyTube Software Copyright &copy; 2013 Calvin Montgomery. Available for free on <a href="http://github.com/calzoneman/sync">GitHub</a>
</p>
</div>
<!-- APIs -->
<script src="http://api.dmcdn.net/all.js"></script>
<script src="./assets/js/sc.js"></script>
<script src="./assets/js/froogaloop.min.js"></script>
<script src="./assets/js/swf.js"></script>
<!-- Third party -->
<script src="./assets/js/jquery.js"></script>
<script src="./assets/js/bootstrap.js"></script>
<script src="./assets/js/bootstrap-transition.js"></script>
<script src="./assets/js/bootstrap-modal.js"></script>
<script src="./socket.io/socket.io.js"></script>
<!-- My Javascript -->
<script src="./assets/js/functions.js"></script>
<script src="./assets/js/callbacks.js"></script>
<script src="./assets/js/iourl.js"></script>
<script src="./assets/js/media.js"></script>
<script src="./assets/js/client.js"></script>
</body>
</html>