Skip to content

Commit

Permalink
client ui: re-work register flow to specify fee asset wallet
Browse files Browse the repository at this point in the history
  • Loading branch information
@vctt94
vctt94 authored Oct 11, 2021
1 parent d203ebd commit 0d4075a
Show file tree
Hide file tree
Showing 18 changed files with 331 additions and 207 deletions.
24 changes: 2 additions & 22 deletions client/webserver/http.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import (
"time"

"decred.org/dcrdex/client/core"
"decred.org/dcrdex/dex"
"decred.org/dcrdex/dex/encode"
"decred.org/dcrdex/dex/order"
)
Expand Down Expand Up @@ -76,10 +75,7 @@ func (s *WebServer) handleLogin(w http.ResponseWriter, r *http.Request) {
// registerTmplData is template data for the /register page.
type registerTmplData struct {
CommonArguments
InitStep bool
WalletStep bool
OpenStep bool
DEXStep bool
Initialized bool
}

// handleRegister is the handler for the '/register' page request.
Expand All @@ -93,23 +89,7 @@ func (s *WebServer) handleRegister(w http.ResponseWriter, r *http.Request) {

data := &registerTmplData{
CommonArguments: *cArgs,
}

// TODO: rework register page for paying with other assets.
feeAssetID, _ := dex.BipSymbolID("dcr")
feeWalletStatus := s.core.WalletState(feeAssetID)
feeWalletExists := feeWalletStatus != nil
feeWalletOpen := feeWalletExists && feeWalletStatus.Open

switch {
case !cArgs.UserInfo.Initialized:
data.InitStep = true
case !feeWalletExists:
data.WalletStep = true
case !feeWalletOpen:
data.OpenStep = true
default:
data.DEXStep = true
Initialized: cArgs.UserInfo.Initialized,
}

s.sendTemplate(w, "register", data)
Expand Down
9 changes: 6 additions & 3 deletions client/webserver/locales/en-us.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@ var EnUS = map[string]string{
"Submit": "Submit",
"Confirm Registration": "Confirm Registration",
"app_pw_reg": "Enter your app password to confirm DEX registration.",
"reg_confirm_submit": `When you submit this form, <span id="feeDisplay"></span> DCR will be spent from your Decred wallet to pay registration fees.`, // TODO for multi-asset reg
"reg_confirm_submit": `When you submit this form, funds will be spent from your chosen wallet to pay the registration fee.`,
"provided_markets": "This DEX provides the following markets:",
"accepted_fee_assets": "This DEX accepts the following fees:",
"base_header": "Base",
"quote_header": "Quote",
"lot_size_header": "Lot Size",
Expand Down Expand Up @@ -131,8 +132,6 @@ var EnUS = map[string]string{
"Set App Password": "Set App Password",
"reg_set_app_pw_msg": "Set your app password. This password will protect your DEX account keys and connected wallets.",
"Password Again": "Password Again",
"reg_dcr_required": "Your Decred wallet is required to pay registration fees.", // TODO
"reg_dcr_unlocked": "Unlock your Decred wallet to pay registration fees.", // TODO
"Add a DEX": "Add a DEX",
"reg_ssl_needed": "Looks like we don't have an SSL certificate for this DEX. Add the server's certificate to continue.",
"Dark Mode": "Dark Mode",
Expand Down Expand Up @@ -174,4 +173,8 @@ var EnUS = map[string]string{
"ready": "ready",
"off": "off",
"Export Trades": "Export Trades",
"asset_header": "Asset",
"fee_price_header": "Fee",
"fee_confs_header": "Confs",
"SetupWallet": "Setup Wallet",
}
9 changes: 6 additions & 3 deletions client/webserver/locales/pt-br.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@ var PtBr = map[string]string{
"Submit": "Enviar",
"Confirm Registration": "Confirma Registro",
"app_pw_reg": "Informe sua senha do app para confirmar seu registro na DEX.",
"reg_confirm_submit": `Quando vc enviar esse formulário, <span id="feeDisplay"></span> DCR será gasto de sua carteira decred para pagar a taxa de registro.`,
"reg_confirm_submit": `Quando vc enviar esse formulário, <span id="feeDisplay"></span> DCR será gasto de sua carteira decred para pagar a taxa de registro.`, // update
"provided_markets": "Essa DEX provê os seguintes mercados:",
"accepted_fee_assets": "This DEX accepts the following fees:",
"base_header": "Base",
"quote_header": "Quote",
"lot_size_header": "Tamanho do Lote",
Expand Down Expand Up @@ -131,8 +132,6 @@ var PtBr = map[string]string{
"Set App Password": "Definir senha de aplicativo",
"reg_set_app_pw_msg": "Definir senha de aplicativo. Esta senha protegerá sua conta DEX e chaves e carteiras conectadas.",
"Password Again": "Senha Novamente",
"reg_dcr_required": "Sua carteira decred é necessária para pagar a taxa de registro.",
"reg_dcr_unlocked": "Desbloqueie sua carteira decred para pagamento da taxa.",
"Add a DEX": "Adicionar uma DEX",
"reg_ssl_needed": "Parece que não temos um certificado SSL para esta DEX. Adicione o certificado do servidor para podermos continuar.",
"Dark Mode": "Modo Dark",
Expand Down Expand Up @@ -174,4 +173,8 @@ var PtBr = map[string]string{
"ready": "destrancado",
"off": "desligado",
"Export Trades": "Exportar Trocas",
"asset_header": "Asset",
"fee_price_header": "Fee",
"fee_confs_header": "Confs",
"SetupWallet": "Setup Wallet",
}
16 changes: 10 additions & 6 deletions client/webserver/locales/zh-cn.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,11 @@ var ZhCN = map[string]string{
"Submit": "提交",
"Confirm Registration": "确认注册",
"app_pw_reg": "输入应用程序密码以确认注册DEX。",
"reg_confirm_submit": `当您发送此表格时, <span id="feeDisplay"></span> DCR将从您指定的钱包中支出，以支付注册费。`,
"provided_markets": "当前DEX提供以下市场:", // alt. DEX提供以下市场
"base_header": "Base", // no good translation
"quote_header": "Quote", // no good translation
"reg_confirm_submit": `当您发送此表格时, <span id="feeDisplay"></span> DCR将从您指定的钱包中支出，以支付注册费。`, // update
"provided_markets": "当前DEX提供以下市场:", // alt. DEX提供以下市场
"accepted_fee_assets": "This DEX accepts the following fees:", // xxx translate
"base_header": "Base", // no good translation
"quote_header": "Quote", // no good translation
"lot_size_header": "批量",
"lot_size_headsup": "所有交易都是批量值的倍数。",
"Password": "密码",
Expand Down Expand Up @@ -131,8 +132,6 @@ var ZhCN = map[string]string{
"Set App Password": "设置应用密码",
"reg_set_app_pw_msg": "设置应用密码。这个密码将保护你的 DEX 账户和连接的密钥和钱包。",
"Password Again": "再次输入密码",
"reg_dcr_required": "你的 decred 钱包需要支付注册费。",
"reg_dcr_unlocked": "解锁你的 decred 钱包以支付费用。",
"Add a DEX": "添加一个 DEX",
"reg_ssl_needed": "我们似乎没有此 DEX 的 SSL 证书。添加服务器证书以便我们可以继续。",
"Dark Mode": "暗模式",
Expand Down Expand Up @@ -174,4 +173,9 @@ var ZhCN = map[string]string{
"ready": "准备就绪",
"off": "关闭",
"Export Trades": "导出交易",

"asset_header": "Asset", // xxx translation
"fee_price_header": "Fee", // xxx translation
"fee_confs_header": "Confs", // xxx translation
"SetupWallet": "Setup Wallet", // xxx translation
}
18 changes: 18 additions & 0 deletions client/webserver/site/src/css/forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,22 @@ table.marketstable {
width: 33.3%;
padding: 3px 0;
}

button {
padding: 4px 12px;
}

tr.clickable {
cursor: pointer;
opacity: 0.75;
}

tr.clickable:hover {
opacity: 1;
}

tr.clickable.selected {
opacity: 1;
border: 1px solid #686767;
}
}
59 changes: 40 additions & 19 deletions client/webserver/site/src/html/forms.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,34 +38,18 @@
<div class="form-closer hoverbg"><span class="ico-cross"></span></div>
</div>
<div class="p-4">
{{if .}}
<div class="fs16" id="nwRegMsg">{{.}}</div>
<hr class="dashed mt-4">
{{end}}
<div id="walletSettings">
{{template "walletConfigTemplates"}}
</div>
<hr class="dashed my-2">
<div>
{{if .}}
<label for="newWalletPass" class="pt-3 pl-1 mb-0">[[[Wallet Password]]]</label>
<div class="fs14 px-1 mb-1">[[[w_password_helper]]]</div>
{{else}}
<label for="newWalletPass" class="pt-3 pl-1 mb-1">[[[Wallet Password]]]
{{if not .}} {{- /* Don't show this for registration (when . is set), since Decred always requires a password. */ -}}
<span class="ico-info" data-tooltip="[[[w_password_tooltip]]]"></span>
{{end}}
<span class="ico-info" data-tooltip="[[[w_password_tooltip]]]"></span>
</label>
{{end}}
<input type="password" class="form-control select" id="newWalletPass" autocomplete="off">
</div>
<div id="newWalletAppPWBox">
{{if .}}
<label for="nwAppPass" class="pt-3 pl-1 mb-0">[[[App Password]]]</label>
<div class="fs14 px-1 mb-1">[[[app_password_helper]]]</div>
{{else}}
<label for="nwAppPass" class="pt-3 pl-1 mb-1">[[[App Password]]]</label>
{{end}}
<input type="password" class="form-control select" id="nwAppPass" autocomplete="off">
</div>
<div class="d-flex justify-content-end mt-4">
Expand Down Expand Up @@ -122,7 +106,7 @@
</div>
<div class="d-flex mt-3">
<div class="col-12 p-0">
<div id="dexAddrAppPWBox">
<div id="dexAddrAppPWBox" {{if $.UserInfo.PasswordIsCached}}class="d-hide"{{end}}>
<label for="dexAddrAppPW" class="pl-1 mb-1">[[[App Password]]]</label>
<input type="password" class="form-control select" id="dexAddrAppPW" autocomplete="current-password">
</div>
Expand All @@ -145,6 +129,43 @@
<span id="appPassSpan">[[[app_pw_reg]]]</span>
[[[reg_confirm_submit]]]
</div>
<div class="fs16 mt-4">
[[[accepted_fee_assets]]]
<table class="marketstable">
<thead>
<tr>
<th class="text-center">[[[asset_header]]]</th>
<th class="text-center">[[[fee_price_header]]]</th>
<th class="text-center">[[[fee_confs_header]]]</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody id="feeTableRows">
<tr id="feeRowTemplate" class="clickable">
<td>
<div class="d-flex justify-content-center align-items-center">
<img class="micro-icon mr-1" data-tmpl="asseticon">
<div data-tmpl="asset"></div>
</div>
</td>
<td class="text-center">
<div class="d-flex justify-content-center align-items-center">
<div data-tmpl="fee"></div>
</div>
</td>
<td class="text-center">
<div class="d-flex justify-content-center align-items-center">
<div data-tmpl="confs"></div>
</div>
</td>
<td class="text-center">
<button data-tmpl="setupWallet" type="button" class="justify-content-center w-100 selected"></button>
<span data-tmpl="walletReady"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="fs16 mt-4">
[[[provided_markets]]]
<table class="marketstable">
Expand Down Expand Up @@ -181,7 +202,7 @@
<input type="password" class="form-control select" id="appPass" autocomplete="current-password">
</div>
<div class="d-flex justify-content-end mt-4">
<button id="submitConfirm" type="button" class="col-8 justify-content-center fs15 bg2 selected">[[[Register]]]</button>
<button id="submitConfirm" type="button" class="col-8 justify-content-center fs15 bg2">[[[Register]]]</button>
</div>
<div class="fs15 pt-3 text-center d-hide errcolor" id="regErr"></div>
</div>
Expand Down
15 changes: 5 additions & 10 deletions client/webserver/site/src/html/register.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="d-flex flex-column vscroll w-100">

{{- /* Set up the initial application password. Only shown if app is not already initialized. */ -}}
<form class="card mx-auto my-5 bg1{{if not .InitStep}} d-hide{{end}}" id="appPWForm">
<form class="card mx-auto my-5 bg1{{if .Initialized}} d-hide{{end}}" id="appPWForm">
<div class="bg2 px-2 py-1 text-center fs18">[[[Set App Password]]]</div>
<div class="p-4">
<div class="fs16">[[[reg_set_app_pw_msg]]]</div>
Expand Down Expand Up @@ -34,18 +34,13 @@
</div>
</form>

{{- /* Set up the Decred wallet. Only shown if user has not connected their Decred wallet. */ -}}
<form class="card mx-auto my-5 bg1{{if not .WalletStep}} d-hide{{end}}" id="newWalletForm">
{{template "newWalletForm" "[[[reg_dcr_required]]]"}}
</form>

{{- /* Unlock wallet. Only shown if not already unlocked. */ -}}
<form class="card mx-auto my-5 bg1{{if not .OpenStep}} d-hide{{end}}" id="unlockWalletForm">
{{template "unlockWalletForm" "[[[reg_dcr_unlocked]]]"}}
{{- /* Form to set up a wallet. Shown on demand when a user clicks a setupWallet button. */ -}}
<form class="card mx-auto my-5 bg1 d-hide" id="newWalletForm">
{{template "newWalletForm" }}
</form>

{{- /* DEX ADDRESS FORM */ -}}
<form class="card mx-auto my-5 bg1{{if not .DEXStep}} d-hide{{end}}" id="dexAddrForm">
<form class="card mx-auto my-5 bg1{{if not .Initialized}} d-hide{{end}}" id="dexAddrForm">
{{template "dexAddrForm"}}
</form>

Expand Down
Loading

0 comments on commit 0d4075a

Please sign in to comment.