Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reconnect overhaul #792

Merged
merged 13 commits into from May 9, 2019

Add "device unreachable" dialog and improve welcome page

The texts of the welcome page have been updated and are being mostly
reused for the "device unreachable" dialog.

Further changes:

- Removed fixed height requirement for the welcome page.
- Removed dead code in welcome page CSS
  • Loading branch information...
lgrahl committed Apr 30, 2019
commit 16ca4cd482fb175fd83e06aefee6524701cd8272
@@ -8,6 +8,7 @@
"PLEASE_SCAN": "Scannen Sie den QR-Code mit Ihrer Threema-App",
"PLEASE_UNLOCK": "Verbindung wiederaufbauen",
"WAITING": "Auf Verbindung warten",
"RETRY": "Erneut versuchen",
"PLEASE_RELOAD": "Bitte laden Sie die Seite neu.",
"RELOAD": "Seite neu laden",
"PASSWORD": "Passwort",
@@ -59,6 +60,8 @@
"APP_STARTED": "Ist die Threema-App gestartet?",
"SESSION_DELETED": "Wurde diese Sitzung in der Threema-App gelöscht?",
"PHONE_ONLINE": "Ist Ihr Mobilgerät mit dem Internet verbunden?",
"UNLOCK_OR_CHARGE": "Es kann helfen, Ihr Mobilgerät zu entsperren oder an ein Ladegerät anzuschliessen.",
"PUSH_FAQ": "Möglicherweise liegt ein Problem bei der Verarbeitung von Push-Benachrichtigungen vor. Die FAQ-Artikel für <a target=\"_blank\" href=\"https://threema.ch/faq/push_andr\">Android</a> und <a target=\"_blank\" href=\"https://threema.ch/faq/push_ios\">iOS</a> helfen bei der Fehlersuche.",
"WEBCLIENT_ENABLED": "Ist Threema Web in der Threema-App aktiviert?",
"PLUGIN": "Ist in Ihrem Browser ein Plugin zum Blockieren von WebRTC installiert?",
"ADBLOCKER": "Ist in Ihrem Browser ein Ad-Blocker installiert?",
@@ -290,6 +293,10 @@
"PLAY_SOUND": "Ton abspielen"
}
},
"deviceUnreachable": {
"DEVICE_UNREACHABLE": "Mobilgerät nicht erreichbar",
"UNABLE_TO_CONNECT": "Eine Verbindung mit Ihrem Mobilgerät konnte nicht hergestellt werden …"
},
"version": {
"NEW_VERSION": "Neue Version Verfügbar",
"NEW_VERSION_BODY": "Eine neue Version von Threema Web ({version}) ist verfügbar. Mehr Informationen finden Sie im {changelog}. Drücken Sie \"OK\", um das Update zu aktivieren."
@@ -8,6 +8,7 @@
"PLEASE_SCAN": "Scan this QR code with your Threema app",
"PLEASE_UNLOCK": "Reconnecting session",
"WAITING": "Waiting for connection",
"RETRY": "Retry",
"PLEASE_RELOAD": "Please reload the page to try again.",
"RELOAD": "Reload page",
"PASSWORD": "Password",
@@ -59,6 +60,8 @@
"APP_STARTED": "Is the Threema app started?",
"SESSION_DELETED": "Did you delete this session on your phone?",
"PHONE_ONLINE": "Is your phone connected to the internet?",
"UNLOCK_OR_CHARGE": "It may help to unlock your device or connect it to a charger.",
"PUSH_FAQ": "Your device may be affected by Push Notification issues. See the FAQ articles for <a target=\"_blank\" href=\"https://threema.ch/faq/push_andr\">Android</a> and <a target=\"_blank\" href=\"https://threema.ch/faq/push_ios\">iOS</a> for troubleshooting.",
This conversation was marked as resolved by lgrahl

This comment has been minimized.

Copy link
@dbrgn

dbrgn May 6, 2019

Contributor

It might be good to extract the URLs into variables, so that translators cannot (accidentally or maliciously) replace or break them.

This comment has been minimized.

Copy link
@lgrahl

lgrahl May 6, 2019

Author Contributor

Agree but I went with what is consistent. Filed #795.

"WEBCLIENT_ENABLED": "Is Threema Web enabled in the Threema app?",
"PLUGIN": "Is a privacy plugin installed in your browser which blocks WebRTC communication?",
"ADBLOCKER": "Do you use an ad blocker which also blocks WebRTC communication?",
@@ -290,6 +293,10 @@
"PLAY_SOUND": "Play sound"
}
},
"deviceUnreachable": {
"DEVICE_UNREACHABLE": "Device Unreachable",
"UNABLE_TO_CONNECT": "Unable to connect to your device …"
},
"version": {
"NEW_VERSION": "New Version Available",
"NEW_VERSION_BODY": "A new version of Threema Web ({version}) is available. Check out the {changelog} for more information. Click \"OK\" to activate the update."
@@ -0,0 +1,43 @@
<md-dialog aria-label="Device Unreachable">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2 translate>deviceUnreachable.DEVICE_UNREACHABLE</h2>
</div>
</md-toolbar>
<md-dialog-content>
<div class="md-dialog-content">
<h3 translate>deviceUnreachable.UNABLE_TO_CONNECT</h3>
<ul class="material-icons-list">
<li class="help">
<span translate>troubleshooting.PHONE_ONLINE</span>
</li>
<li class="help">
<span translate>troubleshooting.APP_STARTED</span>
</li>
<li class="help">
<span translate>troubleshooting.WEBCLIENT_ENABLED</span>
</li>
<li class="info">
<span translate>troubleshooting.UNLOCK_OR_CHARGE</span>
</li>
<li class="info">
<span translate>troubleshooting.PUSH_FAQ</span>
</li>
</ul>
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
<span flex></span>
<md-button role="button" class="md-primary reload-btn" ng-click="ctrl.reload()" aria-labelledby="aria-label-reload">
<span translate id="aria-label-reload">welcome.RELOAD</span>
</md-button>
<md-button role="button" class="md-primary reload-btn circular-progress-button" ng-click="ctrl.retry()" ng-disabled="ctrl.retrying" aria-labelledby="aria-label-retry">
<md-progress-circular ng-if="ctrl.retrying" md-mode="determinate" md-diameter="20" value="{{ctrl.progress}}"></md-progress-circular>
<i ng-if="!ctrl.retrying" class="material-icons">refresh</i>
<span translate id="aria-label-retry">welcome.RETRY</span>
</md-button>
</md-dialog-actions>
</form>
</md-dialog>

@@ -24,7 +24,7 @@ import {
} from '@uirouter/angularjs';

import {ContactControllerModel} from '../controller_model/contact';
import {bufferToUrl, filter, hasValue, logAdapter, supportsPassive, throttle, u8aToHex} from '../helpers';
import {bufferToUrl, hasValue, logAdapter, supportsPassive, throttle, u8aToHex} from '../helpers';
import {emojify} from '../helpers/emoji';
import {ContactService} from '../services/contact';
import {ControllerService} from '../services/controller';
@@ -61,7 +61,7 @@ class DialogController {
this.done();
}

protected hide(data: any): void {
protected hide(data?: any): void {
this.$mdDialog.hide(data);
this.done();
}
@@ -127,11 +127,60 @@ class SendFileController extends DialogController {
}
}

/**
* Handle device unreachable
*/
export class DeviceUnreachableController extends DialogController {
public static readonly $inject = ['$rootScope', '$window', '$mdDialog', 'CONFIG', 'WebClientService'];
private readonly $rootScope: any;
private readonly $window: ng.IWindowService;
private readonly webClientService: WebClientService;
public retrying: boolean = false;
public progress: number = 0;

constructor(
$rootScope: any, $window: ng.IWindowService, $mdDialog: ng.material.IDialogService,
CONFIG: threema.Config, webClientService: WebClientService,
) {
super($mdDialog, CONFIG);
this.$rootScope = $rootScope;
this.$window = $window;
this.webClientService = webClientService;
}

/**
* Retry wakeup of the device via a push session.
*/
public async retry(): Promise<any> {
This conversation was marked as resolved by lgrahl

This comment has been minimized.

Copy link
@dbrgn

dbrgn May 6, 2019

Contributor

I think this can be changed to Promise<void>.

// Schedule sending a push
const [expectedPeriodMaxMs, pushSessionPromise] = this.webClientService.sendPush();

// Initialise progress circle
this.retrying = true;
this.progress = 0;
const interval = setInterval(() => this.$rootScope.$apply(() => ++this.progress), expectedPeriodMaxMs / 100);

// Wait for push to succeed/reject and reset the progress circle
try {
await pushSessionPromise;
} finally {
clearInterval(interval);
this.$rootScope.$apply(() => this.retrying = false);
}
}

/**
* Reload the page.
*/
public reload(): void {
this.$window.location.reload();
}
}

/**
* Handle settings
*/
class SettingsController {

public static $inject = ['$mdDialog', '$window', 'SettingsService', 'NotificationService'];

public $mdDialog: ng.material.IDialogService;
@@ -190,7 +239,6 @@ class SettingsController {
public setWantsSound(notificationSound: boolean) {
this.notificationService.setWantsSound(notificationSound);
}

}

interface ConversationStateParams extends UiStateParams {
@@ -66,29 +66,29 @@ <h2 class="instructions" translate>welcome.CONNECTING</h2>
<p ng-if="ctrl.state === 'loading' || ctrl.state === 'done'" translate>welcome.LOADING_INITIAL_DATA</p>
<div class="troubleshoot" ng-if="ctrl.slowConnect">
<h3 translate>troubleshooting.SLOW_CONNECT</h3>
<ul>
<li>
<i class="material-icons md-dark md-14">help</i>
<ul class="material-icons-list">
<li class="help">
<span translate>troubleshooting.PHONE_ONLINE</span>
</li>
<li ng-if="ctrl.state === 'push'">
<i class="material-icons md-dark md-14">help</i>
<li ng-if="ctrl.state === 'push'" class="help">
<span translate>troubleshooting.APP_STARTED</span>
</li>
<li ng-if="ctrl.state === 'push'">
<i class="material-icons md-dark md-14">help</i>
<li ng-if="ctrl.state === 'push'" class="help">
<span translate>troubleshooting.WEBCLIENT_ENABLED</span>
</li>
<li ng-if="ctrl.state === 'push'">
<i class="material-icons md-dark md-14">help</i>
<li ng-if="ctrl.state === 'push'" class="help">
<span translate>troubleshooting.SESSION_DELETED</span>
</li>
<li ng-if="ctrl.state === 'peer_handshake' && ctrl.showWebrtcTroubleshooting">
<i class="material-icons md-dark md-14">help</i>
<li ng-if="ctrl.state === 'push'" class="info">
<span translate>troubleshooting.UNLOCK_OR_CHARGE</span>
</li>
<li ng-if="ctrl.state === 'push'" class="info">
<span translate>troubleshooting.PUSH_FAQ</span>
</li>
<li ng-if="ctrl.state === 'peer_handshake' && ctrl.showWebrtcTroubleshooting" class="help">
<span translate>troubleshooting.PLUGIN</span>
</li>
<li ng-if="ctrl.state === 'peer_handshake' && ctrl.showWebrtcTroubleshooting">
<i class="material-icons md-dark md-14">help</i>
<li ng-if="ctrl.state === 'peer_handshake' && ctrl.showWebrtcTroubleshooting" class="help">
<span translate>troubleshooting.ADBLOCKER</span>
</li>
</ul>
@@ -250,7 +250,32 @@
opacity: 1;
}
}
}

ul.material-icons-list {
list-style-type: none;

li {
$list-style-width: 1.3em;
margin-left: $list-style-width;
text-indent: -$list-style-width;

&::before {
font-family: 'Material Icons';
}

&.help {
&::before {
content: 'help';
}
}

&.info {
&::before {
content: 'info';
}
}
}
}

.md-dialog-content {
@@ -259,6 +284,13 @@
}
}

.circular-progress-button {
md-progress-circular {
float: left;
margin: 8px 4px;
}
}

input.threema-id {
text-transform: uppercase;
}
@@ -112,24 +112,20 @@
}

.loading {
$progress-height: 250px;
$progress-overlap: 70px;
margin-top: 48px;

md-progress-circular {
margin: 0 auto;
margin: 0 auto calc(-#{$progress-height} + #{$progress-overlap});
height: $progress-height;

svg path {
stroke-width: 12px !important;
}
}

.info {
display: flex;
position: relative;
top: -250px;
flex-direction: column;
justify-content: center;
height: 250px;

.percentage {
margin-bottom: 8px;
vertical-align: center;
@@ -140,25 +136,21 @@
}

.troubleshoot {
$troubleshoot-height: 190px;
position: absolute;
bottom: -$troubleshoot-height - 32px;
width: 100%;
height: $troubleshoot-height;
margin-top: calc(#{$progress-overlap} + 40px);

h3 {
margin-bottom: 8px;
height: 44px;
}

ul {
text-align: left;
font-size: .9em;
list-style-type: none;
}

li {
padding-bottom: .3em;
line-height: 1.2em;
li {
padding: 0 1em .3em;
line-height: 1.2em;
}
}

.forget {
@@ -172,19 +164,4 @@
}
}
}

.notification {
flex-direction: horizontal;
margin-bottom: 16px;
background-color: #ff9800;
padding: 8px;

p {
width: 100%;
text-align: center;
line-height: 1.4em;
font-size: .8em;
font-weight: bold;
}
}
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.