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

Set demo app form config from url params #224

Merged
merged 10 commits into from
Jun 21, 2022
Merged

Set demo app form config from url params #224

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fb96f63
fix bottom spacing
BboyStatix Jun 13, 2022
f0f333b
remove redundant hr
BboyStatix Jun 13, 2022
dd8ffe9
refactor
BboyStatix Jun 13, 2022
478f09a
refactor
BboyStatix Jun 14, 2022
46b4007
initialise form and config from url+session
BboyStatix Jun 14, 2022
083d911
update url based on form selection
BboyStatix Jun 14, 2022
cc534d5
initialise tempLoginMethodsOrder
BboyStatix Jun 17, 2022
ed7dec0
refactor configFromURL
BboyStatix Jun 17, 2022
8c69c4f
refactor initial form config defaults
BboyStatix Jun 17, 2022
0dfe8da
improve formatting
BboyStatix Jun 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
87 changes: 48 additions & 39 deletions examples/vue-app/src/home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,6 @@
</div>
</div>
</div>
<hr />

<!-- UI MODE YOUR OWN MODAL -->
<div v-if="form.selectedUiMode == 'customUi'">
Expand Down Expand Up @@ -194,13 +193,13 @@
:adapterConfig="config.uiMode.default"
:chain="config.chain"
v-if="config.selectedUiMode === 'default' && config.authMode === 'hosted'"
></ConfigurableExample>
/>

<WhitelabelExample
:uiConfig="config.uiMode.whitelabel"
:chain="config.chain"
v-else-if="config.selectedUiMode === 'whitelabel' && config.authMode === 'hosted'"
></WhitelabelExample>
/>

<!-- Custom auth -->
<CustomUiContainer :authType="config.uiMode.customUi.type" v-if="config.authMode === 'ownAuth'"></CustomUiContainer>
Expand All @@ -213,6 +212,7 @@
import { LOGIN_PROVIDER } from "@toruslabs/openlogin";
import { CHAIN_NAMESPACES, ChainNamespaceType, EVM_ADAPTERS } from "@web3auth/base";
import { defaultEvmDappModalConfig, defaultSolanaDappModalConfig } from "@web3auth/web3auth";
import { cloneDeep } from "lodash";
import merge from "lodash.merge";
import Vue from "vue";

Expand Down Expand Up @@ -289,56 +289,59 @@ const defaultFormConfig = {
},
};

const defaultComponentConfig = {
chain: "ethereum",
authMode: "hosted",
selectedUiMode: "default",
openloginNetwork: "testnet",
plugins: {
torusWallet: true,
},
uiMode: {
default: {
login: [...defaultLoginProviders()],
adapter: defaultAdapters(CHAIN_NAMESPACES.EIP155),
},
customUi: {
type: "openlogin",
},
whitelabel: {
logoUrl: "https://cryptologos.cc/logos/solana-sol-logo.svg",
theme: "light",
loginMethodsOrder: DEFAULT_LOGIN_PROVIDERS,
},
},
const configFromSessionStorage = () => {
const storedConfig = JSON.parse(sessionStorage.getItem("web3AuthExampleConfig")) ?? {};
return storedConfig;
};

const configFromURL = () => {
const params = new URLSearchParams(document.location.search);
const chainParams = params.get("chain");
const authModeParams = params.get("auth");
const whitelabelParams = params.get("whitelabel");

// prettier-ignore
return {
...(["ethereum", "solana", "binance", "polygon"].includes(chainParams) && { chain: chainParams }),
...(authModeParams === "custom" && { authMode: "ownAuth" }),
...(whitelabelParams === "yes" && { selectedUiMode: "whitelabel" }),
};
};

const initialFormConfig = {
...defaultFormConfig,
...configFromSessionStorage(),
...configFromURL(),
};

export default Vue.extend({
name: "home",
data() {
return {
// storing config collected from user input.
form: { ...defaultFormConfig },
form: { ...initialFormConfig },
// sending to other components
config: { ...defaultComponentConfig },
tempLoginMethodsOrder: "",
config: { ...cloneDeep(initialFormConfig) },
tempLoginMethodsOrder: initialFormConfig.uiMode?.whitelabel.loginMethodsOrder.join(",") ?? "",
};
},
components: {
ConfigurableExample: ConfigurableExample,
WhitelabelExample: WhitelabelExample,
CustomUiContainer,
},
mounted() {
const storedConfig = sessionStorage.getItem("web3AuthExampleConfig");
const finalStoredConfig = JSON.parse(storedConfig || "{}");
this.config = merge(this.config, finalStoredConfig);
if (finalStoredConfig.uiMode) this.config.uiMode.whitelabel.loginMethodsOrder = finalStoredConfig.uiMode.whitelabel.loginMethodsOrder;
BboyStatix marked this conversation as resolved.
Show resolved Hide resolved
this.form = merge({}, this.config);
// this.config.uiMode.default.login.push({
// id: "facebook",
// name: "Facebook",
// checked: false,
// });
watch: {
"form.authMode"(val) {
const formValURLSearchParamMap = { ownAuth: "custom", hosted: "default" };
this.updateURL("auth", formValURLSearchParamMap[val]);
},
"form.chain"(val) {
this.updateURL("chain", val);
},
"form.selectedUiMode"(val) {
const formValURLSearchParamMap = { whitelabel: "yes", default: "no" };
this.updateURL("whitelabel", formValURLSearchParamMap[val]);
},
},
methods: {
saveConfig: function () {
Expand All @@ -361,6 +364,11 @@ export default Vue.extend({
setDefaultLoginMethodsOrder: function () {
this.tempLoginMethodsOrder = DEFAULT_LOGIN_PROVIDERS.join(",");
},
updateURL(searchParamKey, searchParamValue) {
const url = new URL(window.location.href);
url.searchParams.set(searchParamKey, searchParamValue);
window.history.replaceState(null, null, url.toString());
},
},
});
</script>
Expand Down Expand Up @@ -389,6 +397,7 @@ body {
border-right: 1px solid #ebecf0;
background-color: #f4f5f7;
padding: 20px;
padding-bottom: 60px;
}

.content {
Expand Down