Move left pane entirely to React
This commit is contained in:
Scott Nonnenberg
parent
bf904ddd12
commit
b3ac1373fa
142 changed files with 5016 additions and 3428 deletions
|
|
@ -1,4 +1,4 @@
|
|||
/* global chai, Whisper */
|
||||
/* global chai, Whisper, _, Backbone */
|
||||
|
||||
mocha.setup('bdd');
|
||||
window.assert = chai.assert;
|
||||
|
|
@ -74,8 +74,13 @@ function deleteIndexedDB() {
|
|||
before(async () => {
|
||||
await deleteIndexedDB();
|
||||
await window.Signal.Data.removeAll();
|
||||
await window.storage.fetch();
|
||||
});
|
||||
|
||||
window.clearDatabase = async () => {
|
||||
await window.Signal.Data.removeAll();
|
||||
await window.storage.fetch();
|
||||
};
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
window.Whisper.events = _.clone(Backbone.Events);
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
/* global Whisper */
|
||||
|
||||
'use strict';
|
||||
|
||||
describe('ConversationController', () => {
|
||||
it('sorts conversations based on timestamp then by intl-friendly title', () => {
|
||||
const collection = window.getInboxCollection();
|
||||
collection.reset([]);
|
||||
|
||||
collection.add(
|
||||
new Whisper.Conversation({
|
||||
name: 'No timestamp',
|
||||
})
|
||||
);
|
||||
collection.add(
|
||||
new Whisper.Conversation({
|
||||
name: 'B',
|
||||
timestamp: 20,
|
||||
})
|
||||
);
|
||||
collection.add(
|
||||
new Whisper.Conversation({
|
||||
name: 'C',
|
||||
timestamp: 20,
|
||||
})
|
||||
);
|
||||
collection.add(
|
||||
new Whisper.Conversation({
|
||||
name: 'Á',
|
||||
timestamp: 20,
|
||||
})
|
||||
);
|
||||
collection.add(
|
||||
new Whisper.Conversation({
|
||||
name: 'First!',
|
||||
timestamp: 30,
|
||||
})
|
||||
);
|
||||
|
||||
assert.strictEqual(collection.at('0').get('name'), 'First!');
|
||||
assert.strictEqual(collection.at('1').get('name'), 'Á');
|
||||
assert.strictEqual(collection.at('2').get('name'), 'B');
|
||||
assert.strictEqual(collection.at('3').get('name'), 'C');
|
||||
assert.strictEqual(collection.at('4').get('name'), 'No timestamp');
|
||||
|
||||
collection.reset([]);
|
||||
});
|
||||
});
|
||||
433
test/index.html
433
test/index.html
|
|
@ -16,19 +16,22 @@
|
|||
<div id="render-dark-theme" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='app-loading-screen'>
|
||||
<div class='content'>
|
||||
<img src='/images/icon_128.png'>
|
||||
<img src='images/icon_250.png' height='150'>
|
||||
<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'>
|
||||
<img src='images/icon_128.png'>
|
||||
<div class='container'>
|
||||
<span class='dot'></span>
|
||||
<span class='dot'></span>
|
||||
|
|
@ -36,52 +39,47 @@
|
|||
</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'>
|
||||
<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 scrollable inbox'></div>
|
||||
<div class='conversations scrollable search-results hide'>
|
||||
<div class='new-contact contact hide'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='network-status-container'></div>
|
||||
<div class='left-pane-placeholder'></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 class='container'>
|
||||
<div class='content'>
|
||||
<img src='images/icon_128.png' />
|
||||
<h3>{{ welcomeToSignal }}</h3>
|
||||
<p>{{ selectAContact }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='lightbox-container'></div>
|
||||
</script>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
|
||||
<button class='text {{ cssClass }}' alt='{{ moreBelow }}'>
|
||||
<div class='icon'></div>
|
||||
<button class='text module-scroll-down__button {{ buttonClass }}' alt='{{ moreBelow }}'>
|
||||
<div class='module-scroll-down__icon'></div>
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
|
||||
<div class='bar'>
|
||||
<div class='text'>
|
||||
{{ unreadMessages }}
|
||||
</div>
|
||||
<div class='module-last-seen-indicator__bar'/>
|
||||
<div class='module-last-seen-indicator__text'>
|
||||
{{ unreadMessages }}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='expired_alert'>
|
||||
<a target='_blank' href='https://signal.org/download/'>
|
||||
<button class='upgrade'>{{ upgrade }}</button>
|
||||
</a>
|
||||
{{ expiredWarning }}
|
||||
</script>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='banner'>
|
||||
<div class='body'>
|
||||
<span class='icon warning'></span>
|
||||
|
|
@ -89,12 +87,11 @@
|
|||
<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'>
|
||||
<div class='conversation-header'></div>
|
||||
<div class='main panel'>
|
||||
|
|
@ -105,28 +102,41 @@
|
|||
</div>
|
||||
|
||||
<div class='bottom-bar' id='footer'>
|
||||
<form class='send clearfix'>
|
||||
<div class='attachment-previews'></div>
|
||||
<div class='emoji-panel-container'></div>
|
||||
<div class='attachment-list'></div>
|
||||
<div class='compose'>
|
||||
<form class='send clearfix file-input'>
|
||||
<div class='flex'>
|
||||
<div class='choose-file'>
|
||||
<button class='paperclip thumbnail'></button>
|
||||
<input type='file' class='file-input'>
|
||||
</div>
|
||||
<button class='emoji'></button>
|
||||
<textarea class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto'></textarea>
|
||||
<div class='capture-audio'>
|
||||
<!--<button class='microphone'></button>-->
|
||||
<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' multiple='multiple'>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='message-list'>
|
||||
<div class='messages'></div>
|
||||
<div class='typing-container'></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='confirmation-dialog'>
|
||||
<div class="content">
|
||||
<div class='message'>{{ message }}</div>
|
||||
|
|
@ -138,21 +148,7 @@
|
|||
</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='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 }}' />
|
||||
|
|
@ -161,49 +157,7 @@
|
|||
</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 }} </h3>
|
||||
<div class='number'>{{ #isVerified }}<span class='verified-icon'></span> {{ verified }} ·{{ /isVerified }} {{ number }}</div>
|
||||
</script>
|
||||
<script type='text/x-tmpl-mustache' id='contact'>
|
||||
{{> avatar }}
|
||||
<div class='contact-details'> {{> 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'></p>
|
||||
{{ /last_message }}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='phone-number'>
|
||||
<div class='phone-input-form'>
|
||||
<div class='number-container'>
|
||||
|
|
@ -211,18 +165,22 @@
|
|||
</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='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 }}
|
||||
|
|
@ -253,55 +211,42 @@
|
|||
</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'>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='clear-data'>
|
||||
{{#isStep1}}
|
||||
<div class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<span class='banner-icon alert-outline-red'></span>
|
||||
<div class='header'>{{ header }}</div>
|
||||
<div class='body-text-wide'>{{ body }}</div>
|
||||
</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 class='nav'>
|
||||
<div>
|
||||
<a class='button neutral cancel'>{{ cancelButton }}</a>
|
||||
<a class='button destructive delete-all-data'>{{ deleteButton }}</a>
|
||||
</div>
|
||||
</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>
|
||||
{{/isStep1}}
|
||||
{{#isStep2}}
|
||||
<div id='step3' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<span class='banner-icon delete'></span>
|
||||
<div class='header'>{{ deleting }}</div>
|
||||
</div>
|
||||
<div class='progress'>
|
||||
<div class='bar-container'>
|
||||
<div class='bar progress-bar progress-bar-striped active'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/isStep2}}
|
||||
</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='link_to_support'>
|
||||
<a href='http://support.signal.org/hc/articles/213134107' target='_blank'>
|
||||
{{ learnMore }}
|
||||
</a>
|
||||
</script>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='networkStatus'>
|
||||
<div class='network-status-message'>
|
||||
<h3>{{ message }}</h3>
|
||||
|
|
@ -318,11 +263,202 @@
|
|||
</div>
|
||||
{{/action }}
|
||||
</script>
|
||||
<script type='text/x-tmpl-mustache' id='file-view'>
|
||||
<div class='icon'></div>
|
||||
<div class='text'>
|
||||
<div class='fileName' alt='{{ fileName }}' title='{{ altText }}'>{{ fileName }}</div>
|
||||
<div class='fileSize'>{{ fileSize }}</div>
|
||||
|
||||
<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'>
|
||||
{{ errorMessageFirst }}
|
||||
<p>{{ errorMessageSecond }}</p>
|
||||
</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}}
|
||||
<form id='link-phone'>
|
||||
<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>
|
||||
</form>
|
||||
{{/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>
|
||||
|
||||
|
|
@ -356,13 +492,9 @@
|
|||
<script type='text/javascript' src='../js/views/whisper_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/debug_log_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/toast_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/attachment_preview_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/file_input_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/list_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/conversation_list_item_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/conversation_list_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/contact_list_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/attachment_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/timestamp_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/message_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/key_verification_view.js' data-cover></script>
|
||||
|
|
@ -370,7 +502,6 @@
|
|||
<script type='text/javascript' src='../js/views/group_member_list_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/recorder_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/conversation_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/conversation_search_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/hint_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/inbox_view.js' data-cover></script>
|
||||
<script type='text/javascript' src='../js/views/network_status_view.js'></script>
|
||||
|
|
@ -384,11 +515,9 @@
|
|||
<script type="text/javascript" src="metadata/SecretSessionCipher_test.js"></script>
|
||||
|
||||
<script type="text/javascript" src="views/whisper_view_test.js"></script>
|
||||
<script type="text/javascript" src="views/attachment_view_test.js"></script>
|
||||
<script type="text/javascript" src="views/timestamp_view_test.js"></script>
|
||||
<script type="text/javascript" src="views/list_view_test.js"></script>
|
||||
<script type="text/javascript" src="views/inbox_view_test.js"></script>
|
||||
<script type="text/javascript" src="views/conversation_search_view_test.js"></script>
|
||||
<script type="text/javascript" src="views/network_status_view_test.js"></script>
|
||||
<script type="text/javascript" src="views/last_seen_indicator_view_test.js"></script>
|
||||
<script type='text/javascript' src='views/scroll_down_button_view_test.js'></script>
|
||||
|
|
|
|||
|
|
@ -163,51 +163,3 @@ describe('Conversation', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Conversation search', () => {
|
||||
let convo;
|
||||
|
||||
beforeEach(async () => {
|
||||
convo = new Whisper.ConversationCollection().add({
|
||||
id: '+14155555555',
|
||||
type: 'private',
|
||||
name: 'John Doe',
|
||||
});
|
||||
await window.Signal.Data.saveConversation(convo.attributes, {
|
||||
Conversation: Whisper.Conversation,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(clearDatabase);
|
||||
|
||||
async function testSearch(queries) {
|
||||
await Promise.all(
|
||||
queries.map(async query => {
|
||||
const collection = new Whisper.ConversationCollection();
|
||||
await collection.search(query);
|
||||
|
||||
assert.isDefined(collection.get(convo.id), `no result for "${query}"`);
|
||||
})
|
||||
);
|
||||
}
|
||||
it('matches by partial phone number', () => {
|
||||
return testSearch([
|
||||
'1',
|
||||
'4',
|
||||
'+1',
|
||||
'415',
|
||||
'4155',
|
||||
'4155555555',
|
||||
'14155555555',
|
||||
'+14155555555',
|
||||
]);
|
||||
});
|
||||
it('matches by name', () => {
|
||||
return testSearch(['John', 'Doe', 'john', 'doe', 'John Doe', 'john doe']);
|
||||
});
|
||||
it('does not match +', async () => {
|
||||
const collection = new Whisper.ConversationCollection();
|
||||
await collection.search('+');
|
||||
assert.isUndefined(collection.get(convo.id), 'got result for "+"');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,13 +12,11 @@ describe('Attachment', () => {
|
|||
it('should sanitize left-to-right order override character', async () => {
|
||||
const input = {
|
||||
contentType: 'image/jpeg',
|
||||
data: null,
|
||||
fileName: 'test\u202Dfig.exe',
|
||||
size: 1111,
|
||||
};
|
||||
const expected = {
|
||||
contentType: 'image/jpeg',
|
||||
data: null,
|
||||
fileName: 'test\uFFFDfig.exe',
|
||||
size: 1111,
|
||||
};
|
||||
|
|
@ -30,13 +28,11 @@ describe('Attachment', () => {
|
|||
it('should sanitize right-to-left order override character', async () => {
|
||||
const input = {
|
||||
contentType: 'image/jpeg',
|
||||
data: null,
|
||||
fileName: 'test\u202Efig.exe',
|
||||
size: 1111,
|
||||
};
|
||||
const expected = {
|
||||
contentType: 'image/jpeg',
|
||||
data: null,
|
||||
fileName: 'test\uFFFDfig.exe',
|
||||
size: 1111,
|
||||
};
|
||||
|
|
@ -48,13 +44,11 @@ describe('Attachment', () => {
|
|||
it('should sanitize multiple override characters', async () => {
|
||||
const input = {
|
||||
contentType: 'image/jpeg',
|
||||
data: null,
|
||||
fileName: 'test\u202e\u202dlol\u202efig.exe',
|
||||
size: 1111,
|
||||
};
|
||||
const expected = {
|
||||
contentType: 'image/jpeg',
|
||||
data: null,
|
||||
fileName: 'test\uFFFD\uFFFDlol\uFFFDfig.exe',
|
||||
size: 1111,
|
||||
};
|
||||
|
|
@ -72,7 +66,6 @@ describe('Attachment', () => {
|
|||
fileName => {
|
||||
const input = {
|
||||
contentType: 'image/jpeg',
|
||||
data: null,
|
||||
fileName,
|
||||
size: 1111,
|
||||
};
|
||||
|
|
@ -131,7 +124,6 @@ describe('Attachment', () => {
|
|||
it('should remove existing schema version', () => {
|
||||
const input = {
|
||||
contentType: 'image/jpeg',
|
||||
data: null,
|
||||
fileName: 'foo.jpg',
|
||||
size: 1111,
|
||||
schemaVersion: 1,
|
||||
|
|
@ -139,7 +131,6 @@ describe('Attachment', () => {
|
|||
|
||||
const expected = {
|
||||
contentType: 'image/jpeg',
|
||||
data: null,
|
||||
fileName: 'foo.jpg',
|
||||
size: 1111,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
/* global assert, storage, Whisper */
|
||||
|
||||
'use strict';
|
||||
|
||||
describe('AttachmentView', () => {
|
||||
let convo;
|
||||
|
||||
before(async () => {
|
||||
await clearDatabase();
|
||||
|
||||
convo = new Whisper.Conversation({ id: 'foo' });
|
||||
convo.messageCollection.add({
|
||||
conversationId: convo.id,
|
||||
body: 'hello world',
|
||||
type: 'outgoing',
|
||||
source: '+14158675309',
|
||||
received_at: Date.now(),
|
||||
});
|
||||
|
||||
await storage.put('number_id', '+18088888888.1');
|
||||
});
|
||||
|
||||
describe('with arbitrary files', () => {
|
||||
it('should render a file view', () => {
|
||||
const attachment = {
|
||||
contentType: 'unused',
|
||||
size: 1232,
|
||||
};
|
||||
const view = new Whisper.AttachmentView({ model: attachment }).render();
|
||||
assert.match(view.el.innerHTML, /fileView/);
|
||||
});
|
||||
it('should display the filename if present', () => {
|
||||
const attachment = {
|
||||
fileName: 'foo.txt',
|
||||
contentType: 'unused',
|
||||
size: 1232,
|
||||
};
|
||||
const view = new Whisper.AttachmentView({ model: attachment }).render();
|
||||
assert.match(view.el.innerHTML, /foo.txt/);
|
||||
});
|
||||
it('should render a file size', () => {
|
||||
const attachment = {
|
||||
size: 1232,
|
||||
contentType: 'unused',
|
||||
};
|
||||
const view = new Whisper.AttachmentView({ model: attachment }).render();
|
||||
assert.match(view.el.innerHTML, /1.2 KB/);
|
||||
});
|
||||
});
|
||||
it('should render an image for images', () => {
|
||||
const now = new Date().getTime();
|
||||
const attachment = { contentType: 'image/png', data: 'grumpy cat' };
|
||||
const view = new Whisper.AttachmentView({
|
||||
model: attachment,
|
||||
timestamp: now,
|
||||
}).render();
|
||||
assert.equal(view.el.firstChild.tagName, 'IMG');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
/* global $, Whisper */
|
||||
|
||||
describe('ConversationSearchView', () => {
|
||||
it('should match partial numbers', () => {
|
||||
const $el = $('<div><div class="new-contact contact hide"></div></div>');
|
||||
const view = new Whisper.ConversationSearchView({
|
||||
el: $el,
|
||||
input: $('<input>'),
|
||||
}).render();
|
||||
const maybeNumbers = [
|
||||
'+1 415',
|
||||
'+1415',
|
||||
'+1415',
|
||||
'415',
|
||||
'(415)',
|
||||
' (415',
|
||||
'(415) 123 4567',
|
||||
'+1 (415) 123 4567',
|
||||
' +1 (415) 123 4567',
|
||||
'1 (415) 123 4567',
|
||||
'1 415-123-4567',
|
||||
'415-123-4567',
|
||||
];
|
||||
maybeNumbers.forEach(n => {
|
||||
assert.ok(view.maybeNumber(n), n);
|
||||
});
|
||||
});
|
||||
describe('Searching for left groups', () => {
|
||||
let convo;
|
||||
|
||||
before(() => {
|
||||
convo = new Whisper.ConversationCollection().add({
|
||||
id: '1-search-view',
|
||||
name: 'i left this group',
|
||||
members: [],
|
||||
type: 'group',
|
||||
left: true,
|
||||
});
|
||||
|
||||
return window.Signal.Data.saveConversation(convo.attributes, {
|
||||
Conversation: Whisper.Conversation,
|
||||
});
|
||||
});
|
||||
describe('with no messages', () => {
|
||||
let input;
|
||||
let view;
|
||||
|
||||
before(done => {
|
||||
input = $('<input>');
|
||||
view = new Whisper.ConversationSearchView({ input }).render();
|
||||
view.$input.val('left');
|
||||
view.filterContacts();
|
||||
view.typeahead_view.collection.on('reset', () => {
|
||||
done();
|
||||
});
|
||||
});
|
||||
it('should not surface left groups with no messages', () => {
|
||||
assert.isUndefined(
|
||||
view.typeahead_view.collection.get(convo.id),
|
||||
'got left group'
|
||||
);
|
||||
});
|
||||
});
|
||||
describe('with messages', () => {
|
||||
let input;
|
||||
let view;
|
||||
before(async () => {
|
||||
input = $('<input>');
|
||||
view = new Whisper.ConversationSearchView({ input }).render();
|
||||
convo.set({ id: '2-search-view', left: false });
|
||||
|
||||
await window.Signal.Data.saveConversation(convo.attributes, {
|
||||
Conversation: Whisper.Conversation,
|
||||
});
|
||||
|
||||
view.$input.val('left');
|
||||
view.filterContacts();
|
||||
|
||||
return new Promise(resolve => {
|
||||
view.typeahead_view.collection.on('reset', resolve);
|
||||
});
|
||||
});
|
||||
it('should surface left groups with messages', () => {
|
||||
assert.isDefined(
|
||||
view.typeahead_view.collection.get(convo.id),
|
||||
'got left group'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -7,6 +7,11 @@ describe('InboxView', () => {
|
|||
before(async () => {
|
||||
ConversationController.reset();
|
||||
await ConversationController.load();
|
||||
await textsecure.storage.user.setNumberAndDeviceId(
|
||||
'18005554444',
|
||||
1,
|
||||
'Home Office'
|
||||
);
|
||||
await ConversationController.getOrCreateAndWait(
|
||||
textsecure.storage.user.getNumber(),
|
||||
'private'
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
/* global Whisper */
|
||||
|
||||
describe('Threads', () => {
|
||||
it('should be ordered newest to oldest', () => {
|
||||
// Timestamps
|
||||
const today = new Date();
|
||||
const tomorrow = new Date();
|
||||
tomorrow.setDate(today.getDate() + 1);
|
||||
|
||||
// Add threads
|
||||
Whisper.Threads.add({ timestamp: today });
|
||||
Whisper.Threads.add({ timestamp: tomorrow });
|
||||
|
||||
const { models } = Whisper.Threads;
|
||||
const firstTimestamp = models[0].get('timestamp').getTime();
|
||||
const secondTimestamp = models[1].get('timestamp').getTime();
|
||||
|
||||
// Compare timestamps
|
||||
assert(firstTimestamp > secondTimestamp);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
/* global moment, Whisper */
|
||||
|
||||
'use strict';
|
||||
|
||||
describe('TimestampView', () => {
|
||||
it('formats long-ago timestamps correctly', () => {
|
||||
const timestamp = Date.now();
|
||||
const briefView = new Whisper.TimestampView({ brief: true }).render();
|
||||
const extendedView = new Whisper.ExtendedTimestampView().render();
|
||||
|
||||
// Helper functions to check absolute and relative timestamps
|
||||
|
||||
// Helper to check an absolute TS for an exact match
|
||||
const check = (view, ts, expected) => {
|
||||
const result = view.getRelativeTimeSpanString(ts);
|
||||
assert.strictEqual(result, expected);
|
||||
};
|
||||
|
||||
// Helper to check relative times for an exact match against both views
|
||||
const checkDiff = (secAgo, expectedBrief, expectedExtended) => {
|
||||
check(briefView, timestamp - secAgo * 1000, expectedBrief);
|
||||
check(extendedView, timestamp - secAgo * 1000, expectedExtended);
|
||||
};
|
||||
|
||||
// Helper to check an absolute TS for an exact match against both views
|
||||
const checkAbs = (ts, expectedBrief, expectedExtended) => {
|
||||
if (!expectedExtended) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
expectedExtended = expectedBrief;
|
||||
}
|
||||
check(briefView, ts, expectedBrief);
|
||||
check(extendedView, ts, expectedExtended);
|
||||
};
|
||||
|
||||
// Helper to check an absolute TS for a match at the beginning against
|
||||
const checkStartsWith = (view, ts, expected) => {
|
||||
const result = view.getRelativeTimeSpanString(ts);
|
||||
const regexp = new RegExp(`^${expected}`);
|
||||
assert.match(result, regexp);
|
||||
};
|
||||
|
||||
// check integer timestamp, JS Date object and moment object
|
||||
checkAbs(timestamp, 'now', 'now');
|
||||
checkAbs(new Date(), 'now', 'now');
|
||||
checkAbs(moment(), 'now', 'now');
|
||||
|
||||
// check recent timestamps
|
||||
checkDiff(30, 'now', 'now'); // 30 seconds
|
||||
checkDiff(40 * 60, '40 minutes', '40 minutes ago');
|
||||
checkDiff(60 * 60, '1 hour', '1 hour ago');
|
||||
checkDiff(125 * 60, '2 hours', '2 hours ago');
|
||||
|
||||
// set to third of month to avoid problems on the 29th/30th/31st
|
||||
const lastMonth = moment()
|
||||
.subtract(1, 'month')
|
||||
.date(3);
|
||||
const months = [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
];
|
||||
check(briefView, lastMonth, `${months[lastMonth.month()]} 3`);
|
||||
checkStartsWith(extendedView, lastMonth, `${months[lastMonth.month()]} 3`);
|
||||
|
||||
// subtract 26 hours to be safe in case of DST stuff
|
||||
const yesterday = new Date(timestamp - 26 * 60 * 60 * 1000);
|
||||
const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
check(briefView, yesterday, daysOfWeek[yesterday.getDay()]);
|
||||
checkStartsWith(extendedView, yesterday, daysOfWeek[yesterday.getDay()]);
|
||||
|
||||
// Check something long ago
|
||||
// months are zero-indexed in JS for some reason
|
||||
check(briefView, new Date(2012, 4, 5, 17, 30, 0), 'May 5, 2012');
|
||||
checkStartsWith(
|
||||
extendedView,
|
||||
new Date(2012, 4, 5, 17, 30, 0),
|
||||
'May 5, 2012'
|
||||
);
|
||||
});
|
||||
|
||||
describe('updates within a minute reasonable intervals', () => {
|
||||
let view;
|
||||
beforeEach(() => {
|
||||
view = new Whisper.TimestampView();
|
||||
});
|
||||
afterEach(() => {
|
||||
clearTimeout(view.timeout);
|
||||
});
|
||||
|
||||
it('updates timestamps this minute within a minute', () => {
|
||||
const now = Date.now();
|
||||
view.$el.attr('data-timestamp', now - 1000);
|
||||
view.update();
|
||||
assert.isAbove(view.delay, 0); // non zero
|
||||
assert.isBelow(view.delay, 60 * 1000); // < minute
|
||||
});
|
||||
|
||||
it('updates timestamps from this hour within a minute', () => {
|
||||
const now = Date.now();
|
||||
view.$el.attr('data-timestamp', now - 1000 - 1000 * 60 * 5); // 5 minutes and 1 sec ago
|
||||
view.update();
|
||||
assert.isAbove(view.delay, 0); // non zero
|
||||
assert.isBelow(view.delay, 60 * 1000); // minute
|
||||
});
|
||||
|
||||
it('updates timestamps from today within an hour', () => {
|
||||
const now = Date.now();
|
||||
view.$el.attr('data-timestamp', now - 1000 - 1000 * 60 * 60 * 5); // 5 hours and 1 sec ago
|
||||
view.update();
|
||||
assert.isAbove(view.delay, 60 * 1000); // minute
|
||||
assert.isBelow(view.delay, 60 * 60 * 1000); // hour
|
||||
});
|
||||
|
||||
it('updates timestamps from this week within a day', () => {
|
||||
const now = Date.now();
|
||||
view.$el.attr('data-timestamp', now - 1000 - 6 * 24 * 60 * 60 * 1000); // 6 days and 1 sec ago
|
||||
view.update();
|
||||
assert.isAbove(view.delay, 60 * 60 * 1000); // hour
|
||||
assert.isBelow(view.delay, 36 * 60 * 60 * 1000); // day and a half
|
||||
});
|
||||
|
||||
it('does not updates very old timestamps', () => {
|
||||
const now = Date.now();
|
||||
// return falsey value for long ago dates that don't update
|
||||
view.$el.attr('data-timestamp', now - 8 * 24 * 60 * 60 * 1000);
|
||||
view.update();
|
||||
assert.notOk(view.delay);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue