Cable-Desktop/options.html
Emily Chao 5d3020b9ed Refactor phone number input view
Moves validation logic to its own view to be shared on index and options
pages.
2015-01-15 11:51:32 -10:00

110 lines
4.7 KiB
HTML

<!--This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html>
<head>
<title>TextSecure Options</title>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/options.css">
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div class='container'>
<h1><img id="textsecure-icon" src='icon.png'/> TextSecure</h1>
<div id='choose-setup' class='collapse'>
<div class='row'>
<div class='col-xs-5 col-xs-offset-1'>
<p>I'm new to TextSecure</p>
</div>
<div class='col-xs-5'>
<p>I have TextSecure installed on my phone.</p>
</div>
</div>
<div class='row'>
<div class='col-xs-5 col-xs-offset-1'>
<p><button type='button' id='new-account' class='btn btn-default'>Register</button></p>
</div>
<div class='col-xs-5'>
<p><button type='button' id='new-device' class='btn btn-default'>Add a device</button></p>
</div>
</div>
</div>
<div id="init-setup">
<div id='multi-device' class='collapse'>
<button class='back btn btn-link'>Back</button>
<div class='narrow'>
<div class='status'></div>
<div id="setup-qr"></div>
</div>
</div>
<div id='single-device' class='row collapse'>
<div class='col-xs-offset-1 col-md-6'>
<div class='narrow'>
<div id='step1'>
<div id="phone-number-input"></div>
<div class='clearfix'>
<button id="request-sms" class="btn btn-info">Send SMS</button>
<button id="request-voice" class="btn btn-info" tabindex=-1>Call</button>
</div>
</div>
<form id="step2" class="collapse">
<input class='form-control' type="text" pattern="\s*[0-9]{3}-?[0-9]{3}\s*" title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one" id="code" placeholder="Verification Code" autocomplete='off'>
<button id="verifyCode" class="btn btn-info" data-loading-text="Please wait...">Register</button>
<div id='error' class='collapse'></div>
</form>
</div>
<button class='back btn btn-link'>Back</button>
</div>
</div>
</div>
<div class='row'>
<div class='col-xs-offset-1 col-md-6'>
<div id="verify" class="collapse narrow">
<div id="verify1">Receiving identity key...<span class="done"></span></div>
<div id="verify2">Verifying number and setup code...<span class="done" id="verify2done"></span></div>
<div id="verify3">Generating keys...<span class="done" id="verify3done"></span></div>
<div id="verify4">Registering...<span class="done" id="verify4done"></span></div>
<div id="verify5">Syncing with existing devices...<span class="done" id="verify5done"></span></div>
</div>
</div>
</div>
<div id="setup-complete" class="collapse">
<h3>You are registered on TextSecure with number <span id="complete-number"></span></h3>
</div>
</div>
<script type="text/x-tmpl-mustache" id="phone-number">
<div class="phone-input-form">
<select class="regionCode">
<option value="ZZ" selected>Country</option>
</select>
<div class="number-container">
<input type="text" class="number" placeholder="Phone Number" />
</div>
</div>
</script>
<script type="text/javascript" src="js/components.js"></script>
<script type="text/javascript" src="js/libtextsecure.js"></script>
<script type="text/javascript" src="js/database.js"></script>
<script type="text/javascript" src="js/libphonenumber-util.js"></script>
<script type="text/javascript" src="js/models/messages.js"></script>
<script type="text/javascript" src="js/models/conversations.js"></script>
<script type="text/javascript" src="js/chromium.js"></script>
<script type="text/javascript" src="js/views/phone-input-view.js"></script>
<script type="text/javascript" src="js/options.js"></script>
</body>
</html>