Skip to content
This repository was archived by the owner on Nov 15, 2024. It is now read-only.

feat: add deeplink for opening BrightID on login form #49

Open
DeMonkeyCoder wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

feat: add deeplink for opening BrightID on login form #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eda7a25
feat: add deeplink for opening BrightID on login form
DeMonkeyCoder Nov 23, 2022
a1d9a2b
refactor: local brightid server endpoint
DeMonkeyCoder Nov 24, 2022
4540d97
refactor: local brightid server endpoint
DeMonkeyCoder Nov 24, 2022
ab36371
refactor: login method test
DeMonkeyCoder Nov 27, 2022
4b6468e
fix: use local ip instead of localhost for safari security restriction
DeMonkeyCoder Dec 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 47 additions & 37 deletions components/LoginForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
<template>
<form class="form" novalidate @submit.prevent="onSubmit">
<!-- <div style="display: flex; width: 100%; margin-bottom: 16px;">-->
<!-- <app-button-->
<!-- v-for="l in LoginMethods"-->
<!-- :key="l"-->
<!-- :class="{-->
<!-- 'text-button form__btn-select__selected': loginMethod === l-->
<!-- }"-->
<!-- class="text-button form__btn-select"-->
<!-- @click.prevent="loginMethod = l"-->
<!-- >-->
<!-- <span-->
<!-- :class="{-->
<!-- 'form__btn-select-text__selected':loginMethod === l-->
<!-- }"-->
<!-- class="form__btn-select-text">{{ l }}</span>-->
<!-- </app-button>-->
<!-- </div>-->
<div class="form__login-method">
<app-button
v-for="l in LoginMethods"
:key="l"
:class="{
'text-button form__btn-select__selected': loginMethod === l
}"
:data-testid="`login-method-btn-${l.replace(' ', '')}`"
class="text-button form__btn-select"
@click.prevent="loginMethod = l"
>
<span
:class="{
'form__btn-select-text__selected':loginMethod === l
}"
class="form__btn-select-text">{{ l }}</span>
</app-button>
</div>
<app-input
v-show="loginMethod === LoginMethods.explorerCode"
id="explorer"
Expand All @@ -43,6 +44,10 @@
how to find my explorer code
</p>
</div>
<a
v-show="loginMethod === LoginMethods.localServer"
:href="openBrightIdUrl" class="form__open-brightid">Open
BrightID</a>
<app-input
v-show="loginMethod === LoginMethods.localServer"
id="localserver"
Expand Down Expand Up @@ -77,12 +82,12 @@
style="display: none"
type="checkbox"
/>
<!-- <label class="checkbox" for="input-checkbox"
><span>
<svg width="12px" height="10px" viewbox="0 0 12 10">
<label class="checkbox" for="input-checkbox"
><span>
<svg height="10px" viewbox="0 0 12 10" width="12px">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg></span
><span>Remember my details</span></label
> -->
><span>Remember my details</span></label
>
</div>
<div class="form__btn-wrapper">
<app-button
Expand All @@ -94,7 +99,6 @@
>
<span class="form__btn-text">Sign In</span>
</app-button>
<!-- <bright-id-login /> -->
</div>
</form>
</template>
Expand All @@ -103,19 +107,16 @@
import axios from "axios"
import AppInput from '~/components/AppInput.vue'
import AppButton from '~/components/AppButton.vue'
import {TOAST_ERROR} from '~/utils/constants'
import {LoginMethods, TOAST_ERROR} from '~/utils/constants'
import {encryptData} from "~/scripts/utils/crypto";

const LoginMethods = Object.freeze({
localServer: 'WiFi Sharing',
explorerCode: 'Explorer Code',
})
export default {
components: {AppInput, AppButton},

data() {
return {
openBrightIdUrl: '',
LoginMethods,
loginMethod: LoginMethods.explorerCode,
loginMethod: LoginMethods.localServer,
hasErrors: true,
explorer: {
value: '',
Expand All @@ -131,6 +132,13 @@ export default {
},
}
},
mounted() {
this.openBrightIdUrl = 'brightid://local-server?run=true&next=' + window.location.href
if (this.$store.getters["app/isFirstVisitedRoute"]) {
this.loginByLocalServer('http://127.0.0.1:9025').catch(_err => {
})
}
},

methods: {
onInputValue(val) {
Expand Down Expand Up @@ -162,23 +170,22 @@ export default {
this.$store.commit('app/setLoading', false);
}
},
async loginByLocalServer() {
const localServerUrl = `${this.localserver.value.startsWith('http://') ? '' : 'http://'}${this.localserver.value}`
async loginByLocalServer(localServerUrl) {
const localServer = axios.create({
baseURL: localServerUrl,
headers: {
'Access-Control-Allow-Origin': '*',
},
})
const explorerData = (await localServer.get('/v1/explorer-code')).data
const explorerData = (await localServer.get('/v1/user-info')).data
if (explorerData) {
const {
explorerCode,
id: brightId,
password
} = explorerData
this.onInputValue({
id: 'explorer',
value: explorerCode,
value: encryptData(brightId, password),
error: false,
})
this.onInputValue({
Expand All @@ -193,7 +200,10 @@ export default {
if (this.loginMethod === LoginMethods.explorerCode) {
this.loginByExplorerCode()
} else if (this.loginMethod === LoginMethods.localServer) {
this.loginByLocalServer();
if (this.localserver.value) {
const localServerUrl = `${this.localserver.value.startsWith('http://') ? '' : 'http://'}${this.localserver.value}`
this.loginByLocalServer(localServerUrl);
}
}
},
emmitError() {
Expand All @@ -210,6 +220,6 @@ export default {
visitLink(link) {
window.open(link, '_blank')
},
},
}
}
</script>
11 changes: 6 additions & 5 deletions cypress/e2e/auth.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import {
FAKE_USER_EXPLORER_CODE,
LOCAL_FORAGE_DATA,
} from '../utils/data'
import { TOAST_ERROR } from '../../utils/constants'
import {LoginMethods, TOAST_ERROR} from '../../utils/constants'

describe('Auth', () => {
beforeEach(() => {
localforage.config({ storeName: 'nuxtLocalForage', name: 'nuxtJS' })
localforage.config({storeName: 'nuxtLocalForage', name: 'nuxtJS'})
localforage.removeItem('profileData')
cy.profileIntercepts()
})
Expand All @@ -24,6 +24,7 @@ describe('Auth', () => {
window.localStorage.removeItem('privateKey')
},
})
cy.get(`[data-testid=login-method-btn-${LoginMethods.explorerCode.replace(' ', '')}]`).click()
cy.get('[data-testid=login-explorer-code]').type(FAKE_USER_EXPLORER_CODE)
cy.get('[data-testid=login-password]').type(FAKE_BRIGHT_ID_PASSWORD)
cy.get('[data-testid=login-submit]').click()
Expand All @@ -42,7 +43,7 @@ describe('Auth', () => {
doLogin()
}

it('login', () => {
it('login by explorer code', () => {
doLoginSuccess()
cy.wait('@explorerCode')
.its('request.body')
Expand All @@ -61,7 +62,7 @@ describe('Auth', () => {
cy.url()
.should('include', `/profile/${FAKE_BRIGHT_ID}`)
.then(async () => {
localforage.config({ storeName: 'nuxtLocalForage', name: 'nuxtJS' })
localforage.config({storeName: 'nuxtLocalForage', name: 'nuxtJS'})
const data = await localforage.getItem('profileData')
expect(data).to.deep.eq(LOCAL_FORAGE_DATA)
})
Expand All @@ -76,7 +77,7 @@ describe('Auth', () => {
expect(localStorage.getItem('authKey')).to.be.null
expect(localStorage.getItem('publicKey')).to.be.null
expect(localStorage.getItem('privateKey')).to.be.null
localforage.config({ storeName: 'nuxtLocalForage', name: 'nuxtJS' })
localforage.config({storeName: 'nuxtLocalForage', name: 'nuxtJS'})
const data = await localforage.getItem('profileData')
expect(data).to.be.null
}
Expand Down
13 changes: 13 additions & 0 deletions styles/pages/landing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,19 @@
align-items: center;
position: relative;
margin-top: 22px;


&__open-brightid {
margin-bottom: 15px;
text-decoration: underline;
text-underline-offset: 3px;
}

&__login-method {
display: flex;
width: 100%;
margin-bottom: 16px;
}
}

.form__btn-wrapper {
Expand Down
5 changes: 5 additions & 0 deletions utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,8 @@ export const RATING_INBOUND_STAT = 'ri'
export const RATING_OUTBOUND_STAT = 'ro'
export const ENERGY_INBOUND_STAT = 'ei'
export const ENERGY_OUTBOUND_STAT = 'eo'

export const LoginMethods = Object.freeze({
localServer: 'WiFi Sharing',
explorerCode: 'Explorer Code',
})