signal-desktop/background.html
Scott Nonnenberg 426dab85a2
New design for import/install, 'light' import (#2053)
- A new design for the import flow. It features:
  - Icons at the top of every screen
  - Gray background, blue buttons, thinner text
  - Simpler copy
- A new design for the install flow. It features:
  - Immediate entry into the QR code screen
  - Animated dots to show that we're loading the QR code from the server
  - Fewer screens: 1) QR 2) device name 3) sync-in-progress
- When not set up, the app opens directly into the install screen, which has been streamlined. The `--import` command-line argument will cause the app to open directly into the import flow.
- Support for two different flavors of builds - the normal build will open into the standard registration flow, and the import flavor will be exactly the same except during setup it will open directly into the import flow.
- A new design for the (dev-only) standalone registration view
- When these install sequences are active, the OS File menu has entries to allow you to switch the method of setup you'd like to use. These go away as soon as the first step is taken in any of these flows.
- The device name (chosen on initial setup) is now shown in the settings panel
- At the end of a light import, we hand off to the normal device link screen, starting at the QR code. On a full import, we remove the sensitive encryption information in the export to prevent conflicts on multiple imports.
- `Whisper.Backup.exportToDirectory()` takes an options object so you can tell it to do a light export.
- `Whisper.Backup.importFromDirectory()` takes an options object so you can force it to load only the light components found on disk. It also returns an object so you can tell whether a given import was a full import or light import.
- On start of import, we build a list of all the ids present in the messages, conversations, and groups stores in IndexedDB. This can take some time if a lot of data is in the database already, but it makes the subsequent deduplicated import very fast.
- Disappearing messages are now excluded when exporting
- Remove some TODOs in the tests
2018-02-22 10:40:32 -08:00

930 lines
34 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy"
content="default-src 'none';
connect-src 'self' https: wss:;
script-src 'self';
style-src 'self' 'unsafe-inline';
img-src 'self' blob: data:;
font-src 'self';
media-src 'self' blob:;
child-src 'self';
object-src 'none'"
>
<title>Signal</title>
<link href='images/icon_128.png' rel='shortcut icon'>
<link href="stylesheets/manifest.css" rel="stylesheet" type="text/css" />
<script type='text/x-tmpl-mustache' id='app-migration-screen'>
<div class='content'>
<img src='images/icon_128.png'>
{{ ^hideProgress }}
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
{{ /hideProgress }}
<div class='message'>{{& message }}</div>
<div>
{{ #importButton }}
<button class='import grey'>{{ importButton }}</button>
{{ /importButton }}
{{ #restartButton }}
<button class='restart grey'>{{ restartButton }}</button>
{{ /restartButton }}
{{ #cancelButton }}
<button class='cancel grey'>{{ cancelButton }}</button>
{{ /cancelButton }}
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='app-loading-screen'>
<div class='content'>
<img src='images/icon_128.png'>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
<div class='message'>{{ message }}</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='conversation-loading-screen'>
<div class='content'>
<img src='images/icon_128.png'>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='two-column'>
<div class='gutter'>
<div class='network-status-container'></div>
<div class='title-bar active' id='header'>
<div class='header-buttons right'>
<div class='vertical-align'>
<div class='global-menu menu'>
<button class='hamburger' alt='signal menu'></button>
<ul class='menu-list'>
<li class='showSettings'>{{ settings }}</li>
<li class='restart-signal'>{{ restartSignal }}</li>
</ul>
</div>
</div>
</div>
<h1>Signal</h1>
<div class='tool-bar clearfix'>
<input type='search' class='search' placeholder='{{ searchForPeopleOrGroups }}' dir='auto'>
<span class='search-icon'></span>
</div>
</div>
<div class='content'>
<div class='conversations inbox'></div>
<div class='conversations search-results hide'>
<div class='new-contact contact hide'></div>
</div>
</div>
</div>
<div class='conversation-stack'>
<div class='conversation placeholder'>
<div class='conversation-header'></div>
<div class='content'>
<img src='images/icon_128.png' />
<h3>{{ welcomeToSignal }}</h3>
<p>{{ selectAContact }}</p>
</div>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
<button class='text {{ cssClass }}' alt='{{ moreBelow }}'>
<div class='icon'></div>
</button>
</script>
<script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
<div class='bar'>
<div class='text'>
{{ unreadMessages }}
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='expired_alert'>
<a target='_blank' href='https://chrome.google.com/webstore/detail/bikioccmkafdpakkkcpdbppfkghcmihk'>
<button class='upgrade'>{{ upgrade }}</button>
</a>
{{ expiredWarning }}
</script>
<script type='text/x-tmpl-mustache' id='banner'>
<div class='body'>
<span class='icon warning'></span>
{{ message }}
<span class='icon dismiss'></span>
</div>
</script>
<script type='text/x-tmpl-mustache' id='toast'>
{{ toastMessage }}
</script>
<script type='text/x-tmpl-mustache' id='hint'>
<p> {{ content }}</p>
</script>
<script type='text/x-tmpl-mustache' id='conversation-title'>
{{ #name }}
<span class='conversation-name' dir='auto'>{{ name }}</span>
{{ /name }}
{{ #number }}
<span class='conversation-number'>{{ number }}</span>
{{ /number }}
{{ #profileName }}
<span class='profileName'>{{ profileName }} </span>
{{ /profileName }}
{{ #isVerified }}
<span class='verified'><span class='verified-icon'></span> {{ verified }}</span>
{{ /isVerified }}
</script>
<script type='text/x-tmpl-mustache' id='conversation'>
<div class='conversation-header {{ avatar.color }}'>
<div class='header-buttons left'>
<div class='vertical-align'>
<button class='back hide'></button>
</div>
</div>
<div class='header-buttons right'>
<div class='vertical-align'>
<div class='conversation-menu menu'>
<button class='hamburger' alt='conversation menu'></button>
<ul class='menu-list'>
<li class='disappearing-messages'>{{ disappearing-messages }}</li>
{{#group}}
<li class='show-members'>{{ show-members }}</li>
<!-- <li class='update-group'>Update group</li> -->
<!-- <li class='leave-group'>Leave group</li> -->
{{/group}}
{{^group}}
{{ ^isMe }}
<li class='show-identity'>{{ show-identity }}</li>
{{ /isMe }}
<li class='end-session'>{{ end-session }}</li>
{{/group}}
<li class='destroy'>{{ destroy }}</li>
</ul>
</div>
<div class='timer-menu menu'>
<button class='clock' alt='timer menu'></button>
<ul class='menu-list'>
{{ #timer_options }}
<li data-seconds={{ attributes.seconds }}>{{ getName }}</li>
{{ /timer_options }}
</ul>
</div>
</div>
</div>
<span class='conversation-title'></span>
{{> avatar }}
</div>
<div class='main panel'>
<div class='discussion-container'>
<div class='bar-container hide'>
<div class='bar active progress-bar-striped progress-bar'></div>
</div>
</div>
<div class='bottom-bar' id='footer'>
<div class='emoji-panel-container'></div>
<div class='compose'>
<form class='send clearfix'>
<div class='attachment-previews'></div>
<div class='flex'>
<button class='emoji'></button>
<textarea class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto'></textarea>
<div class='capture-audio'>
<button class='microphone'></button>
</div>
<div class='android-length-warning'>
{{ android-length-warning }}
</div>
<div class='choose-file'>
<button class='paperclip thumbnail'></button>
<input type='file' class='file-input'>
</div>
</div>
</form>
</div>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='recorder'>
<button class='finish'><span class='icon'></span></button>
<span class='time'>0:00</span>
<button class='close'><span class='icon'></span></button>
</script>
<script type='text/x-tmpl-mustache' id='lightbox'>
<div class='content'>
<div class='controls'>
<a class='x close' alt='Close image.' href='#'></a>
<a class='save' alt='Save as...' href='#'></a>
</div>
<img class='image' src='{{ url }}' />
</div>
</script>
<script type='text/x-tmpl-mustache' id='confirmation-dialog'>
<div class="content">
<div class='message'>{{ message }}</div>
<div class='buttons'>
{{ #showCancel }}
<button class='cancel' tabindex='2'>{{ cancel }}</button>
{{ /showCancel }}
<button class='ok' tabindex='1'>{{ ok }}</button>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='attachment-preview'>
<img src='{{ source }}' class='preview' />
<a class='x close' alt='remove attachment' href='#'></a>
</script>
<script type='text/x-tmpl-mustache' id='file-view'>
<div class='icon {{ mediaType }}'></div>
<div class='text'>
<div class='fileName' title='{{ altText }}'>
{{ fileName }}
</div>
<div class='fileSize'>{{ fileSize }}</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='hasRetry'>
{{ messageNotSent }}
<span href='#' class='retry'>{{ resend }}</span>
</script>
<script type='text/x-tmpl-mustache' id='some-failed'>
{{ someFailed }}
</script>
<script type='text/x-tmpl-mustache' id='keychange'>
<span class='content' dir='auto'><span class='shield icon'></span> {{ content }}</span>
</script>
<script type='text/x-tmpl-mustache' id='verified-change'>
<span class='content' dir='auto'><span class='{{ icon }} icon'></span> {{ content }}</span>
</script>
<script type='text/x-tmpl-mustache' id='message'>
{{> avatar }}
<div class='bubble {{ avatar.color }}'>
<div class='sender' dir='auto'>
{{ sender }}
{{ #profileName }}
<span class='profileName'>{{ profileName }} </span>
{{ /profileName }}
</div>
<div class='attachments'></div>
<p class='content' dir='auto'>
{{ #message }}<span class='body'>{{ message }}</span>{{ /message }}
</p>
<div class='meta'>
<span class='timestamp' data-timestamp={{ timestamp }}></span>
<span class='status hide'></span>
<span class='timer'></span>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='hourglass'>
<span class='hourglass'><span class='sand'></span></span>
</script>
<script type='text/x-tmpl-mustache' id='expirationTimerUpdate'>
<span class='content'><span class='icon clock'></span> {{ content }}</span>
</script>
<script type='text/x-tmpl-mustache' id='new-group-update'>
<div class='conversation-header'>
<button class='back'></button>
<button class='send check'></button>
<span class='conversation-title'>Update group</span>
</div>
{{> group_info_input }}
<div class='container'>
<div class='scrollable'></div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='identicon-svg'>
<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
<circle cx='50' cy='50' r='40' fill='{{ color }}' />
<text text-anchor='middle' fill='white' font-family='sans-serif' font-size='24px' x='50' y='50' baseline-shift='-8px'>
{{ content }}
</text>
</svg>
</script>
<script type='text/x-tmpl-mustache' id='avatar'>
<span aria-hidden class='avatar
{{ ^avatar.url }}
{{ avatar.color }}
{{ /avatar.url }}
'
{{ #avatar.url }}
style='background-image: url("{{ avatar.url }}");'
{{ /avatar.url }}
>
{{ avatar.content }}
</span>
</script>
<script type='text/x-tmpl-mustache' id='contact_pill'>
<span>{{ name }}</span><span class='remove'>x</span>
</script>
<script type='text/x-tmpl-mustache' id='contact_name_and_number'>
<h3 class='name' dir='auto'>
{{ title }}
{{ #profileName }}
<span class='profileName'>{{ profileName }} </span>
{{ /profileName }}
</h3>
<div class='number'>{{ #isVerified }}<span class='verified-icon'></span> {{ verified }} &middot;{{ /isVerified }} {{ number }}</div>
</script>
<script type='text/x-tmpl-mustache' id='contact'>
{{> avatar }}
<div class='contact-details {{ class }}'> {{> contact_name_and_number }} </div>
</script>
<script type='text/x-tmpl-mustache' id='new-contact'>
{{> avatar }}
<div class='contact-details'>
{{> contact_name_and_number }}
</div>
</script>
<script type='text/x-tmpl-mustache' id='conversation-preview'>
{{> avatar }}
<div class='contact-details'>
<span class='last-timestamp' data-timestamp='{{ last_message_timestamp }}' dir='auto' > </span>
{{> contact_name_and_number }}
{{ #unreadCount }}
<span class='unread-count'>{{ unreadCount }}</span>
{{ /unreadCount }}
{{ #last_message }}
<p class='last-message' dir='auto'> {{ last_message }} </p>
{{ /last_message }}
</div>
</script>
<script type='text/x-tmpl-mustache' id='phone-number'>
<div class='phone-input-form'>
<div class='number-container'>
<input type='tel' class='number' placeholder="Phone Number" />
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='file-size-modal'>
{{ file-size-warning }}
({{ limit }}{{ units }})
</script>
<script type='text/x-tmpl-mustache' id='attachment-type-modal'>
Sorry, your attachment has a type, {{type}}, that is not currently supported.
</script>
<script type='text/x-tmpl-mustache' id='message-detail'>
<div class='container'>
<div class='message-container'></div>
<div class='info'>
<table>
{{ #errors }}
<tr>
<td class='label'>{{ errorLabel }}</td>
<td> <span class='error-message'>{{message}}</span> </td>
</tr>
{{ /errors }}
<tr>
<td class='label'>{{ sent }}</td>
<td> {{ sent_at }}</td>
</tr>
{{ #received_at }}
<tr>
<td class='label'>{{ received }}</td>
<td> {{ received_at }}</td>
</tr>
{{ /received_at }}
<tr> <td class='tofrom label'>{{tofrom}}</td> </tr>
</table>
<div class='contacts'>
</div>
</div>
<div class='delete-container'>
<button class='delete grey'>{{ deleteLabel }}</button>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='identity-key-send-error'>
<div class='container'>
<div class='explanation'>
{{ errorExplanation }}
</div>
<div class='safety-number'>
<button class='show-safety-number grey'>{{ showSafetyNumber }}</button>
</div>
<div class='actions'>
<button class='send-anyway grey'>{{ sendAnyway }}</button>
<button class='cancel grey'>{{ cancel }}</button>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='group-member-list'>
<div class='container'>
{{ #summary }} <div class='summary'>{{ summary }}</div>{{ /summary }}
</div>
</script>
<script type='text/x-tmpl-mustache' id='key-verification'>
<div class='container'>
{{ ^hasTheirKey }}
<div class='placeholder'>{{ theirKeyUnknown }}</div>
{{ /hasTheirKey }}
{{ #hasTheirKey }}
<label> {{ yourSafetyNumberWith }} </label>
<!--<div class='qr'></div>-->
<div class='key'>
{{ #chunks }} <span>{{ . }}</span> {{ /chunks }}
</div>
{{ /hasTheirKey }}
{{ verifyHelp }}
<p> {{> link_to_support }} </p>
<div class='summary'>
{{ #isVerified }}
<span class='icon verified'></span>
{{ /isVerified }}
{{ ^isVerified }}
<span class='icon shield'></span>
{{ /isVerified }}
{{ verifiedStatus }}
</div>
<div class='verify'>
<button class='verify grey'>
{{ verifyButton }}
</button>
</div>
</div>
</script>
<!-- index -->
<script type='text/x-tmpl-mustache' id='group_info_input'>
<div class='group-info-input'>
<div class='group-avatar'>
<div class='choose-file attachment-previews thumbnail'>
{{> avatar }}
</div>
<input type='file' name='avatar' class='file-input'>
</div>
<input type='text' name='name' class='name' placeholder='Group Name' value='{{ name }}'>
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-conversation'>
<div class='conversation-header'>
<button class='back'></button>
<button class='create check hide'></button>
<span class='conversation-title'>New Message</span>
</div>
{{> group_info_input }}
<div class='container'>
<div class='scrollable'>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='recipients-input'>
<div class='recipients-container'>
<span class='recipients'></span>
<input type='text' class='search' placeholder='{{ placeholder }}' dir='auto' />
</div>
<div class='results'>
<div class='new-contact contact hide'></div>
<div class='contacts'></div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='generic-error'>
<p>{{ message }}</p>
</script>
<script type='text/x-tmpl-mustache' id='error-icon'>
<span class='error-icon'>
</span>
{{ #message }}
<span class='error-message'>{{message}}</span>
{{ /message }}
</script>
<script type='text/x-tmpl-mustache' id='contact-detail'>
<div class='clearfix'>
{{> avatar }}
<div class='contact-details'>
{{ #errors }}
<div class='error-icon-container'>
{{ #showErrorButton }}
<button class='error'>
<span class='icon error'></span>
{{ errorButtonLabel }}
</button>
{{ /showErrorButton }}
{{ ^showErrorButton }}
<span class='error-icon'></span>
{{ /showErrorButton }}
</div>
{{ /errors }}
{{ ^errors }}
<div class='status-icon-container {{ status }}'>
<span class='status'></span>
</div>
{{ /errors }}
<span class='name' dir='auto'>{{ name }}</span>
{{ #errors }}
{{ #message }}
<p class='error-message'>{{message}}</p>
{{ /message }}
{{ /errors }}
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='link_to_support'>
<a href='http://support.signal.org/hc/articles/213134107' target='_blank'>
{{ learnMore }}
</a>
</script>
<script type='text/x-tmpl-mustache' id='debug-log'>
<div class='content'>
<div>
<a class='x close' alt='close debug log' href='#'></a>
<h1> {{ title }} </h1>
<p> {{ debugLogExplanation }}</p>
</div>
<textarea spellcheck='false' rows='5'></textarea>
<div class='buttons'>
<button class='grey submit'>{{ submit }}</button>
</div>
<div class='result'>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='debug-log-link'>
<div class='input-group clearfix'>
<input type='text' class='link' readonly value='{{ url }}' />
<a class='open' alt='open in a new browser tab' target='_blank' href='{{ url }}'></a>
</div>
<p>
<a class='report-link' target='_blank'
href='https://github.com/signalapp/Signal-Desktop/issues/new/'>
{{ reportIssue }}
</a>
</p>
</script>
<script type='text/x-tmpl-mustache' id='settings'>
<div class='content'>
<a class='x close' alt='close settings' href='#'></a>
<h2>{{ settings }}</h2>
<div class='device-name-settings'>
<b>{{ deviceNameLabel }}:</b> {{ deviceName }}
</div>
<hr>
<div class='theme-settings'>
<h3>{{ theme }}</h3>
<div>
<input type='radio' name='theme' id='theme-setting-android' value='android'>
<label for='theme-setting-android'>Android</label>
</div>
<div>
<input type='radio' name='theme' id='theme-setting-android-dark' value='android-dark'>
<label for='theme-setting-android-dark'>{{ themeAndroidDark }}</label>
</div>
<div>
<input type='radio' name='theme' id='theme-setting-ios' value='ios'/>
<label for='theme-setting-ios'>iOS</label>
</div>
</div>
<br />
<div class='menu-bar-setting'>
<input type='checkbox' name='hide-menu-bar' id='hide-menu-bar'/>
<label for='hide-menu-bar'>{{ hideMenuBar }}</label>
</div>
<hr>
<div class='notification-settings'>
<h3>{{ notifications }}</h3>
<p>{{ notificationSettingsDialog }}</p>
<div>
<input type='radio' name='notifications' id='notification-setting-message' value='message'>
<label for='notification-setting-message'>{{ nameAndMessage }} </label>
</div>
<div>
<input type='radio' name='notifications' id='notification-setting-name' value='name'/>
<label for='notification-setting-name'>{{ nameOnly }} </label>
</div>
<div>
<input type='radio' name='notifications' id='notification-setting-count' value='count'/>
<label for='notification-setting-count'>{{ noNameOrMessage }} </label>
</div>
<div>
<input type='radio' name='notifications' id='notification-setting-off' value='off'/>
<label for='notification-setting-off'>{{ disableNotifications }} </label>
</div>
</div>
<br />
<div class='audio-notification-setting'>
<input type='checkbox' name='audio-notification' id='audio-notification'/>
<label for='audio-notification'>{{ audioNotificationDescription }}</label>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='syncSettings'>
<hr>
<h3>{{ sync }}</h3>
<div>
<button class='grey sync'>{{ syncNow }}</button>
<p>
{{ syncExplanation }}
<div class='synced_at'>
{{ lastSynced }} {{ syncDate }} {{ syncTime }}
</div>
<div class='sync_failed'>{{ syncFailed }}</div>
</p>
</div>
</script>
<script type='text/x-tmpl-mustache' id='networkStatus'>
<div class='network-status-message'>
<h3>{{ message }}</h3>
<span>{{ instructions }}</span>
</div>
{{ #reconnectDurationAsSeconds }}
<div class="network-status-message">
{{ attemptingReconnectionMessage }}
</div>
{{/reconnectDurationAsSeconds }}
{{ #action }}
<div class="action">
<button class='small blue {{ buttonClass }}'>{{ action }}</button>
</div>
{{/action }}
</script>
<script type='text/x-tmpl-mustache' id='import-flow-template'>
{{#isStep2}}
<div id='step2' class='step'>
<div class='inner'>
<div class='step-body'>
<span class='banner-icon folder-outline'></span>
<div class='header'>{{ chooseHeader }}</div>
<div class='body-text'>{{ choose }}</div>
</div>
<div class='nav'>
<div>
<a class='button choose'>{{ chooseButton }}</a>
</div>
</div>
</div>
</div>
{{/isStep2}}
{{#isStep3}}
<div id='step3' class='step'>
<div class='inner'>
<div class='step-body'>
<span class='banner-icon import'></span>
<div class='header'>{{ importingHeader }}</div>
</div>
<div class='progress'>
<div class='bar-container'>
<div class='bar progress-bar progress-bar-striped active'></div>
</div>
</div>
</div>
</div>
{{/isStep3}}
{{#isStep4}}
<div id='step4' class='step'>
<div class='inner'>
<div class='step-body'>
<span class='banner-icon check-circle-outline'></span>
<div class='header'>{{ completeHeader }}</div>
</div>
<div class='nav'>
{{#restartButton}}
<div>
<a class='button restart'>{{ restartButton }}</a>
</div>
{{/restartButton}}
{{#registerButton}}
<div>
<a class='button register'>{{ registerButton }}</a>
</div>
{{/registerButton}}
</div>
</div>
</div>
{{/isStep4}}
{{#isError}}
<div id='error' class='step'>
<div class='inner error-dialog clearfix'>
<div class='step-body'>
<span class='banner-icon alert-outline'></span>
<div class='header'>{{ errorHeader }}</div>
<div class='body-text-wide'>{{& errorMessage }}</div>
</div>
<div class='nav'>
<div>
<a class='button choose'>{{ chooseButton }}</a>
</div>
</div>
</div>
</div>
{{/isError}}
</script>
<script type='text/x-tmpl-mustache' id='link-flow-template'>
{{#isStep3}}
<div id='step3' class='step'>
<div class='inner'>
<div class='step-body'>
<div class='header'>{{ linkYourPhone }}</div>
<div id="qr">
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
</div>
</div>
<div class='nav'>
<div class='instructions'>
<div class='android'>
<div class='label'>
<span class='os-icon android'></span>
</div>
<div class='body'>
<div> {{ signalSettings }}</div>
<div> {{ linkedDevices }}</div>
<div> {{ androidFinalStep }}</div>
</div>
</div>
<div class='apple'>
<div class='label'>
<span class='os-icon apple'></span>
</div>
<div class='body'>
<div> {{ signalSettings }}</div>
<div> {{ linkedDevices }}</div>
<div> {{ appleFinalStep }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/isStep3}}
{{#isStep4}}
<div id='step4' class='step'>
<div class='inner'>
<div class='step-body'>
<span class='banner-icon lead-pencil'></span>
<div class='header'>{{ chooseName }}</div>
<div>
<input type='text' class='device-name' spellcheck='false' maxlength='50' />
</div>
</div>
<div class='nav'>
<div>
<a class='button finish'>{{ finishLinkingPhoneButton }}</a>
</div>
</div>
</div>
</div>
{{/isStep4}}
{{#isStep5}}
<div id='step5' class='step'>
<div class='inner'>
<div class='step-body'>
<span class='banner-icon sync'></span>
<div class='header'>{{ syncing }}</div>
</div>
<div class='progress'>
<div class='bar-container'>
<div class='bar progress-bar progress-bar-striped active'></div>
</div>
</div>
</div>
</div>
{{/isStep5}}
{{#isError}}
<div id='error' class='step'>
<div class='inner'>
<div class='step-body'>
<span class='banner-icon alert-outline'></span>
<div class='header'>{{ errorHeader }}</div>
<div class='body'>{{ errorMessage }}</div>
</div>
<div class='nav'>
<a class='button try-again'>{{ errorButton }}</a>
</div>
</div>
</div>
{{/isError}}
</script>
<script type='text/x-tmpl-mustache' id='standalone'>
<div class='step'>
<div class='inner'>
<div class='step-body'>
<img class='banner-image' src='images/icon_128.png' />
<div class='header'>Create your Signal Account</div>
<div id='phone-number-input'>
<div class='phone-input-form'>
<div id='number-container' class='number-container'>
<input type='tel' class='number' placeholder='Phone Number' />
</div>
</div>
</div>
<div class='clearfix'>
<a class='button' id='request-sms'>Send SMS</a>
<a class='link' id='request-voice' tabindex=-1>Call</a>
</div>
<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'>
<div id='error' class='collapse'></div>
<div id=status></div>
</div>
<div class='nav'>
<a class='button' id='verifyCode' data-loading-text='Please wait...'>Register</a>
</div>
</div>
</div>
</script>
<script type='text/javascript' src='js/components.js'></script>
<script type='text/javascript' src='js/reliable_trigger.js'></script>
<script type='text/javascript' src='js/database.js'></script>
<script type='text/javascript' src='js/storage.js'></script>
<script type='text/javascript' src='js/signal_protocol_store.js'></script>
<script type='text/javascript' src='js/libtextsecure.js'></script>
<script type='text/javascript' src='js/focus_listener.js'></script>
<script type='text/javascript' src='js/notifications.js'></script>
<script type='text/javascript' src='js/delivery_receipts.js'></script>
<script type='text/javascript' src='js/read_receipts.js'></script>
<script type='text/javascript' src='js/read_syncs.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/models/blockedNumbers.js'></script>
<script type='text/javascript' src='js/expiring_messages.js'></script>
<script type='text/javascript' src='js/chromium.js'></script>
<script type='text/javascript' src='js/registration.js'></script>
<script type='text/javascript' src='js/expire.js'></script>
<script type='text/javascript' src='js/conversation_controller.js'></script>
<script type='text/javascript' src='js/emoji_util.js'></script>
<script type='text/javascript' src='js/i18n.js'></script>
<script type='text/javascript' src='js/views/whisper_view.js'></script>
<script type='text/javascript' src='js/views/last_seen_indicator_view.js'></script>
<script type='text/javascript' src='js/views/scroll_down_button_view.js'></script>
<script type='text/javascript' src='js/views/debug_log_view.js'></script>
<script type='text/javascript' src='js/views/toast_view.js'></script>
<script type='text/javascript' src='js/views/attachment_preview_view.js'></script>
<script type='text/javascript' src='js/views/file_input_view.js'></script>
<script type='text/javascript' src='js/views/list_view.js'></script>
<script type='text/javascript' src='js/views/conversation_list_item_view.js'></script>
<script type='text/javascript' src='js/views/conversation_list_view.js'></script>
<script type='text/javascript' src='js/views/contact_list_view.js'></script>
<script type='text/javascript' src='js/views/new_group_update_view.js'></script>
<script type='text/javascript' src='js/views/attachment_view.js'></script>
<script type='text/javascript' src='js/views/error_view.js'></script>
<script type='text/javascript' src='js/views/timestamp_view.js'></script>
<script type='text/javascript' src='js/views/message_view.js'></script>
<script type='text/javascript' src='js/views/key_verification_view.js'></script>
<script type='text/javascript' src='js/views/message_detail_view.js'></script>
<script type='text/javascript' src='js/views/message_list_view.js'></script>
<script type='text/javascript' src='js/views/group_member_list_view.js'></script>
<script type='text/javascript' src='js/views/recorder_view.js'></script>
<script type='text/javascript' src='js/views/conversation_view.js'></script>
<script type='text/javascript' src='js/views/conversation_search_view.js'></script>
<script type='text/javascript' src='js/views/hint_view.js'></script>
<script type='text/javascript' src='js/views/inbox_view.js'></script>
<script type='text/javascript' src='js/views/network_status_view.js'></script>
<script type='text/javascript' src='js/views/confirmation_dialog_view.js'></script>
<script type='text/javascript' src='js/views/identicon_svg_view.js'></script>
<script type='text/javascript' src='js/views/settings_view.js'></script>
<script type='text/javascript' src='js/views/install_view.js'></script>
<script type='text/javascript' src='js/views/banner_view.js'></script>
<script type='text/javascript' src='js/views/identity_key_send_error_view.js'></script>
<script type="text/javascript" src="js/views/phone-input-view.js"></script>
<script type='text/javascript' src='js/views/standalone_registration_view.js'></script>
<script type='text/javascript' src='js/views/app_view.js'></script>
<script type='text/javascript' src='js/views/import_view.js'></script>
<script type='text/javascript' src='js/wall_clock_listener.js'></script>
<script type='text/javascript' src='js/rotate_signed_prekey_listener.js'></script>
<script type='text/javascript' src='js/keychange_listener.js'></script>
<script type='text/javascript' src='js/background.js'></script>
</head>
<body>
<div class='app-loading-screen'>
<div class='content'>
<img src='images/icon_128.png'>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
<div class='message'>Loading...</div>
</div>
</div>
</body>
</html>