Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve demo app UI #15

Merged
merged 4 commits into from
Jan 17, 2022
Merged

Improve demo app UI #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e7c82a5
Improve UI for example sidebar
tainguyentt Jan 14, 2022
ff02d7d
Set font-size for example headers
tainguyentt Jan 14, 2022
f597166
Update title
tainguyentt Jan 14, 2022
3e3ad84
Capitalize logout text button
tainguyentt Jan 17, 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
2 changes: 1 addition & 1 deletion examples/vue-app/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>helloworld</title>
<title>Web3Auth Demo</title>
</head>
<body>
<!-- <script
Expand Down
10 changes: 3 additions & 7 deletions examples/vue-app/src/chains/binance.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
<template>
<div id="app">
<h3>Login With Web3Auth X Binance Smart Chain</h3>
<h2>Login with Web3Auth and Binance Smart Chain</h2>
<Loader :isLoading="loading"></Loader>
<section
:style="{
fontSize: '12px',
}"
>
<section>
<button class="rpcBtn" v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
<EthRpc v-if="connected && provider" :provider="provider" :console="console"></EthRpc>
<button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
<!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
Expand Down
4 changes: 2 additions & 2 deletions examples/vue-app/src/chains/ethereum.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div id="app">
<h3>Login With Web3Auth X Ethereum</h3>
<h2>Login with Web3Auth and Ethereum</h2>
<Loader :isLoading="loading"></Loader>

<section
Expand All @@ -9,7 +9,7 @@
}"
>
<button class="rpcBtn" v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
<EthRpc v-if="connected && provider" :provider="provider" :console="console"></EthRpc>
<button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
<!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
Expand Down
4 changes: 2 additions & 2 deletions examples/vue-app/src/chains/matic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div id="app">
<h3>Login With Web3Auth X Polygon</h3>
<h2>Login with Web3Auth and Polygon</h2>
<Loader :isLoading="loading"></Loader>

<section
Expand All @@ -9,7 +9,7 @@
}"
>
<button class="rpcBtn" v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
<PolygonRpc v-if="connected && provider" :provider="provider" :console="console"></PolygonRpc>
<button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
<!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
Expand Down
4 changes: 2 additions & 2 deletions examples/vue-app/src/chains/solana.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div id="app">
<h3>Login With Web3Auth X Solana</h3>
<h2>Login with Web3Auth and Solana</h2>
<Loader :isLoading="loading"></Loader>
<section
:style="{
fontSize: '12px',
}"
>
<button class="rpcBtn" v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
<SolanaRpc v-if="connected && provider" :provider="provider" :console="console"></SolanaRpc>
<button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
<!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
Expand Down
4 changes: 2 additions & 2 deletions examples/vue-app/src/customUi/customAuth.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div id="app">
<h3>Web3Auth X CustomAuth</h3>
<h3>Web3Auth and CustomAuth</h3>
<Loader :isLoading="loading"></Loader>
<section
:style="{
Expand All @@ -18,7 +18,7 @@
<button class="rpcBtn" v-if="!connected" name="twitter" @click="connect" style="cursor: pointer">
{{ loginButtonStatus }} Login With twitter
</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
<EthRpc v-if="connected && provider" :provider="provider" :console="console"></EthRpc>
<button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
<!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
Expand Down
4 changes: 2 additions & 2 deletions examples/vue-app/src/customUi/openlogin.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div id="app">
<h3>Login With Web3Auth</h3>
<h2>Login With Web3Auth</h2>
<Loader :isLoading="loading"></Loader>
<section
:style="{
Expand All @@ -18,7 +18,7 @@
<button class="rpcBtn" v-if="!connected" name="facebook" @click="connect" style="cursor: pointer">
{{ loginButtonStatus }} Login With facebook
</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
<button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
<EthRpc v-if="connected && provider" :provider="provider" :console="console"></EthRpc>
<button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
<!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
Expand Down
16 changes: 2 additions & 14 deletions examples/vue-app/src/default/configurableModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,8 @@
<template>
<div id="app">
<!-- <h3>Login With Web3Auth</h3> -->
<section
:style="{
fontSize: '12px',
}"
></section>
<section
:style="{
fontSize: '12px',
}"
>
<ChainContainer :adapterConfig="adapterConfig" :chain="chain"></ChainContainer>
</section>
<ChainContainer :adapterConfig="adapterConfig" :chain="chain"></ChainContainer>
<div id="console" style="white-space: pre-line">
<p style="white-space: pre-line"></p>
<code style="white-space: pre-line"></code>
</div>
</div>
</template>
Expand Down
17 changes: 5 additions & 12 deletions examples/vue-app/src/default/defaultModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,17 @@
<template>
<div id="app">
<h3>Login With Web3Auth</h3>
<h3>Connect with {{ web3auth.options.chainConfig.chainNamespace }} web3auth</h3>
<h2>Login with Web3Auth and {{ web3auth.options.chainConfig.chainNamespace }}</h2>
<Loader :isLoading="loading"></Loader>
<section
:style="{
fontSize: '12px',
}"
>
<button v-if="!connected" @click="switchChain" style="cursor: pointer">
Switch To {{ web3auth.options.chainConfig.chainNamespace === "solana" ? "Ethereum" : "solana" }}
</button>
</section>
<button v-if="!connected" @click="switchChain" style="cursor: pointer">
Switch To {{ web3auth.options.chainConfig.chainNamespace === "solana" ? "Ethereum" : "solana" }}
</button>
<section
:style="{
fontSize: '12px',
}"
>
<button v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
<button v-if="connected" @click="logout" style="cursor: pointer">logout</button>
<button v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
<SolRpc
v-if="connected && provider && web3auth.options.chainConfig.chainNamespace === 'solana'"
:provider="provider"
Expand Down
113 changes: 70 additions & 43 deletions examples/vue-app/src/home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<template>
<div class="container">
<div class="sidebar">
<h2>Configuration</h2>
<h2>Demo Settings</h2>
<div class="flex chain">
<label class="flex-20 fw-500" for="chain">Chain</label>
<select class="flex-60 dropdown" name="chain" id="chain" v-model="form.chain" @change="onChainSelect">
<label class="form-label" for="chain">Chain</label>
<select class="form-control dropdown" name="chain" id="chain" v-model="form.chain" @change="onChainSelect">
<option value="ethereum">Ethereum</option>
<option value="binance">Binance</option>
<!-- <option value="polygon">matic</option> -->
Expand All @@ -14,23 +14,29 @@

<div class="ui-mode">
<div class="flex ui-mode">
<span class="flex-20 fw-500">UI Mode</span>
<span class="flex-60">
<input type="radio" id="default" value="default" v-model="form.selectedUiMode" />
<label for="default" class="mr-10">Default</label>
<input type="radio" id="customUi" value="customUi" v-model="form.selectedUiMode" />
<label for="customUi" class="mr-10">Custom UI</label>
<input type="radio" id="whitelabel" value="whitelabel" v-model="form.selectedUiMode" />
<label for="whitelabel">WhiteLabel</label>
<span class="form-label">UI Mode</span>
<span class="form-control radio-group">
<label for="default" class="radio-button">
<input type="radio" id="default" value="default" v-model="form.selectedUiMode" />
Default
</label>
<label for="customUi" class="radio-button">
<input type="radio" id="customUi" value="customUi" v-model="form.selectedUiMode" />
CustomUI
</label>
<label for="whitelabel" class="radio-button">
<input type="radio" id="whitelabel" value="whitelabel" v-model="form.selectedUiMode" />
WhiteLabel
</label>
</span>
</div>
<br />

<!-- UI MODE DEFAULT -->
<div v-if="form.selectedUiMode == 'default'">
<div class="flex">
<span class="flex-20 fw-500">Login</span>
<div class="flex-60">
<span class="form-label">Login</span>
<div class="form-control">
<li v-for="loginType in form.uiMode.default.login" :key="loginType.id" class="list-style-none">
<label :for="loginType.id">
<input v-if="loginType.name !== 'Facebook'" type="checkbox" v-model="loginType.checked" v-bind:id="loginType.id" />
Expand All @@ -41,8 +47,8 @@
</div>
<br />
<div class="flex">
<span class="flex-20 fw-500">Wallet</span>
<div class="flex-60">
<span class="form-label">Wallet</span>
<div class="form-control">
<li v-for="walletType in form.uiMode.default.adapter" :key="walletType.id" class="list-style-none">
<label :for="walletType.id">
<input type="checkbox" v-model="walletType.checked" v-bind:id="walletType.id" />
Expand All @@ -56,13 +62,13 @@
<!-- UI MODE YOUR OWN MODAL -->
<div v-if="form.selectedUiMode == 'customUi'">
<div class="flex">
<span class="flex-20 fw-500">Type</span>
<span class="flex-60">
<span class="form-label">Type</span>
<span class="form-control">
<input type="radio" id="openlogin" name="openlogin" value="openlogin" v-model="form.uiMode.customUi.type" />
<label for="openlogin">OpenLogin</label>
<br />
<input type="radio" id="customAuth" name="customAuth" value="customAuth" v-model="form.uiMode.customUi.type" />
<label for="customauth">CustomAuth</label>
<label for="customAuth">CustomAuth</label>
<br />
</span>
</div>
Expand All @@ -72,15 +78,15 @@
<!-- UI MODE WHITELABEL -->
<div v-if="form.selectedUiMode == 'whitelabel'">
<div class="flex">
<span class="flex-20 fw-500">Logo URL</span>
<span class="flex-60">
<span class="form-label">Logo URL</span>
<span class="form-control">
<input type="text" class="text" v-model="form.uiMode.whitelabel.logoUrl" />
</span>
</div>
<br />
<div class="flex">
<span class="flex-20 fw-500">theme</span>
<span class="flex-60">
<span class="form-label">Theme</span>
<span class="form-control">
<input type="radio" id="light" name="light" value="light" v-model="form.uiMode.whitelabel.theme" />
<label for="light">Light</label>
<br />
Expand All @@ -91,9 +97,8 @@
</div>
</div>
</div>
<div class="flex">
<span class="flex-20" />
<button class="btn flex-60" @click="saveConfig">Submit</button>
<div class="btn-group">
<button class="btn" @click="saveConfig">Submit</button>
</div>
</div>
<div class="content">
Expand Down Expand Up @@ -245,39 +250,54 @@ export default Vue.extend({
</script>

<style>
html,
body {
margin: 0;
height: 100%;
}

#app {
height: 100%;
}

.container {
display: flex;
height: 100vh;
flex-wrap: wrap;
align-items: stretch;
height: 100%;
}

.sidebar {
min-width: 40%;
flex-grow: 1;
flex-basis: 25rem;
border-right: 1px solid #ebecf0;
background-color: #f4f5f7;
height: 100%;
padding: 20px;
}

.content {
width: 70%;
flex-basis: 0;
flex-grow: 999;
min-width: 40%;
padding: 20px;
}

.flex {
display: flex;
}

.flex-20 {
flex-basis: 20%;
.form-label {
flex-basis: 5rem;
text-align: right;
margin-right: 20px;
margin-right: 10px;
font-weight: 500;
}
.flex-60 {

.form-control {
flex-basis: 60%;
text-align: left;
}

.dropdown {
width: 100%;
font-size: 16px;
Expand All @@ -287,12 +307,23 @@ body {
box-sizing: border-box;
}

.mr-10 {
.radio-group {
flex-basis: 70%;
flex-grow: 1;
}

.radio-button {
display: inline-block;
margin-right: 10px;
}
.fw-500 {
font-weight: 500;
.radio-button:last-child {
margin-right: 0;
}

.btn-group {
text-align: center;
}

.btn {
padding: 9px 16px;
max-height: 40px;
Expand All @@ -301,8 +332,8 @@ body {
text-align: center;
font-weight: 500;
cursor: pointer;
min-width: 60%;
margin-top: 10px;
min-width: 70%;
margin: 30px 0 10px;
height: 40px;
color: #0364ff;
background-color: #fff;
Expand Down Expand Up @@ -343,12 +374,8 @@ body {
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 50%);
}

.ui-mode {
padding: 20px 0;
}

.chain {
padding: 20px 0;
margin-bottom: 20px;
}

.text {
Expand Down
Loading