Add sign-in buttons to main menu and sidebar

This commit is contained in:
styppo 2022-12-31 03:39:14 +00:00
parent cb06ac099c
commit 84c772d443
No known key found for this signature in database
GPG Key ID: 3AAA685C50724C28
12 changed files with 142 additions and 22 deletions

View File

@ -36,8 +36,9 @@ export default defineComponent({
}) })
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.load-more button { .load-more button {
width: 100%; width: 100%;
padding: 1rem 0;
} }
</style> </style>

View File

@ -45,6 +45,10 @@
</div> </div>
<ProfilePopup v-if="$store.getters.isSignedIn" /> <ProfilePopup v-if="$store.getters.isSignedIn" />
<div v-else class="sign-in" @click="signIn">
<q-icon class="icon" name="login" size="sm" />
<div class="label">Log in</div>
</div>
<div <div
class="mobile-close-menu-button" class="mobile-close-menu-button"
@ -89,6 +93,10 @@ export default {
createPost() { createPost() {
this.$emit('mobile-menu-close') this.$emit('mobile-menu-close')
this.$store.dispatch('createPost') this.$store.dispatch('createPost')
},
signIn() {
this.$emit('mobile-menu-close')
this.$store.dispatch('signIn', {}).catch(() => {})
} }
} }
} }
@ -149,6 +157,26 @@ menu {
.mobile-close-menu-button { .mobile-close-menu-button {
display: none; display: none;
} }
.sign-in {
display: flex;
align-items: center;
margin: 0 1rem 1rem;
padding: 1rem;
cursor: pointer;
border-radius: 999px;
transition: 120ms ease-in-out;
&:hover {
background-color: rgba($color: $color-dark-gray, $alpha: 0.3);
}
.icon {
padding: 2px;
}
.label {
margin-left: 20px;
font-weight: bold;
font-size: 1.2em;
}
}
} }
@media screen and (max-width: $tablet) and (min-width: $phone) { @media screen and (max-width: $tablet) and (min-width: $phone) {
@ -167,6 +195,11 @@ menu {
fill: #fff; fill: #fff;
} }
} }
.sign-in {
.label {
display: none;
}
}
} }
} }

View File

@ -34,7 +34,7 @@
</div> </div>
<hr class="popup-spacing"> <hr class="popup-spacing">
<div class="popup-body"> <div class="popup-body">
<div class="popup-body-item" @click="$store.dispatch('signIn').catch(() => {})" v-close-popup> <div class="popup-body-item" @click="$store.dispatch('signIn', {}).catch(() => {})" v-close-popup>
<p>Add an account</p> <p>Add an account</p>
</div> </div>
<hr class="popup-spacing"> <hr class="popup-spacing">
@ -96,15 +96,15 @@ export default {
margin-bottom: 1rem; margin-bottom: 1rem;
margin-right: 1rem; margin-right: 1rem;
padding: .5rem 1rem; padding: .5rem 1rem;
cursor: pointer !important; cursor: pointer;
border-radius: 999px; border-radius: 999px;
transition: 120ms ease-in-out; transition: 120ms ease-in-out;
&:hover {
background-color: rgba($color: $color-dark-gray, $alpha: 0.3);
}
&-wrapper { &-wrapper {
position: relative; position: relative;
} }
&:hover {
background-color: rgba($color: $color-primary, $alpha: 0.3);
}
&-pic { &-pic {
padding: 2px; padding: 2px;
img { img {

View File

@ -63,7 +63,7 @@ export default defineComponent({
position: sticky; position: sticky;
top: 0; top: 0;
background-color: $color-bg; background-color: $color-bg;
z-index: 1001; z-index: 500;
h2 { h2 {
line-height: 50px; line-height: 50px;
margin: 0; margin: 0;

View File

@ -0,0 +1,55 @@
<template>
<div class="welcome" v-if="!$store.getters.isSignedIn">
<div class="welcome-header">
<h3>New to Nostr?</h3>
</div>
<div class="welcome-content">
<button class="btn btn-primary" @click="signUp">Create Account</button>
<button class="btn" @click="signIn">Log in</button>
</div>
</div>
</template>
<script>
export default {
name: 'WelcomeBox',
methods: {
signUp() {
this.$store.dispatch('signIn', {fragment: 'sign-up'}).catch(() => {})
},
signIn() {
this.$store.dispatch('signIn', {fragment: 'sign-in'}).catch(() => {})
},
}
}
</script>
<style lang="scss" scoped>
@import "assets/theme/colors.scss";
.welcome {
background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
border-radius: 1rem;
margin-bottom: 1rem;
&-header {
padding: 1rem;
h3 {
margin: 0;
font-size: 1.4rem;
color: #fff;
}
}
&-content {
border-top: $border-dark;
padding: 1rem;
button {
width: 100%;
padding: .5rem;
&:first-child {
margin-bottom: 1rem;
}
}
}
}
</style>

View File

@ -1,8 +1,24 @@
<template> <template>
<q-dialog v-model="$store.state.signInDialogOpen" @hide="onClose"> <q-dialog v-model="$store.state.signInDialogOpen" @before-show="updateFragment" @hide="onClose">
<div class="sign-in-dialog"> <div class="sign-in-dialog">
<q-btn v-if="fragment === 'welcome'" icon="close" size="md" flat round class="icon" v-close-popup /> <q-btn
<q-btn v-else-if="fragment !== 'complete'" icon="arrow_back" size="md" flat round class="icon" @click="fragment = 'welcome'" /> v-if="showClose"
icon="close"
size="md"
class="icon"
flat
round
v-close-popup
/>
<q-btn
v-if="showBack"
@click="fragment = 'welcome'"
icon="arrow_back"
size="md"
class="icon"
flat
round
/>
<div class="logo"> <div class="logo">
<BaseUserAvatar v-if="pubkey" :pubkey="pubkey" /> <BaseUserAvatar v-if="pubkey" :pubkey="pubkey" />
@ -57,6 +73,16 @@ export default {
return { return {
fragment: 'welcome', fragment: 'welcome',
pubkey: null, pubkey: null,
backAllowed: true,
}
},
computed: {
showClose() {
return this.fragment === 'welcome'
|| (this.fragment !== 'complete' && !this.backAllowed)
},
showBack() {
return this.fragment !== 'complete' && !this.showClose
} }
}, },
methods: { methods: {
@ -81,6 +107,10 @@ export default {
this.pubkey = pubkey this.pubkey = pubkey
this.fragment = 'complete' this.fragment = 'complete'
}, },
updateFragment() {
this.fragment = this.$store.state.signInDialogFragment || 'welcome'
this.backAllowed = this.fragment === 'welcome'
}
}, },
} }
</script> </script>

View File

@ -47,7 +47,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import 'assets/theme/colors.scss'; @import "assets/theme/colors.scss";
.trends { .trends {
background-color: rgba($color: $color-dark-gray, $alpha: 0.1); background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
@ -58,7 +58,7 @@ export default {
padding: 1rem; padding: 1rem;
h3 { h3 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.4rem;
color: #fff; color: #fff;
} }
} }

View File

@ -3,7 +3,7 @@
<div class="layout" @click="mobileMenuOpen = false"> <div class="layout" @click="mobileMenuOpen = false">
<div class="layout-menu"> <div class="layout-menu">
<div class="layout-menu-fixed" :class="{active: mobileMenuOpen}"> <div class="layout-menu-fixed" :class="{active: mobileMenuOpen}">
<MainMenu @click.stop @mobile-menu-close="mobileMenuOpen = false" /> <MainMenu @click.stop @mobile-menu-close="mobileMenuOpen = false" hide-items-requiring-sign-in />
</div> </div>
</div> </div>
@ -20,6 +20,7 @@
<div class="layout-sidebar"> <div class="layout-sidebar">
<div class="layout-sidebar-fixed"> <div class="layout-sidebar-fixed">
<SearchBox /> <SearchBox />
<WelcomeBox />
<Trends /> <Trends />
</div> </div>
</div> </div>
@ -48,11 +49,13 @@ import Trends from 'components/Trends/index.vue'
import BaseIcon from 'components/BaseIcon/index.vue' import BaseIcon from 'components/BaseIcon/index.vue'
import SignInDialog from 'components/SignIn/SignInDialog.vue' import SignInDialog from 'components/SignIn/SignInDialog.vue'
import CreatePostDialog from 'components/CreatePost/CreatePostDialog.vue' import CreatePostDialog from 'components/CreatePost/CreatePostDialog.vue'
import WelcomeBox from 'components/Sidebar/WelcomeBox.vue'
import { setCssVar, getCssVar } from 'quasar' import { setCssVar, getCssVar } from 'quasar'
export default defineComponent({ export default defineComponent({
name: 'MainLayout', name: 'MainLayout',
components: { components: {
WelcomeBox,
CreatePostDialog, CreatePostDialog,
SignInDialog, SignInDialog,
BaseIcon, BaseIcon,

View File

@ -268,7 +268,7 @@ export default defineComponent({
position: sticky; position: sticky;
top: 78px; top: 78px;
background-color: $color-bg; background-color: $color-bg;
z-index: 1001; z-index: 500;
} }
.q-page::-webkit-scrollbar { .q-page::-webkit-scrollbar {
@ -280,11 +280,6 @@ export default defineComponent({
} }
.feed { .feed {
> .load-more {
button {
padding: 1rem 0;
}
}
> .load-more:first-child { > .load-more:first-child {
border-bottom: $border-dark; border-bottom: $border-dark;
} }

View File

@ -444,10 +444,10 @@ export async function useNip05(store, {metadata}) {
// -------- // --------
export async function signIn(store) { export async function signIn(store, {fragment}) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
console.assert(!store.state.signInDialogOpen) console.assert(!store.state.signInDialogOpen)
store.commit('openSignInDialog', {resolve, reject}) store.commit('openSignInDialog', {resolve, reject, fragment})
}) })
} }

View File

@ -173,15 +173,17 @@ export function setUnreadMessages(state, {peer, count}) {
state.unreadMessages[peer] = count state.unreadMessages[peer] = count
} }
export function openSignInDialog(state, {resolve, reject}) { export function openSignInDialog(state, {resolve, reject, fragment}) {
state.signInSuccess = resolve state.signInSuccess = resolve
state.signInFailure = reject state.signInFailure = reject
state.signInDialogFragment = fragment
state.signInDialogOpen = true state.signInDialogOpen = true
} }
export function dismissSignInDialog(state) { export function dismissSignInDialog(state) {
state.signInSuccess = null state.signInSuccess = null
state.signInFailure = null state.signInFailure = null
state.signInDialogFragment = null
state.signInDialogOpen = false state.signInDialogOpen = false
} }

View File

@ -102,6 +102,7 @@ export default function () {
accounts: LocalStorage.getItem('accounts') || {}, // { pubkey: { secret } } accounts: LocalStorage.getItem('accounts') || {}, // { pubkey: { secret } }
signInDialogOpen: false, signInDialogOpen: false,
signInDialogFragment: null,
signInSuccess: null, signInSuccess: null,
signInFailure: null, signInFailure: null,