+
)
}
@@ -84,7 +84,15 @@ function LightningExplainer ({ text, children }) {
)
}
-export function LightningAuth ({ text, callbackUrl }) {
+export function LightningAuthWithExplainer ({ text, callbackUrl }) {
+ return (
+
+
+
+ )
+}
+
+export function LightningAuth ({ callbackUrl }) {
// query for challenge
const [createAuth, { data, error }] = useMutation(gql`
mutation createAuth {
@@ -100,9 +108,24 @@ export function LightningAuth ({ text, callbackUrl }) {
if (error) return
error
- return (
-
- {data ? : }
-
- )
+ return data ?
:
+}
+
+export function SlashtagsAuth ({ callbackUrl }) {
+ // query for challenge
+ const [createAuth, { data, error }] = useMutation(gql`
+ mutation createAuth {
+ createAuth {
+ k1
+ slashtagUrl
+ }
+ }`)
+
+ useEffect(() => {
+ createAuth()
+ }, [])
+
+ if (error) return
error
+
+ return data ?
:
}
diff --git a/components/login-button.js b/components/login-button.js
index 88a77cc4..c3e48952 100644
--- a/components/login-button.js
+++ b/components/login-button.js
@@ -1,7 +1,9 @@
import GithubIcon from '../svgs/github-fill.svg'
import TwitterIcon from '../svgs/twitter-fill.svg'
import LightningIcon from '../svgs/bolt.svg'
+import SlashtagsIcon from '../svgs/slashtags.svg'
import { Button } from 'react-bootstrap'
+
export default function LoginButton ({ text, type, className, onClick }) {
let Icon, variant
switch (type) {
@@ -17,6 +19,10 @@ export default function LoginButton ({ text, type, className, onClick }) {
Icon = LightningIcon
variant = 'primary'
break
+ case 'slashtags':
+ Icon = SlashtagsIcon
+ variant = 'grey-medium'
+ break
}
const name = type.charAt(0).toUpperCase() + type.substr(1).toLowerCase()
@@ -25,7 +31,7 @@ export default function LoginButton ({ text, type, className, onClick }) {
diff --git a/components/login.js b/components/login.js
index 24443888..7ec4ab7f 100644
--- a/components/login.js
+++ b/components/login.js
@@ -1,15 +1,12 @@
import { signIn } from 'next-auth/client'
-import Button from 'react-bootstrap/Button'
import styles from './login.module.css'
-import GithubIcon from '../svgs/github-fill.svg'
-import TwitterIcon from '../svgs/twitter-fill.svg'
-import LightningIcon from '../svgs/bolt.svg'
import { Form, Input, SubmitButton } from '../components/form'
import * as Yup from 'yup'
import { useState } from 'react'
import Alert from 'react-bootstrap/Alert'
import { useRouter } from 'next/router'
-import { LightningAuth } from './lightning-auth'
+import { LightningAuthWithExplainer, SlashtagsAuth } from './lightning-auth'
+import LoginButton from './login-button'
export const EmailSchema = Yup.object({
email: Yup.string().email('email is no good').required('required')
@@ -48,7 +45,7 @@ export default function Login ({ providers, callbackUrl, error, text, Header, Fo
Callback: 'Try signing with a different account.',
OAuthAccountNotLinked: 'To confirm your identity, sign in with the same account you used originally.',
EmailSignin: 'Check your email address.',
- CredentialsSignin: 'Lightning auth failed.',
+ CredentialsSignin: 'Auth failed',
default: 'Unable to sign in.'
}
@@ -56,7 +53,11 @@ export default function Login ({ providers, callbackUrl, error, text, Header, Fo
const router = useRouter()
if (router.query.type === 'lightning') {
- return
+ return
+ }
+
+ if (router.query.type === 'slashtags') {
+ return
}
return (
@@ -69,44 +70,41 @@ export default function Login ({ providers, callbackUrl, error, text, Header, Fo
dismissible
>{errorMessage}
}
-
{providers && Object.values(providers).map(provider => {
- if (provider.name === 'Email' || provider.name === 'Lightning') {
- return null
+ switch (provider.name) {
+ case 'Email':
+ return (
+
+ )
+ case 'Lightning':
+ case 'Slashtags':
+ return (
+
router.push({
+ pathname: router.pathname,
+ query: { ...router.query, type: provider.name.toLowerCase() }
+ })}
+ text={`${text || 'Login'} with`}
+ />
+ )
+ default:
+ return (
+ signIn(provider.id, { callbackUrl })}
+ text={`${text || 'Login'} with`}
+ />
+ )
}
- const [variant, Icon] =
- provider.name === 'Twitter'
- ? ['twitter', TwitterIcon]
- : ['dark', GithubIcon]
-
- return (
-
- )
})}
- or
-
{Footer && }
)
diff --git a/components/lnqr.js b/components/qr.js
similarity index 86%
rename from components/lnqr.js
rename to components/qr.js
index 84e17093..772f912a 100644
--- a/components/lnqr.js
+++ b/components/qr.js
@@ -4,8 +4,8 @@ import InvoiceStatus from './invoice-status'
import { requestProvider } from 'webln'
import { useEffect } from 'react'
-export default function LnQR ({ value, webLn, statusVariant, status }) {
- const qrValue = 'lightning:' + value.toUpperCase()
+export default function Qr ({ asIs, value, webLn, statusVariant, status }) {
+ const qrValue = asIs ? value : 'lightning:' + value.toUpperCase()
useEffect(() => {
async function effect () {
@@ -36,7 +36,7 @@ export default function LnQR ({ value, webLn, statusVariant, status }) {
)
}
-export function LnQRSkeleton ({ status }) {
+export function QrSkeleton ({ status }) {
return (
<>