RanchiMall/messenger
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.24.70

Browse Source 
Feat (user): add onboarding sequence
This commit is contained in:
sairaj mote 2021-02-04 00:35:31 +05:30
parent 974f70400f
commit d071a5efbe
4 changed files with 333 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
css/main.css
View File

@ -205,6 +205,7 @@ a:any-link {
}
.warning {
display: flex;
background: wheat;
color: #111;
}
@ -401,6 +402,9 @@ sm-button.danger {
font-size: 1.1rem;
color: rgba(var(--text-color), 0.8);
}
#landing .left .flex sm-button:first-of-type {
margin-right: 1rem;
}
#landing_page {
background: rgba(var(--foreground-color), 1);
@ -415,95 +419,76 @@ sm-button.danger {
width: 100%;
}
#sign_in_popup::part(popup-body) {
padding: 0;
}
.sign-in-box {
width: 100%;
margin: 0 -2rem;
z-index: 1;
justify-self: center;
#sign_in {
padding: 1.5rem;
border-radius: 0.5rem;
background: rgba(var(--foreground-color), 1);
}
.sign-in-box sm-input {
margin-top: 1.5rem;
}
.sign-in-box sm-panel {
width: 100%;
height: 100%;
align-items: flex-start;
}
.sign-in-box sm-tab-header {
margin: 0;
background: none;
align-self: flex-start;
}
.sign-in-box sm-tab-header::part(tab-header) {
padding-bottom: 0.4rem;
gap: 1.5rem;
}
.sign-in-box sm-tab::part(tab) {
padding: 0.4rem 0;
}
.sign-in-box sm-tab-panels {
margin-top: 1.5rem;
}
.sign-in-box form {
#sign_in .flex {
width: 100%;
flex: 1;
}
.sign-in-box h2 {
margin-bottom: 0.5rem;
#sign_in sm-input {
margin: 1.5rem 0;
}
.sign-in-box h3 {
#sign_in h2 {
margin-top: 2rem;
font-weight: 500;
}
.sign-in-box h4 {
#sign_in h4 {
font-weight: 500;
margin-bottom: 1.5rem;
}
.sign-in-box h5 {
#sign_in h5 {
opacity: 0.8;
font-weight: 500;
}
.sign-in-box strong {
display: flex;
background: #ffd92e;
padding: 0.4em 0.6em;
border-radius: 0.4em;
color: #111;
margin-top: 0.5rem;
}
.sign-in-box .copy-row h4 {
max-width: 34ch;
}
.sign-in-box .copy-row:not(:last-of-type) {
margin-bottom: 1rem;
}
.sign-in-box button {
margin-top: 2rem;
padding: 0.6rem 1.6rem;
}
.sign-in-box sm-button {
#sign_in sm-button {
width: 100%;
}
.sign-in-box sm-button::part(button) {
#sign_in sm-button::part(button) {
padding: 0.8rem 1.6rem;
}
.sign-in-box p {
#sign_in p {
margin-bottom: 0.5rem;
max-width: 35ch;
margin-top: 0.5rem;
}
.sign-in-box #credentials_section {
border-top: 1px rgba(var(--text-color), 0.2) solid;
margin-top: 1rem;
padding-top: 1.5rem;
animation: slide-down 0.3s forwards;
.frame {
height: 100vh;
display: flex;
flex-direction: column;
width: min(24rem, 100%);
justify-self: center;
padding: 1.5rem;
}
.sign-in-box #sign_in_with, .sign-in-box sm-button {
margin-top: 2rem;
margin-bottom: 0;
.frame .h2 {
margin-bottom: 1rem;
font-weight: 500;
}
.frame sm-button[variant=primary] {
margin-top: 1.5rem;
}
#frame_1 .warning {
margin: 1rem 0;
padding: 1rem;
border-radius: 0.5rem;
}
#frame_1 #generate_flo_id {
width: 100%;
}
#frame_1 #credentials_section {
animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
margin: 2rem 0;
}
#frame_1 h4, #frame_1 h5 {
font-weight: 500;
}
#frame_1 .copy-row:not(:last-of-type) {
margin-bottom: 1.5rem;
}
@keyframes slide-down {
@ -515,7 +500,7 @@ sm-button.danger {
}
}
#loading_page {
height: 100vh;
height: 100%;
display: grid;
place-content: center;
justify-items: center;
@ -1156,6 +1141,14 @@ sm-button.danger {
margin-right: 0.5rem;
}
#chat_page,
#mail_page,
#settings_page {
align-items: flex-start;
width: 100%;
height: 100%;
}
#chat_page {
overflow: hidden;
}
@ -1712,14 +1705,19 @@ sm-panel {
width: 100% !important;
}
#sign_in {
max-height: 90vh;
}
#landing_illustration {
grid-area: illustration;
}
.frame .h2,
#sign_in .h2 {
margin-top: 3rem;
}
.frame sm-button[variant=primary],
#sign_in sm-button[variant=primary] {
margin-top: auto;
}
#main_navbar {
transform: translateX(-110%);
transition: transform 0.3s;
@ -1803,6 +1801,18 @@ sm-panel {
color: var(--accent-color);
}
#sign_in_page {
place-content: center;
}
#sign_in {
width: 24rem;
}
.frame {
justify-content: center;
}
#main_navbar {
position: relative;
width: auto;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

146
css/main.scss
View File

@ -171,6 +171,7 @@ a:any-link{
font-weight: normal;
}
.warning{
display: flex;
background: wheat;
color: #111;
}
@ -350,6 +351,11 @@ sm-button.danger{
font-size: 1.1rem;
color: rgba(var(--text-color), 0.8);
}
.flex{
sm-button:first-of-type{
margin-right: 1rem;
}
}
}
}
#landing_page{
@ -362,47 +368,20 @@ sm-button.danger{
position: relative;
width: 100%;
}
#sign_in_popup{
&::part(popup-body){
padding: 0;
}
}
.sign-in-box{
width: 100%;
margin: 0 -2rem;
z-index: 1;
justify-self: center;
#sign_in{
padding: 1.5rem;
border-radius: 0.5rem;
background: rgba(var(--foreground-color), 1);
width: 100%;
height: 100%;
align-items: flex-start;
.flex{
width: 100%;
flex: 1;
}
sm-input{
margin-top: 1.5rem;
}
sm-panel{
width: 100%;
}
sm-tab-header{
margin: 0;
background: none;
align-self: flex-start;
&::part(tab-header){
padding-bottom: 0.4rem;
gap: 1.5rem;
}
}
sm-tab::part(tab){
padding: 0.4rem 0;
}
sm-tab-panels{
margin-top: 1.5rem;
}
form{
width: 100%;
margin: 1.5rem 0;
}
h2{
margin-bottom: 0.5rem;
}
h3{
margin-top: 2rem;
font-weight: 500;
}
h4 {
@ -413,26 +392,6 @@ sm-button.danger{
opacity: 0.8;
font-weight: 500;
}
strong{
display: flex;
background: #ffd92e;
padding: 0.4em 0.6em;
border-radius: 0.4em;
color: #111;
margin-top: 0.5rem;
}
.copy-row{
h4{
max-width: 34ch;
}
}
.copy-row:not(:last-of-type){
margin-bottom: 1rem;
}
button {
margin-top: 2rem;
padding: 0.6rem 1.6rem;
}
sm-button{
width: 100%;
&::part(button){
@ -444,15 +403,42 @@ sm-button.danger{
max-width: 35ch;
margin-top: 0.5rem;
}
#credentials_section{
border-top: 1px rgba(var(--text-color), 0.2) solid;
margin-top: 1rem;
padding-top: 1.5rem;
animation: slide-down 0.3s forwards;
}
#on_boarding_page{
}
.frame{
height: 100vh;
display: flex;
flex-direction: column;
width: min(24rem, 100%);
justify-self: center;
padding: 1.5rem;
.h2{
margin-bottom: 1rem;
font-weight: 500;
}
#sign_in_with, sm-button{
margin-top: 2rem;
margin-bottom: 0;
sm-button[variant="primary"]{
margin-top: 1.5rem;
}
}
#frame_1{
.warning{
margin: 1rem 0;
padding: 1rem;
border-radius: 0.5rem;
}
#generate_flo_id{
width: 100%;
}
#credentials_section{
animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
margin: 2rem 0;
}
h4, h5{
font-weight: 500;
}
.copy-row:not(:last-of-type){
margin-bottom: 1.5rem;
}
}
@keyframes slide-down{
@ -464,7 +450,7 @@ sm-button.danger{
}
}
#loading_page{
height: 100vh;
height: 100%;
display: grid;
place-content: center;
justify-items: center;
@ -1088,6 +1074,13 @@ sm-button.danger{
}
}
}
#chat_page,
#mail_page,
#settings_page{
align-items: flex-start;
width: 100%;
height: 100%;
}
#chat_page{
overflow: hidden;
}
@ -1625,12 +1618,18 @@ sm-panel{
width: 100% !important;
}
}
#sign_in{
max-height: 90vh;
}
#landing_illustration{
grid-area: illustration;
}
.frame,
#sign_in{
.h2{
margin-top: 3rem;
}
sm-button[variant="primary"]{
margin-top: auto;
}
}
#main_navbar{
transform: translateX(-110%);
transition: transform 0.3s;
@ -1706,6 +1705,15 @@ sm-panel{
}
}
}
#sign_in_page{
place-content: center;
}
#sign_in{
width: 24rem;
}
.frame{
justify-content: center;
}
#main_navbar{
position: relative;
width: auto;

335
index.html
View File

@ -30,7 +30,7 @@
<sm-input id="prompt_input"></sm-input>
<div class="flex align-center">
<sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
<sm-button variant="no-outline" class="submit-btn">OK</button>
<sm-button variant="no-outline" class="submit-btn" type="submit">OK</button>
</div>
</sm-popup>
<sm-notifications id="notification_drawer"></sm-notifications>
@ -41,7 +41,7 @@
<path
d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
</svg>
<h4 class="light-text">
<h4>
RanchiMall
</h4>
</header>
@ -54,68 +54,60 @@
Truly Secure, Private and Reliable.
</h1>
<p>A messenger made with <strong>Blockchain</strong> and <strong>Open Source</strong> technologies. Take back control of your data that belongs to you and you alone.</p>
<sm-button variant="primary" onclick="showPopup('sign_in_popup')">Sign In / Create account</sm-button>
<div class="flex">
<sm-button variant="primary" onclick="showPage('sign_in_page')">Sign In</sm-button>
<sm-button onclick="initOnBoarding()">Get started</sm-button>
</div>
</div>
<div id="landing_illustration" class="right">
<img src="assets/message-background.svg" alt="">
</div>
</div>
</div>
<sm-popup id="sign_in_popup">
<header class="popup-header" slot="header">
<svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
<title>close</title>
<line x1="64" y1="0" x2="0" y2="64" />
<line x1="64" y1="64" x2="0" y2="0" />
</svg>
</header>
<div id="sign_in" class="grid">
<div class="sign-in-box flex direction-column">
<sm-tab-header target="user_entry">
<sm-tab>Sign In</sm-tab>
<sm-tab>Create account</sm-tab>
</sm-tab-header>
<sm-tab-panels id="user_entry">
<sm-panel>
<h3>Welcome back</h3>
<p>Enter your <span id="type_of_key">FLO private key</span> to continue.</p>
<form action="" onsubmit="return false">
<sm-input id="private_key_input_field" class="outlined" type="password" placeholder="FLO private key" privateKey animate></sm-input>
<sm-button id="sign_in_button" width="cover" variant="primary" disable>continue</sm-button>
<sm-button id="remove_account" variant="outlined">Remove Account</sm-button>
</form>
</sm-panel>
<sm-panel>
<h3>Get started</h3>
<strong>Don't forget to store them securely. <br> Once lost private key can't be recovered along with your data!</strong>
<sm-button id="generate_flo_id" onclick="generateId()" variant="primary">Get your FLO credentials
</sm-button>
<section id="credentials_section" class="hide-completely">
<h5>FLO ID (User ID)</h5>
<div class="copy-row">
<h4 id="generated_id" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this, 'Copied FLO ID')" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
</svg>
</div>
<h5>Private key (Password)</h5>
<div class="copy-row">
<h4 id="generated_key" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard('this, Copied private key')" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41"/>
</svg>
</div>
<sm-button id="sign_in_with" variant="primary">Sign in with this private key</sm-button>
</section>
</sm-panel>
</sm-tab-panels>
</div>
<section id="sign_in_page" class="grid page hide-completely">
<div id="sign_in" class="flex direction-column">
<h2>Sign in</h2>
<p>Enter your <span id="type_of_key">FLO private key</span> to continue.</p>
<form class="flex direction-column" action="" onsubmit="return false">
<sm-input id="private_key_input_field" class="outlined" type="password" placeholder="FLO private key" privateKey animate></sm-input>
<sm-button id="sign_in_button" width="cover" variant="primary" disable>continue</sm-button>
</form>
<sm-button id="remove_account" class="hide-completely" variant="outlined" onclick="signOut()">Remove Account</sm-button>
</div>
</sm-popup>
</section>
<div id="on_boarding_page" class="page grid hide-completely">
<div id="frame_1" class="frame">
<h2 class="h2">Get started</h2>
<strong class="warning">Don't forget to store them securely. <br> Once lost private key can't be recovered along with your data!</strong>
<sm-button id="generate_flo_id" onclick="generateId()" variant="primary">Get your FLO credentials</sm-button>
<section id="credentials_section" class="hide-completely">
<h5>FLO ID (User ID)</h5>
<div class="copy-row">
<h4 id="generated_id" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this, 'Copied FLO ID')" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
</svg>
</div>
<h5>Private key (Password)</h5>
<div class="copy-row">
<h4 id="generated_key" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard('this, Copied private key')" viewBox="0 0 64 64">
<title>Copy</title>
<rect x="16" y="16" width="48" height="48" rx="6" />
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41"/>
</svg>
</div>
</section>
<sm-button id="sign_in_with" variant="primary" class="hide-completely">Next</sm-button>
</div>
<div id="frame_2" class="frame">
<h2 class="h2">Set pin</h2>
<p>*This pin is saved on this browser only, it won't work anywhere else.</p>
<sm-button variant="primary" id="set_pin_button" onclick="setPin()">Set pin</sm-button>
</div>
</div>
<div id="loading_page" class="page hide-completely">
<svg viewBox="0 0 512 512">
<defs>
@ -233,20 +225,16 @@
</div>
</section>
<ul id="contact_options">
<li id="mark_read_option" class="option" onclick="markAsRead()">
Mark as read
</li>
<li id="mark_unread_option" class="option" onclick="markAsUnread()">
Mark as unread
</li>
<li class="option" onclick="clearChat()">
<svg class="icon" viewBox="0 0 64 64">
<line x1="4" y1="6.3" x2="60" y2="6.3" />
<path d="M53.5,20.5v38.9c0,2.3-1.8,4.1-4.1,4.1h0H14.6c-2.3,0-4.1-1.8-4.1-4.1c0,0,0,0,0,0V20.5" />
<path d="M22.7,6.6V3.8c0-1.8,1.5-3.3,3.3-3.3h11.4c1.8,0,3.3,1.5,3.3,3.3v2.8" />
</svg>
Clear this chat
</li>
<li id="delete_chat_option" class="option" onclick="deleteChat()">
<svg class="icon" viewBox="0 0 64 64">
<line x1="4" y1="6.3" x2="60" y2="6.3" />
<path d="M53.5,20.5v38.9c0,2.3-1.8,4.1-4.1,4.1h0H14.6c-2.3,0-4.1-1.8-4.1-4.1c0,0,0,0,0,0V20.5" />
<path d="M22.7,6.6V3.8c0-1.8,1.5-3.3,3.3-3.3h11.4c1.8,0,3.3,1.5,3.3,3.3v2.8" />
</svg>
Delete this chat
</li>
</ul>
@ -353,7 +341,7 @@
<h5 class="label">Settings</h5>
</div>
</nav>
<section id="chat_page" class="grid page">
<section id="chat_page" class="grid">
<div id="contacts" class="grid">
<header class="grid header">
<div class="flex align-center">
@ -466,7 +454,7 @@
<div class="grid">
<svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
<sm-input id="group_name_field" class="outlined" placeholder="Group name" animate required></sm-input>
<sm-textarea id="group_description_field" placeholder="Group description"></sm-textarea>
<sm-textarea id="group_description_field" class="outlined" placeholder="Group description"></sm-textarea>
</div>
<sm-button id="create_group_button" variant="primary" class="fab round" type="submit" disable>
Create
@ -557,7 +545,7 @@
</div>
</div>
</section>
<section class="page grid hide-completely" id="mail_page">
<section class="grid hide-completely" id="mail_page">
<div id="mails" class="grid">
<header class="grid header">
<div class="flex align-center">
@ -603,7 +591,7 @@
</div>
</div>
</section>
<section id="settings_page" class="page hide-completely">
<section id="settings_page" class="hide-completely">
<aside id="settings_sidebar">
<header class="grid header">
<div class="flex align-center">
@ -641,14 +629,6 @@
</svg>
</div>
</section>
<section>
<h4>Set Password</h4>
<p>
This will require entering password everytime you refresh the window or directly close this tab.<br>
<strong>This password will only be stored on this device locally, so this password won't work on other devices.</strong>
</p>
<sm-button id="secure_key">Set Password</sm-button>
</section>
<section>
<h4>Clear data</h4>
<p><strong></strong>This can't be undone.</strong> Make sure you have stored the PRIVATE KEY and backed up the data.</p>
@ -657,7 +637,7 @@
<section>
<h4>Sign out</h4>
<p>*Remember to store your <strong>PRIVATE KEY </strong> before signing out.</p>
<sm-button id="sign_out">Sign Out</sm-button>
<sm-button id="sign_out" onclick="signOut()">Sign Out</sm-button>
</section>
</div>
<div id="personalise_panel" class="panel hide-completely">
@ -822,6 +802,15 @@
switch (e.detail.popup.id) {
case 'contact_details_popup':
const markUnread = floGlobals.marked[clickedContact.floID]?.includes('unread')
if(markUnread){
getRef('mark_read_option').classList.remove('hide-completely')
getRef('mark_unread_option').classList.add('hide-completely')
}
else{
getRef('mark_read_option').classList.add('hide-completely')
getRef('mark_unread_option').classList.remove('hide-completely')
}
if(clickedContact.chatCard.closest('#chat_container')){
getRef('contact_options').classList.remove('hide-completely')
}
@ -885,11 +874,13 @@
window.addEventListener('popstate', e => {
if(!e.state) return
console.log(e.state)
if(e.state.type === 'popup'){
hidePopup()
}
else if(e.state.type === 'page'){
showPage(e.state.id)
switch (e.state.type){
case 'popup':
hidePopup()
break;
case 'page':
showPage(e.state.id)
break;
}
})
@ -1113,7 +1104,7 @@
if (e.target.closest('sm-input')) {
if (e.key === 'Enter') {
let parent = e.target.closest('sm-popup') || e.target.closest('form')
parent.querySelector("button[type='submit'], sm-button[variant='primary']")
parent.querySelector("button[type='submit'], sm-button[variant='primary'], sm-button[type='submit']")
.click();
}
}
@ -1157,6 +1148,7 @@
function generateId() {
getRef('generate_flo_id').classList.add('hide-completely')
getRef('sign_in_with').classList.remove('hide-completely')
getRef('credentials_section').classList.remove('hide-completely')
let { floID, privKey } = floCrypto.generateNewID()
getRef('generated_id').textContent = floID
@ -1166,32 +1158,28 @@
const signIn = (type) => {
return new Promise((resolve, reject) => {
getRef('main').classList.add('hide-completely')
getRef('loading_page').classList.add('hide-completely')
getRef('landing_page').classList.remove('hide-completely')
showPage('landing_page')
getRef('sign_in_button').addEventListener('clicked', () => {
let key = getRef('private_key_input_field').value;
hidePopup()
getRef('landing_page').classList.add('hide-completely')
getRef('loading_page').classList.remove('hide-completely')
resolve(key)
})
getRef('sign_in_with').addEventListener('clicked', () => {
hidePopup()
getRef('landing_page').classList.add('hide-completely')
getRef('loading_page').classList.remove('hide-completely')
showFrame(2)
resolve(getRef('generated_key').textContent)
})
if (type === "PRIVATE_KEY") {
getRef('private_key_input_field').setAttribute("placeholder", "Private Key")
getRef('private_key_input_field').setAttribute("privatekey", "")
getRef("type_of_key").textContent = 'FLO private key'
getRef("remove_account").classList.add("hide-completely");
console.log('signed in')
} else if (type === "PIN/Password") {
getRef('private_key_input_field').setAttribute("placeholder", "PIN/Password")
showPopup('sign_in_popup')
getRef("remove_account").classList.remove("hide-completely");
getRef('private_key_input_field').removeAttribute("privatekey")
getRef("type_of_key").textContent = 'PIN/Password'
privKeyNotSecured = false;
getRef("remove_account").classList.remove("hide-completely");
showPage('sign_in_page')
isPinSet = true;
}
})
}
@ -1209,10 +1197,6 @@
if(location.hash === ''){
if(history.length === 2)
history.pushState({type: 'page', id: 'homepage'}, null, '')
if(isFirstLoad){
renderLatestArticles(floDapps.getNextGeneralData('articles', '0'), true)
isFirstLoad = false
}
showPage('homepage')
}
else{
@ -1253,23 +1237,26 @@
<script id="onLoadStartUp">
function onLoadStartUp() {
document.body.classList.remove('hide-completely')
privKeyNotSecured = true;
//display loading screen
getRef('loading_page').classList.remove("hide-completely")
isPinSet = false;
floDapps.setCustomPrivKeyInput(signIn)
showPage('loading_page')
//clear Rendered Elements
let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'chat_container', 'messages_container',
'receiver_name', 'mail_contact_list'
]
//, "backup_info"
//, "backup_info"
elementsToReset.forEach(e => clearElement(getRef(e)))
floDapps.setCustomPrivKeyInput(signIn)
chatMutationObserver.observe(getRef('messages_container'), {childList: true, subtree: true})
//invoke the startup functions
floDapps.launchStartUp().then(result => {
console.log(result)
if(!isPinSet){
showFrame(2)
}
getRef("greet_tag").textContent = myFloID
//load messages from IDB and render them
console.log(`Loading Data! Please Wait...`)
@ -1291,16 +1278,8 @@
messenger.requestGroupInbox()
.then(r => console.log(r))
console.log(`Load Successful!`)
//hide loading screen
getRef('loading_page').classList.add("hide-completely")
getRef('main').classList.remove('hide-completely')
getRef('chat').classList.add('hide-completely')
getRef('mail').classList.add('hide-completely')
getRef('chat_page_button').click()
if (privKeyNotSecured) {
getRef("secure_key").textContent = 'Set password'
} else {
getRef("secure_key").textContent = 'Change password'
if(isPinSet){
showPage('main')
}
}).catch(error => {
//console.error(`Failed to load data`)
@ -1586,6 +1565,7 @@
},
}
let currentDate,
currentFloID,
renderedDates = new Map(),
@ -1737,7 +1717,7 @@
}
})
getRef('search_chats').addEventListener('input', function() {
getRef('search_chats').addEventListener('input', function(e) {
if(this.value.trim !== ''){
for(child of getRef('chat_container').children) {
if(child.getAttribute('name').toLowerCase().includes(this.value.toLowerCase()) || child.getAttribute('flo-id').toLowerCase().includes(this.value.toLowerCase())){
@ -1772,20 +1752,7 @@
showPanel(target, target.dataset.target)
}
if(e.target.closest('.navbar-item') && activePage.button !== e.target.closest('.navbar-item')){
let targetButton = e.target.closest('.navbar-item'),
targetPage = getRef(targetButton.dataset.target)
targetButton.classList.add('active')
targetPage.classList.remove('hide-completely')
if(activePage.page){
activePage.page.classList.add('hide-completely')
activePage.button.classList.remove('active')
}
activePage.button = targetButton
activePage.page = targetPage;
if(getRef('main_navbar').classList.contains('no-transformations')){
getRef('main_navbar').classList.remove('no-transformations')
getRef('navbar_backdrop').classList.add('hide')
}
showPage(e.target.closest('.navbar-item').dataset.target, e.target.closest('.navbar-item'), true)
}
if(e.target.closest('#send_mail_to') || e.target.closest('#mail_contact_list')){
getRef('mail_contact_list').classList.remove('hide-completely')
@ -2343,33 +2310,6 @@
}
})
getRef("sign_out").addEventListener('click', signOut);
getRef("remove_account").addEventListener('click', signOut);
getRef("secure_key").addEventListener('click', async function (e) {
try{
if(privKeyNotSecured){
let value = await getPromptInput("Set password", 'Enter Password', false);
floDapps.securePrivKey(value).then(result => {
privKeyNotSecured = false;
notify("Private Key secured", 'success');
this.textContent = 'Change Password'
})
}
else{
let value = await getPromptInput("Change password", 'New Password', false);
floDapps.securePrivKey(value).then(result => {
notify("Password changed", 'success');
})
}
}
catch(error){
notify("Securing Failed", "error", error)
}
});
getRef("clear_data").addEventListener('click', async function (e) {
if(await confirmation('Clear Data?',
`Are you sure you want to clear stored data?`, 'No', "Clear")){
@ -2531,7 +2471,7 @@
const frag = document.createDocumentFragment()
getRef('chat_container').innerHTML = ''
for (floID of messenger.getChatOrder().mixed){
const markUnread = floGlobals.marked[floID]?.[0] === 'unread' ? true : false
const markUnread = floGlobals.marked[floID]?.includes('unread')
let type
if(floGlobals.chats[floID])
type = 'chat'
@ -3075,6 +3015,18 @@
}
}
function markAsUnread(){
clickedContact.chatCard.classList.add('unread')
messenger.addMark(clickedContact.floID, 'unread')
hidePopup()
}
function markAsRead(){
clickedContact.chatCard.classList.remove('unread')
messenger.removeMark(clickedContact.floID, 'unread')
hidePopup()
}
async function clearChat(){
if(await confirmation('Clear chat?', `Are you sure to clear this chat?`, 'No', "Yes")){
messenger.clearChat(clickedContact.floID).then(result => {
@ -3258,6 +3210,63 @@
.catch(err => console.log(err))
}
function showPage(targetPage, targetButton, subpage){
if(subpage){
targetButton.classList.add('active')
if(activePage.page){
activePage.page.classList.add('hide-completely')
activePage.button.classList.remove('active')
}
activePage.button = targetButton
activePage.page = getRef(targetPage);
if(getRef('main_navbar').classList.contains('no-transformations')){
getRef('main_navbar').classList.remove('no-transformations')
getRef('navbar_backdrop').classList.add('hide')
}
}
else{
document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
}
getRef(targetPage).classList.remove('hide-completely')
}
function initOnBoarding(){
console.log('called')
showFrame(1)
}
function showFrame(frameNo){
if(getRef('on_boarding_page').classList.contains('hide-completely')){
showPage('on_boarding_page')
}
const frames = ['frame_1', 'frame_2', 'frame_3']
document.querySelectorAll('.frame').forEach(frame => frame.classList.add('hide-completely'))
getRef(frames[frameNo - 1]).classList.remove('hide-completely')
}
async function setPin(){
try{
if(isPinSet){
let value = await getPromptInput("Change password", 'New Password', false);
floDapps.securePrivKey(value).then(result => {
notify("Password changed", 'success');
})
}
else{
let value = await getPromptInput("Set password", 'Enter Password', false);
floDapps.securePrivKey(value).then(result => {
isPinSet = true;
notify("Private Key secured", 'success');
this.textContent = 'Change Password'
showPage('main')
})
}
}
catch(error){
notify("Securing Failed", "error", error)
}
}
</script>
<script id="init_lib" version="1.0.1">
@ -12990,10 +12999,14 @@ Bitcoin.Util = {
},
addMark(key, mark) {
if(floGlobals.marked.hasOwnProperty(key) && !floGlobals.marked[key].includes(mark))
floGlobals.marked[key].push(mark)
return this.util.addMark(key, mark)
},
removeMark(key, mark) {
if(floGlobals.marked.hasOwnProperty(key))
floGlobals.marked[key] = floGlobals.marked[key].filter(v => v !== mark)
return this.util.removeMark(key, mark)
},