diff --git a/background.html b/background.html
index 90b0679a8..78d3d7870 100644
--- a/background.html
+++ b/background.html
@@ -666,93 +666,6 @@
{{/isError}}
-
@@ -812,7 +725,6 @@
-
diff --git a/js/views/session_registration_view.js b/js/views/session_registration_view.js
index bc2b71de0..e3b312e06 100644
--- a/js/views/session_registration_view.js
+++ b/js/views/session_registration_view.js
@@ -137,4 +137,83 @@
toast.render();
},
});
+
+ class TextScramble {
+ constructor(el) {
+ this.el = el;
+ this.chars = '0123456789qwertyuiopasdfghjklzxcvbnm';
+ this.update = this.update.bind(this);
+ }
+
+ setText(newText) {
+ const oldText = this.el.innerText;
+ const length = Math.max(oldText.length, newText.length);
+ // eslint-disable-next-line no-return-assign
+ const promise = new Promise(resolve => (this.resolve = resolve));
+ this.queue = [];
+
+ for (let i = 0; i < length; i++) {
+ const from = oldText[i] || '';
+ const to = newText[i] || '';
+ const start = Math.floor(Math.random() * 40);
+ const end = start + Math.floor(Math.random() * 40);
+ this.queue.push({
+ from,
+ to,
+ start,
+ end,
+ });
+ }
+
+ cancelAnimationFrame(this.frameRequest);
+ this.frame = 0;
+ this.update();
+ return promise;
+ }
+
+ update() {
+ let output = '';
+ let complete = 0;
+
+ for (let i = 0, n = this.queue.length; i < n; i++) {
+ const { from, to, start, end } = this.queue[i];
+ let { char } = this.queue[i];
+
+ if (this.frame >= end) {
+ complete++;
+ output += to;
+ } else if (this.frame >= start) {
+ if (!char || Math.random() < 0.28) {
+ char = this.randomChar();
+ this.queue[i].char = char;
+ }
+
+ output += `${char}`;
+ } else {
+ output += from;
+ }
+ }
+
+ this.el.innerHTML = output;
+
+ if (complete === this.queue.length) {
+ this.resolve();
+ } else {
+ this.frameRequest = requestAnimationFrame(this.update);
+ this.frame++;
+ }
+ }
+
+ randomChar() {
+ return this.chars[Math.floor(Math.random() * this.chars.length)];
+ }
+
+ }
+ window.Session = window.Session || {};
+
+ window.Session.setNewSessionID = (sessionID) => {
+ const el = document.querySelector('.session-signin-enter-session-id');
+ const fx = new TextScramble(el);
+ fx.setText(sessionID);
+ };
})();
diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx
index c488830fd..92feee040 100644
--- a/ts/components/session/RegistrationTabs.tsx
+++ b/ts/components/session/RegistrationTabs.tsx
@@ -289,6 +289,8 @@ export class RegistrationTabs extends React.Component {
private async onSignUpGenerateSessionIDClick() {
this.setState({
signUpMode: SignUpMode.SessionIDShown,
+ }, () => {
+ window.Session.setNewSessionID(this.state.hexGeneratedPubKey);
});
}
diff --git a/ts/global.d.ts b/ts/global.d.ts
index 5e1bd7950..c81885049 100644
--- a/ts/global.d.ts
+++ b/ts/global.d.ts
@@ -10,6 +10,7 @@ interface Window {
ConversationController: any;
setPassword: any;
textsecure: any;
+ Session: any;
}
interface Promise {