OAuth - Web clients, app download modal

config/oauth.json

@@ -10,6 +10,15 @@
       "posting": "5K1aJ8JayUA7c2Ptg9Y2DetKxSvXGXa5GCcvYeHtn1Xh3v4egPS",
       "active": "5JFZC7AtEe1wF2ce6vPAUxDeevzYkPgmtR14z9ZVgvCCtrFAaLw"
     },
+    "web_clients": {
+      "Blogs": { "img": "https://i.imgur.com/36zv8We.png",
+        "ru": "Блоги", "url": "https://golos.id" },
+      "Wallet": { "img": "https://i.imgur.com/CYfDqIy.png",
+        "ru": "Кошелек", "url": "https://wallet.golos.id" },
+      "Messenger": { "img": "https://devimages.golos.today/DQmbzuzhgGnDRbKG8KyqL5HWSu5T2w1ZDP32ygM556TqLSn/Messenger.png",
+        "ru": "Мессенджер", "url": "https://chat.golos.app" },
+      "_desktop": { "host": "https://files.golos.app" }
+    },
     "allowed_clients": {
       "localfile": {
         "origins": ["null"],

package.json

@@ -33,6 +33,7 @@
     "passport-telegram-official": "^2.0.1",
     "passport-vk": "^1.0.0",
     "passport-yandex": "^0.0.5",
+    "qr-image": "^3.2.0",
     "querystring": "^0.2.1",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",

src/App.scss

@@ -10,6 +10,7 @@
 @import "./elements/GeneratedPasswordInput";
 @import "./elements/Expandable";
 @import "./elements/LoadingIndicator";
+@import "./elements/WebClients";
 @import "./elements/nft/NFTSmallIcon";
 @import "./elements/nft/NFTTokens";
 @import "./elements/PagedDropdownMenu";

src/elements/QrCode.jsx

@@ -0,0 +1,18 @@
+// modified https://github.com/jprichardson/react-qr/blob/master/index.js
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import qrImage from 'qr-image'
+
+export default class ReactQR extends Component {
+    static propTypes = {
+        text: PropTypes.string.isRequired
+    }
+
+    render() {
+        const pngBuffer = qrImage.imageSync(this.props.text, { type: 'png', size: this.props.size || 2, margin: 1 })
+        const dataURI = 'data:image/png;base64,' + pngBuffer.toString('base64')
+        return (
+            <img className='react-qr' src={dataURI} />
+        )
+    }
+}

src/elements/WebClients.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import tt from 'counterpart'
+import CloseButton from 'react-foundation-components/lib/global/close-button'
+import Reveal from 'react-foundation-components/lib/global/reveal'
+
+import AppDownload from '@/modules/app/AppDownload'
+
+class WebClients extends React.Component {
+    static propTypes = {
+    }
+
+    state = {
+    }
+
+    showAppDownload = (e) => {
+        e.preventDefault()
+        this.setState({
+            show_app_download_modal: true
+        })
+    }
+
+    hideAppDownload = () => {
+        this.setState({
+            show_app_download_modal: false
+        })
+    }
+
+    render() {
+        const { web_clients } = this.props
+
+        const isEng = tt.getLocale() !== 'ru'
+
+        let appList = null
+        const webs = Object.entries(web_clients || {})
+        if (webs.length) {
+            appList = []
+            for (const [en, data] of webs) {
+                if (en === '_desktop') continue
+                const { img, ru, url } = data
+                appList.push(<a key={url} className='web-client' href={url} target='_blank' rel='noopener noreferrer'>
+                    <img src={img} /><br/>
+                    <div className='web-label'>{isEng ? en : ru}</div>
+                </a>)
+            }
+
+            let desktop
+            const { _desktop } = web_clients
+            let desktopHost
+            if (_desktop) {
+                desktopHost = _desktop.host
+                desktop = <div className='desktop'>
+                    {tt('web_clients_jx.or_desktop')}
+                    <a href='#' onClick={this.showAppDownload}>{tt('web_clients_jx.or_desktop_link')}</a>
+                    {tt('web_clients_jx.or_desktop2')}
+                </div>
+            }
+
+            const modalStyle = {
+                borderRadius: '8px',
+                boxShadow: '0 0 19px 3px rgba(0,0,0, 0.2)',
+                overflow: 'hidden',
+            }
+
+            const { show_app_download_modal } = this.state
+            appList = <div className='WebClients'>
+                <h3>{tt('web_clients_jx.title')}</h3>
+                {appList}
+                {desktop}
+                <hr/>
+                <Reveal revealStyle={{ ...modalStyle, }}
+                    onHide={this.hideAppDownload} show={show_app_download_modal}>
+                    <CloseButton onClick={this.hideAppDownload} />
+                    <AppDownload host={desktopHost} />
+                </Reveal>
+            </div>
+        }
+        return appList
+    }
+}
+
+export default WebClients

src/elements/WebClients.scss

@@ -0,0 +1,23 @@
+.WebClients {
+    .web-client {
+        display: inline-block;
+        vertical-align: top;
+        width: 150px;
+        height: 80px;
+        position: relative;
+
+        img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+        .web-label {
+            position: absolute;
+            left: 0.25rem;
+            bottom: 0.25rem;
+        }
+    }
+
+    .desktop {
+        margin-top: 0.5rem;
+    }
+}

src/locales/en.json

@@ -1,4 +1,9 @@
 {
+  "app_download": {
+    "title": "Download application",
+    "download_for": "Download for",
+    "messenger": "Golos Messenger for "
+  },
   "chainvalidation_js": {
     "account_name_should": "Account name should ",
     "not_be_empty": "not be empty.",
@@ -197,6 +202,7 @@
     "unfreeze": "Unfreeze account",
     "apps_title": "Apps",
     "apps_empty": "You are not authorized in any app.",
+    "web_clients": "Web Clients",
     "link": "Link: ",
     "edit": "Edit",
     "remove_authority": "Forbid OAuth access to my account",
@@ -212,6 +218,12 @@
     "memo_is_public": "This memo is public.",
     "submit": "Transfer"
   },
+  "web_clients_jx": {
+    "title": "Web-clients",
+    "or_desktop": "Or ",
+    "or_desktop_link": "download desktop app",
+    "or_desktop2": ", which combines all these applications."
+  },
   "oauth_transfer_nft": {
     "no_tokens": "You have not yet any NFT-tokens.",
     "token_not_exist": "No such token in your wallet. You can transfer any of these tokens:",

src/locales/ru-RU.json

@@ -1,4 +1,9 @@
 {
+  "app_download": {
+    "title": "Скачать приложение",
+    "download_for": "Скачать для",
+    "messenger": "Golos Мессенджер для "
+  },
   "chainvalidation_js": {
     "account_name_should": "Имя аккаунта должно ",
     "not_be_empty": "не может быть пустым.",
@@ -197,11 +202,18 @@
     "unfreeze": "Активировать аккаунт",
     "apps_title": "Приложения",
     "apps_empty": "Вы пока не авторизованы ни в одном приложении.",
+    "web_clients": "Веб-клиенты",
     "link": "Ссылка: ",
     "edit": "Настроить",
     "remove_authority": "Отменить доступ OAuth к моему аккаунту",
     "remove_authority_confirm": "Вы действительно хотите отменить доступ GolosSigner к вашему аккаунту?"
   },
+  "web_clients_jx": {
+    "title": "Веб-клиенты",
+    "or_desktop": "Или ",
+    "or_desktop_link": "скачайте десктоп-клиент",
+    "or_desktop2": ", где объединены все эти приложения."
+  },
   "oauth_transfer": {
     "from": "От",
     "to": "Отправить аккаунту",

src/modules/app/AppDownload.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import tt from 'counterpart'
+
+import QRCode from '@/elements/QrCode'
+
+class AppDownload extends React.Component {
+    componentDidMount() {
+    }
+
+    render() {
+        const updaterHost = this.props.host
+        if (!updaterHost) return null
+        const winUrl = new URL('/api/exe/desktop/windows/latest', updaterHost).toString()
+        const linuxUrl = new URL('/api/exe/desktop/linux/latest', updaterHost).toString()
+        const androidUrl = new URL('/api/exe/messenger/android/latest', updaterHost).toString()
+        return <div>
+            <h4>{tt('app_download.title')}</h4>
+            <a href={winUrl} target='_blank' rel='nofollow noreferrer' title={tt('app_download.download_for') + ' Windows'}>
+                <img src={'/images/windows.png'} />
+                Windows
+            </a><br />
+            <a href={linuxUrl} title={tt('app_download.download_for') + ' Linux'}>
+                <img src={'/images/linux.png'} />
+                Linux (deb)
+            </a><br />
+            <a href={androidUrl} title={tt('app_download.download_for') + ' Android'}>
+                <img src={'/images/android48x48.png'} />
+                {tt('app_download.messenger')}Android&nbsp;&nbsp;
+                <QRCode text={androidUrl} size={2} />
+            </a>
+        </div>
+    }
+}
+
+export default AppDownload

src/pages/index.jsx

@@ -5,6 +5,7 @@ import tt from 'counterpart';
 import { api } from 'golos-lib-js'
 
 import RemoveAuthority from '@/elements/RemoveAuthority';
+import WebClients from '@/elements/WebClients'
 import Header from '@/modules/Header';
 import { callApi, } from '@/utils/OAuthClient';
 import { withRouterHelpers, } from '@/utils/routing';
@@ -51,7 +52,7 @@ class Index extends React.Component {
     render() {
         const { session, oauthCfg, } = this.props;
         const { account, clients, } = session;
-        const { service_account, sign_endpoint, } = oauthCfg;
+        const { service_account, sign_endpoint, web_clients, } = oauthCfg;
         let actions = [];
         for (let action of [
             'transfer', 'donate', 'delegate_vs', 'transfer_nft']) {
@@ -102,6 +103,7 @@ class Index extends React.Component {
         } else {
             clientList = <div className='callout'>{tt('oauth_main_jsx.apps_empty')}</div>
         }
+
         return (
             <div className='Signer_page'>
                 <Head>
@@ -122,6 +124,7 @@ class Index extends React.Component {
                         <h3>{tt('oauth_main_jsx.apps_title')}</h3>
                         {clientList}
                         <hr/>
+                        <WebClients web_clients={web_clients} />
                         <RemoveAuthority
                             account={account}
                             service_account={service_account}

src/server/oauth.js

@@ -119,6 +119,7 @@ function getOAuthCfg() {
         ws_connection_client: config.get('oauth.ws_connection_client'),
         chain_id: config.has('oauth.chain_id') && config.get('oauth.chain_id'),
         service_account: config.get('oauth.service_account.name'),
+        web_clients: config.has('oauth.web_clients') && config.get('oauth.web_clients'),
         sign_endpoint: new URL('/api/oauth/sign', config.get('oauth.rest_api')).toString(),
     };
 }

yarn.lock

@@ -4766,6 +4766,11 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+qr-image@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/qr-image/-/qr-image-3.2.0.tgz#9fa8295beae50c4a149cf9f909a1db464a8672e8"
+  integrity sha512-rXKDS5Sx3YipVsqmlMJsJsk6jXylEpiHRC2+nJy66fxA5ExYyGa4PqwteW69SaVmAb2OQ18HbYriT7cGQMbduw==
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"