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

some changes to existing account login

Browse Source
This commit is contained in:
Martti Malmi 2020-04-02 14:14:31 +03:00
parent cf4deaedfb
commit ca1d5beee3
3 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/css/style.css
View File

@ -52,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;
@ -92,6 +88,10 @@ img {
} }
} }
.hidden {
display: none;
}
.chat { .chat {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -163,10 +163,6 @@ header #back-button {
min-width: 0; min-width: 0;
} }
.start-hidden {
display: none;
}
.msg { .msg {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -314,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;
@ -327,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;
} }

23
src/index.html
View File

@ -60,27 +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"> <div id="login-form" autocomplete="off">
<div id="create-account"> <div id="create-account">
<img style="width: 86px" src="img/android-chrome-192x192.png" alt="Iris">
<h1>Iris Messenger</h1>
<input autofocus autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="off" id="login-form-name" type="text" name="name" placeholder="What's your name?"> <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">Sign Up</button></p> <p><button id="sign-up" type="input">Go</button></p>
<br> <br>
<p>Already have an account? <a id="show-switch-account">Log in here!</a></p> <p><a id="show-existing-account-login">Already have an account?</a></p>
</div> </div>
</div> </div>
<div id="switch-account" class="start-hidden"> <div id="existing-account-login" class="hidden">
<p>Don't have an account? <a id="show-create-account">Create account!</a></p> <p><a id="show-create-account">&lt; Back</a></p>
<input id="paste-privkey" placeholder="Paste a private key"> <input id="paste-privkey" placeholder="Paste a private key">
<p> <p>
<button id="startButton" onclick="startPrivKeyQRScanner()">Scan private key QR code</button> <button id="scan-privkey-btn">Scan private key QR code</button>
</p> </p>
</p> </p>
<video id="privkey-qr-video" width="320" height="320" style="object-fit: cover;"></video> <video id="privkey-qr-video" width="320" height="320" style="object-fit: cover;" class="hidden"></video>
</p> </p>
</div> </div>
</div>
</section> </section>
<section class="sidebar hidden-xs"> <section class="sidebar hidden-xs">
@ -200,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">

28
src/js/app.js
View File

@ -128,7 +128,7 @@ async function addPeer(peer) {
} }
function newUserLogin() { function newUserLogin() {
$('#login').css('display', 'flex'); $('#login').show();
$('#login-form-name').focus(); $('#login-form-name').focus();
$('#sign-up').click(function() { $('#sign-up').click(function() {
var name = $('#login-form-name').val(); var name = $('#login-form-name').val();
@ -147,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 => {
@ -381,7 +382,6 @@ function resetView() {
$("#header-content").empty(); $("#header-content").empty();
$("#header-content").css({cursor: null}); $("#header-content").css({cursor: null});
$('#profile-page-qr').empty(); $('#profile-page-qr').empty();
$('#switch-account').show();
} }
function showMenu(show = true) { function showMenu(show = true) {
@ -419,6 +419,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();
@ -484,20 +495,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();
$('#create-account').hide(); $('#create-account').hide();
$('.start-hidden').show(); $('#existing-account-login').show();
} }
$('#show-create-account').click(showCreateAccount); $('#show-create-account').click(showCreateAccount);
function showCreateAccount() { function showCreateAccount() {
$('#privkey-qr-video').hide();
$('#create-account').show(); $('#create-account').show();
$('#switch-account').hide(); $('#existing-account-login').hide();
cleanupScanner();
} }
$('#switch-account input').on('input', (event) => { $('#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 {
@ -506,9 +519,6 @@ $('#switch-account input').on('input', (event) => {
$(event.target).val(''); $(event.target).val('');
} catch (e) { } catch (e) {
console.error('Login with key', val, 'failed:', e); console.error('Login with key', val, 'failed:', e);
$('#login').show();
} finally {
$('#login').hide();
} }
}); });