nostr/iris-messenger
1
0
Fork 0
mirror of https://github.com/irislib/iris-messenger.git synced 2024-10-18 14:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'stateandbehavior-master'

Browse Source
This commit is contained in:
Martti Malmi 2020-04-02 14:18:23 +03:00
commit bcc9b9ce54
3 changed files with 62 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/css/style.css
View File

@ -19,6 +19,7 @@ body {
a { a {
text-decoration: none; text-decoration: none;
cursor: pointer;
} }
a:hover { a:hover {
@ -51,10 +52,6 @@ img {
max-height: 80vh; max-height: 80vh;
} }
.hidden {
display: none !important;
}
@media (max-width: 575px) { @media (max-width: 575px) {
.hidden-xs { .hidden-xs {
display: none !important; display: none !important;
@ -91,6 +88,10 @@ img {
} }
} }
.hidden {
display: none;
}
.chat { .chat {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -309,10 +310,8 @@ header #back-button {
} }
#login { #login {
display: none; padding: 15px;
flex-direction: column; display: flex;
align-items: center;
justify-content: center;
overflow-y: scroll; overflow-y: scroll;
color: white; color: white;
position: fixed; position: fixed;
@ -322,6 +321,10 @@ header #back-button {
bottom: 0; bottom: 0;
background-color: var(--login-background); background-color: var(--login-background);
z-index: 1000; z-index: 1000;
}
#login-content {
margin: auto;
text-align: center; text-align: center;
} }

46
src/index.html
View File

@ -60,13 +60,29 @@
<body> <body>
<div class="chat"> <div class="chat">
<section id="login"> <section id="login" class="hidden">
<img style="width: 86px" src="img/android-chrome-192x192.png" alt="Iris"> <div id="login-content">
<h1>Iris Messenger</h1> <div id="login-form" autocomplete="off">
<form id="login-form" autocomplete="off"> <div id="create-account">
<input autofocus autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="off" id="login-form-name" type="text" name="name" placeholder="What's your name?"> <img style="width: 86px" src="img/android-chrome-192x192.png" alt="Iris">
<p><button type="submit">Go</button></p> <h1>Iris Messenger</h1>
</form> <input autofocus autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="off" id="login-form-name" type="text" name="name" placeholder="What's your name?">
<p><button id="sign-up" type="input">Go</button></p>
<br>
<p><a id="show-existing-account-login">Already have an account?</a></p>
</div>
</div>
<div id="existing-account-login" class="hidden">
<p><a id="show-create-account">&lt; Back</a></p>
<input id="paste-privkey" placeholder="Paste a private key">
<p>
<button id="scan-privkey-btn">Scan private key QR code</button>
</p>
</p>
<video id="privkey-qr-video" width="320" height="320" style="object-fit: cover;" class="hidden"></video>
</p>
</div>
</div>
</section> </section>
<section class="sidebar hidden-xs"> <section class="sidebar hidden-xs">
@ -175,9 +191,6 @@
<p> <p>
<button class="show-logout-confirmation">Log out</button> <button class="show-logout-confirmation">Log out</button>
</p> </p>
<p>
<button class="show-switch-account">Switch account</button>
</p>
<h4>Private key</h4> <h4>Private key</h4>
<p> <p>
<b>DANGER!</b> Private key is used to <b>log in to your account</b>. Don't give or show your private key to anyone else! <b>DANGER!</b> Private key is used to <b>log in to your account</b>. Don't give or show your private key to anyone else!
@ -189,7 +202,8 @@
<p> <p>
<button id="show-private-key-qr">Show private key QR code</button> <button id="show-private-key-qr">Show private key QR code</button>
</p> </p>
<h4>Peers</h4> <hr/>
<h3>Peers</h3>
<div id="peers" class="flex-table"> <div id="peers" class="flex-table">
<div class="flex-row" id="add-peer-row"> <div class="flex-row" id="add-peer-row">
<div class="flex-cell"> <div class="flex-cell">
@ -255,16 +269,6 @@
</p> </p>
</div> </div>
<!-- Login view -->
<div class="main-view" id="switch-account">
<input id="paste-privkey" placeholder="Paste a private key">
<p>
<button id="startButton" onclick="startPrivKeyQRScanner()">Scan private key QR code</button>
</p>
</p>
<video id="privkey-qr-video" width="320" height="320" style="object-fit: cover;"></video>
</p>
</div>
<!-- Profile view --> <!-- Profile view -->
<div class="main-view" id="profile"> <div class="main-view" id="profile">

33
src/js/app.js
View File

@ -128,10 +128,9 @@ async function addPeer(peer) {
} }
function newUserLogin() { function newUserLogin() {
$('#login').css('display', 'flex'); $('#login').show();
$('#login-form-name').focus(); $('#login-form-name').focus();
$('#login-form').submit(e => { $('#sign-up').click(function() {
e.preventDefault();
var name = $('#login-form-name').val(); var name = $('#login-form-name').val();
if (name.length) { if (name.length) {
$('#login').hide(); $('#login').hide();
@ -148,6 +147,7 @@ function login(k) {
chats = {}; chats = {};
key = k; key = k;
localStorage.setItem('chatKeyPair', JSON.stringify(k)); localStorage.setItem('chatKeyPair', JSON.stringify(k));
$('#login').hide();
iris.Chat.initUser(gun, key); iris.Chat.initUser(gun, key);
$('#my-chat-links').empty(); $('#my-chat-links').empty();
iris.Chat.getMyChatLinks(gun, key, undefined, chatLink => { iris.Chat.getMyChatLinks(gun, key, undefined, chatLink => {
@ -420,6 +420,17 @@ function getUserChatLink(pub) {
return 'https://iris.to/?chatWith=' + pub; return 'https://iris.to/?chatWith=' + pub;
} }
var scanPrivKeyBtn = $('#scan-privkey-btn');
scanPrivKeyBtn.click(() => {
if ($('#privkey-qr-video:visible').length) {
$('#privkey-qr-video').hide();
cleanupScanner();
} else {
$('#privkey-qr-video').show();
startPrivKeyQRScanner();
}
});
$('#scan-chatlink-qr-btn').click(() => { $('#scan-chatlink-qr-btn').click(() => {
if ($('#chatlink-qr-video:visible').length) { if ($('#chatlink-qr-video:visible').length) {
$('#chatlink-qr-video').hide(); $('#chatlink-qr-video').hide();
@ -503,14 +514,22 @@ function showLogoutConfirmation() {
$('#logout-confirmation').show(); $('#logout-confirmation').show();
} }
$('.show-switch-account').click(showSwitchAccount); $('#show-existing-account-login').click(showSwitchAccount);
function showSwitchAccount() { function showSwitchAccount() {
resetView(); resetView();
$('#header-content').text('Switch account'); $('#create-account').hide();
$('#switch-account').show(); $('#existing-account-login').show();
} }
$('#switch-account input').on('input', (event) => { $('#show-create-account').click(showCreateAccount);
function showCreateAccount() {
$('#privkey-qr-video').hide();
$('#create-account').show();
$('#existing-account-login').hide();
cleanupScanner();
}
$('#existing-account-login input').on('input', (event) => {
var val = $(event.target).val(); var val = $(event.target).val();
if (!val.length) { return; } if (!val.length) { return; }
try { try {