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

Jump to bottom

Feat/customauth demo revamp UI #279

Merged
merged 11 commits into from
Jul 24, 2023
Merged

Feat/customauth demo revamp UI #279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8a4f9b5
CustomAuth demo UI Revamp
Apr 14, 2023
b702441
console style fix
Apr 14, 2023
3c5d131
login response fix
Apr 18, 2023
9f30c4e
Merge branch 'master' of https://github.com/torusresearch/CustomAuth …
smgv May 24, 2023
ea71dcb
mobile responsive changes
smgv Jun 22, 2023
3bd9e20
conflict resolved with new changes
smgv Jul 5, 2023
6840dc8
Network dropdown added
smgv Jul 5, 2023
869c7e4
network changes
smgv Jul 6, 2023
3e31ff6
Merge branch 'master' of https://github.com/torusresearch/CustomAuth …
smgv Jul 6, 2023
fbada87
Merge branch 'master' into feat/customauth-demo-revamp-ui
chaitanyapotti Jul 18, 2023
3530882
lock file
chaitanyapotti Jul 19, 2023
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
44,718 changes: 29,934 additions & 14,784 deletions examples/vue-app/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 10 additions & 6 deletions examples/vue-app/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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>Customauth Demo</title>
<meta charset="utf-8" />
<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" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<title>CustomAuth Demo</title>
</head>
<body>
<noscript>
<strong>We're sorry but Customauth Demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but CustomAuth Demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
Expand Down
23 changes: 7 additions & 16 deletions examples/vue-app/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,15 @@
<template>
<div id="app">
<div>
<router-view />
</div>
</template>

<style>
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
html,
body,
* {
padding: 0;
margin: 0;
font-family: "Poppins", sans-serif !important;
}
</style>
63 changes: 11 additions & 52 deletions examples/vue-app/src/HomePage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
<template>
<div id="app">
<div class="mode">
<div class="grid text-center justify-center mt-[15%]">
<h6 class="mb-2 text-3xl font-bold">demo-customauth.web3auth.io</h6>
<h6 class="pb-10 font-semibold text-[#595857]">Note: Login with Redirect mode is recommended</h6>
<div>
<router-link to="/redirectMode"><button class="btn-login">Login with Redirect Mode</button></router-link>
<router-link to="/popupMode"><button class="btn-login">Login with Popup Mode</button></router-link>
</div>
</div>
<div class="grid text-center justify-center mt-[15%] w-full p-4">
<h6 class="mb-2 text-xl sm:text-3xl font-bold dark:text-white">demo-customauth.web3auth.io</h6>
<h6 class="pb-10 text-base font-normal text-[#595857] dark:text-gray-200">Note: Login with Redirect mode is recommended</h6>
<div class="flex flex-col sm:flex-row gap-4">
<router-link to="/redirectMode"><button class="custom-btn w-full">Login with Redirect Mode</button></router-link>
<router-link to="/popupMode"><button class="custom-btn w-full">Login with Popup Mode</button></router-link>
</div>
<div id="console">
<div id="console" class="mt-10">
<p></p>
</div>
</div>
Expand All @@ -36,6 +32,7 @@ import {
verifierMap,
WEIBO,
} from "./constants";
import { TORUS_SAPPHIRE_NETWORK } from "@toruslabs/constants";

export default defineComponent({
name: "HomePage",
Expand Down Expand Up @@ -145,7 +142,7 @@ export default defineComponent({
const torusdirectsdk = new TorusSdk({
baseUrl: `${location.origin}/serviceworker`,
enableLogging: true,
network: "testnet", // details for test net
network: TORUS_SAPPHIRE_NETWORK.SAPPHIRE_DEVNET, // details for test net
web3AuthClientId: WEB3AUTH_CLIENT_ID,
});
await torusdirectsdk.init({ skipSw: false });
Expand All @@ -163,44 +160,6 @@ export default defineComponent({
});
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
/* .mode {
display: "flex";
flex-direction: "row";
justify-content: "center";
align-items: "center";
margin: 100;
} */
/*
#console {
border: 1px solid black;
height: auto;
padding: 2px;
bottom: 10px;
position: absolute;
text-align: left;
width: calc(100% - 20px);
border-radius: 5px;
}
#console::before {
content: "Console :";
position: absolute;
top: -20px;
font-size: 12px;
} */
#console > p {
margin: 0.5em;
}

.btn-login {
@apply h-12 w-60 m-2 bg-white rounded-3xl font-[#6F717A] font-medium;
border: 1px solid #6f717a;
}
<style scoped>
@import "./views/RedirectMode/Auth.css";
</style>
3 changes: 3 additions & 0 deletions examples/vue-app/src/assets/down.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions examples/vue-app/src/constants/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export const AUTH_DOMAIN = "https://torus-test.auth0.com";
export const COGNITO_AUTH_DOMAIN = "https://torus-test.auth.ap-southeast-1.amazoncognito.com/oauth2/";
export const TORUS_EMAIL_PASSWORDLESS = "torus_email_passwordless";
export const TORUS_SMS_PASSWORDLESS = "torus_sms_passwordless";
export const LOCAL_NETWORK = "network";

export const WEB3AUTH_CLIENT_ID = "BJ6l3_kIQiy6YVL7zDlCcEAvGpGukwFgp-C_0WvNI_fAEeIaoVRLDrV5OjtbZr_zJxbyXFsXMT-yhQiUNYvZWpo";

Expand Down
Loading