@redzone/taunt-logins-ui-react 0.0.26 → 0.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs +58 -25
- package/dist/cjs/index.d.cts +5 -1
- package/dist/es/index.d.ts +5 -1
- package/dist/es/index.js +53 -24
- package/dist/styling.css +207 -131
- package/package.json +2 -2
package/dist/cjs/index.cjs
CHANGED
|
@@ -9,9 +9,14 @@ function __insertCSS(code) {
|
|
|
9
9
|
|
|
10
10
|
var jsxRuntime = require('react/jsx-runtime');
|
|
11
11
|
var react = require('react');
|
|
12
|
+
var btnImage = require('https://files.playtaunt.io/taunt-logins-ui/btn.png');
|
|
12
13
|
var tauntLogins = require('@redzone/taunt-logins');
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
+
|
|
17
|
+
var btnImage__default = /*#__PURE__*/_interopDefault(btnImage);
|
|
18
|
+
|
|
19
|
+
__insertCSS(".rzd-loginui-complete{position:relative;overflow:hidden;border-radius:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px;padding:50px 40px 36px;max-width:620px;min-height:500px;min-width:520px;background-color:#000;font-family:\"DM Sans\",sans-serif}.rzd-loginui-complete .rzd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0;opacity:.85}.rzd-loginui-complete .rzd-vector{position:absolute;bottom:0;left:0;width:100%;pointer-events:none;z-index:1;opacity:.35}.rzd-loginui-complete .rzd-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.rzd-loginview{box-sizing:border-box;color:#fff;font-family:\"DM Sans\",sans-serif}.rzd-gradient-title{font-family:\"DM Sans\",sans-serif;font-size:54px;font-weight:600;font-style:normal;line-height:1.1;background:linear-gradient(90deg,#4572ff 0,#cedaff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 4px;max-width:500px}.rzd-subtitle{font-family:\"DM Sans\",sans-serif;font-size:16px;font-weight:400;color:#ffffffcc;margin:-14px 0 12px;letter-spacing:.2px}.rdz-input{font-family:\"DM Sans\",sans-serif;line-height:1.5;font-weight:400;color:#fff;border-radius:12px;border:none;padding:0 20px;font-size:16px;background-color:transparent;cursor:text;outline:0;position:relative}input.rdz-input{box-sizing:border-box;width:100%;max-width:480px;height:58px}.rdz-input-wrapper{position:relative;width:100%;max-width:480px;background:0 0}.rdz-input-wrapper::before{content:\"\";position:absolute;inset:0;border-radius:12px;padding:1.5px;background:linear-gradient(90deg,#fff,#4572ff);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.rdz-input-wrapper .rdz-input{width:100%;max-width:100%;height:54px;border-radius:10px;background-color:transparent}.rdz-input-wrapper:hover::before{background:linear-gradient(90deg,#fff,#6b9aff)}.rdz-input-wrapper:hover{box-shadow:0 0 12px rgba(69,114,255,.3),0 0 24px rgba(69,114,255,.15)}.rdz-input-wrapper:focus-within::before{background:linear-gradient(90deg,#fff,#6b9aff)}.rdz-input-wrapper:focus-within{box-shadow:0 0 16px rgba(69,114,255,.45),0 0 36px rgba(69,114,255,.2)}input.rdz-input::placeholder{color:rgba(255,255,255,.5);font-family:\"DM Sans\",sans-serif;font-size:16px}.rdz-magic-email-container{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.rdz-magic-email-error{color:#ff4d4d;font-family:\"DM Sans\",sans-serif;font-size:14px}.rdz-magic-email-button{font-family:\"DM Sans\",sans-serif;font-size:22px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#fff;border:none;cursor:pointer;width:100%;max-width:520px;height:130px;background-color:transparent;background-size:contain;background-position:center;background-repeat:no-repeat;transition:transform .2s ease,filter .2s ease}.rdz-magic-email-button:hover{transform:scale(1.03);filter:brightness(1.1)}.rdz-magic-email-button:active{transform:scale(.98)}.rdz-sign-up-text{font-family:\"DM Sans\",sans-serif;font-size:14px;font-weight:400;color:rgba(255,255,255,.6);margin:4px 0}.rdz-icon-button{width:50px;height:50px;border-radius:50%;border:none;background-color:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,filter .2s ease}.rdz-icon-button img{width:100%;height:100%;object-fit:contain}.rdz-icon-button:hover{transform:scale(1.12);filter:brightness(1.15)}.rdz-icon-button:active{transform:scale(.95)}.rdz-icon-button-disabled,.rdz-icon-button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(100%);pointer-events:none}.rdz-icon-button-disabled:hover,.rdz-icon-button:disabled:hover{transform:none;filter:grayscale(100%)}.rdz-logout-button{margin-left:8px;padding:12px 28px;background:linear-gradient(90deg,#1a6dff,#00c8ff);color:#fff;border-radius:50px;border:none;cursor:pointer;font-family:\"DM Sans\",sans-serif;font-size:16px;font-weight:600;transition:transform .2s ease,filter .2s ease}.rdz-logout-button:hover{transform:scale(1.05);filter:brightness(1.1)}.rdz-logout-button:active{transform:scale(.98)}");
|
|
15
20
|
|
|
16
21
|
const coinbaseLogo = "https://res.cloudinary.com/dz0wa3qbj/image/upload/v1760030923/coinbase_kyknjr.png";
|
|
17
22
|
const CoinbaseButton = ({ openCoinbase, disabled = false })=>{
|
|
@@ -89,7 +94,6 @@ function useTaunt() {
|
|
|
89
94
|
return ctx;
|
|
90
95
|
}
|
|
91
96
|
|
|
92
|
-
const btnImage = "https://res.cloudinary.com/dz0wa3qbj/image/upload/v1760030925/btn_ioay6n.png";
|
|
93
97
|
const MagicEmailInput = ({ onEmail })=>{
|
|
94
98
|
const { otpMagicLogin } = useTaunt();
|
|
95
99
|
const [email, setEmail] = react.useState();
|
|
@@ -119,21 +123,24 @@ const MagicEmailInput = ({ onEmail })=>{
|
|
|
119
123
|
className: "rdz-magic-email-error",
|
|
120
124
|
children: "Please enter a valid email"
|
|
121
125
|
}),
|
|
122
|
-
/*#__PURE__*/ jsxRuntime.jsx("
|
|
123
|
-
className: "rdz-input",
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
126
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
127
|
+
className: "rdz-input-wrapper",
|
|
128
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
129
|
+
className: "rdz-input",
|
|
130
|
+
onChange: (e)=>{
|
|
131
|
+
setEmail(e.target.value ? e.target.value : undefined);
|
|
132
|
+
},
|
|
133
|
+
placeholder: "Email address",
|
|
134
|
+
type: "email",
|
|
135
|
+
value: email
|
|
136
|
+
})
|
|
130
137
|
}),
|
|
131
138
|
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
132
139
|
onClick: runMagic,
|
|
133
140
|
type: "button",
|
|
134
141
|
className: "rdz-magic-email-button",
|
|
135
142
|
style: {
|
|
136
|
-
backgroundImage: `url(${
|
|
143
|
+
backgroundImage: `url(${btnImage__default.default})`
|
|
137
144
|
},
|
|
138
145
|
children: "LOG IN / SIGN UP"
|
|
139
146
|
})
|
|
@@ -363,21 +370,46 @@ const LoginView = ({ providers = [
|
|
|
363
370
|
});
|
|
364
371
|
};
|
|
365
372
|
|
|
366
|
-
const
|
|
373
|
+
const bgImage = "https://files.playtaunt.io/taunt-logins-ui/bg.png";
|
|
374
|
+
const tauntVector = "https://files.playtaunt.io/taunt-logins-ui/tauntvector.png";
|
|
375
|
+
const LoginUIComplete = ({ className, extLoading = false, title = "Log in to access \n all the features", subtitle = "Add Gamefi or Socialfi to any stream via AI Agents", ...loginProps })=>{
|
|
367
376
|
const { loggedIn, isLoading } = useTaunt();
|
|
368
|
-
return /*#__PURE__*/ jsxRuntime.
|
|
377
|
+
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
369
378
|
className: `rzd-loginview rzd-loginui-complete ${className ?? ""}`,
|
|
370
|
-
children:
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
379
|
+
children: [
|
|
380
|
+
/*#__PURE__*/ jsxRuntime.jsx("img", {
|
|
381
|
+
src: bgImage,
|
|
382
|
+
alt: "",
|
|
383
|
+
className: "rzd-bg"
|
|
384
|
+
}),
|
|
385
|
+
/*#__PURE__*/ jsxRuntime.jsx("img", {
|
|
386
|
+
src: tauntVector,
|
|
387
|
+
alt: "",
|
|
388
|
+
className: "rzd-vector"
|
|
389
|
+
}),
|
|
390
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
391
|
+
className: "rzd-content",
|
|
392
|
+
children: extLoading || isLoading ? /*#__PURE__*/ jsxRuntime.jsx(LoadingView, {}) : loggedIn ? /*#__PURE__*/ jsxRuntime.jsx(LoggedInView, {}) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
393
|
+
children: [
|
|
394
|
+
/*#__PURE__*/ jsxRuntime.jsxs("h1", {
|
|
395
|
+
className: "rzd-gradient-title",
|
|
396
|
+
children: [
|
|
397
|
+
"Log in to access",
|
|
398
|
+
/*#__PURE__*/ jsxRuntime.jsx("br", {}),
|
|
399
|
+
"all the features"
|
|
400
|
+
]
|
|
401
|
+
}),
|
|
402
|
+
/*#__PURE__*/ jsxRuntime.jsx("p", {
|
|
403
|
+
className: "rzd-subtitle",
|
|
404
|
+
children: subtitle
|
|
405
|
+
}),
|
|
406
|
+
/*#__PURE__*/ jsxRuntime.jsx(LoginView, {
|
|
407
|
+
...loginProps
|
|
408
|
+
})
|
|
409
|
+
]
|
|
378
410
|
})
|
|
379
|
-
|
|
380
|
-
|
|
411
|
+
})
|
|
412
|
+
]
|
|
381
413
|
});
|
|
382
414
|
};
|
|
383
415
|
function LoggedInView() {
|
|
@@ -656,8 +688,9 @@ const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
|
|
|
656
688
|
}
|
|
657
689
|
setIsLoading(true);
|
|
658
690
|
try {
|
|
659
|
-
await taunt.refresh(token);
|
|
660
|
-
|
|
691
|
+
const details = await taunt.refresh(token);
|
|
692
|
+
await refreshUser();
|
|
693
|
+
return details;
|
|
661
694
|
} catch (error) {
|
|
662
695
|
console.error("Failed to refresh token:", error);
|
|
663
696
|
if (autoLogoutOnError) {
|
package/dist/cjs/index.d.cts
CHANGED
|
@@ -73,8 +73,12 @@ declare const LoginView: ({ providers, showEmail, showDisabled, dividerText, pro
|
|
|
73
73
|
type LoginUICompleteProps = LoginComponentProps & {
|
|
74
74
|
className?: string;
|
|
75
75
|
extLoading?: boolean;
|
|
76
|
+
/** Main title text */
|
|
77
|
+
title?: string;
|
|
78
|
+
/** Subtitle text below the title */
|
|
79
|
+
subtitle?: string;
|
|
76
80
|
};
|
|
77
|
-
declare const LoginUIComplete: ({ className, extLoading, ...loginProps }: LoginUICompleteProps) => react_jsx_runtime.JSX.Element;
|
|
81
|
+
declare const LoginUIComplete: ({ className, extLoading, title, subtitle, ...loginProps }: LoginUICompleteProps) => react_jsx_runtime.JSX.Element;
|
|
78
82
|
|
|
79
83
|
interface ModalProps {
|
|
80
84
|
title: string;
|
package/dist/es/index.d.ts
CHANGED
|
@@ -73,8 +73,12 @@ declare const LoginView: ({ providers, showEmail, showDisabled, dividerText, pro
|
|
|
73
73
|
type LoginUICompleteProps = LoginComponentProps & {
|
|
74
74
|
className?: string;
|
|
75
75
|
extLoading?: boolean;
|
|
76
|
+
/** Main title text */
|
|
77
|
+
title?: string;
|
|
78
|
+
/** Subtitle text below the title */
|
|
79
|
+
subtitle?: string;
|
|
76
80
|
};
|
|
77
|
-
declare const LoginUIComplete: ({ className, extLoading, ...loginProps }: LoginUICompleteProps) => react_jsx_runtime.JSX.Element;
|
|
81
|
+
declare const LoginUIComplete: ({ className, extLoading, title, subtitle, ...loginProps }: LoginUICompleteProps) => react_jsx_runtime.JSX.Element;
|
|
78
82
|
|
|
79
83
|
interface ModalProps {
|
|
80
84
|
title: string;
|
package/dist/es/index.js
CHANGED
|
@@ -9,9 +9,10 @@ function __insertCSS(code) {
|
|
|
9
9
|
|
|
10
10
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
11
11
|
import { useCallback, createContext, useContext, useState, useMemo, useEffect } from 'react';
|
|
12
|
+
import btnImage from 'https://files.playtaunt.io/taunt-logins-ui/btn.png';
|
|
12
13
|
import { TauntApi, tauntMetamaskLogin, tauntMagicEmailOTPLogin, tauntMagicTelegramLogin } from '@redzone/taunt-logins';
|
|
13
14
|
|
|
14
|
-
__insertCSS(".rzd-loginui-complete{
|
|
15
|
+
__insertCSS(".rzd-loginui-complete{position:relative;overflow:hidden;border-radius:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px;padding:50px 40px 36px;max-width:620px;min-height:500px;min-width:520px;background-color:#000;font-family:\"DM Sans\",sans-serif}.rzd-loginui-complete .rzd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0;opacity:.85}.rzd-loginui-complete .rzd-vector{position:absolute;bottom:0;left:0;width:100%;pointer-events:none;z-index:1;opacity:.35}.rzd-loginui-complete .rzd-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.rzd-loginview{box-sizing:border-box;color:#fff;font-family:\"DM Sans\",sans-serif}.rzd-gradient-title{font-family:\"DM Sans\",sans-serif;font-size:54px;font-weight:600;font-style:normal;line-height:1.1;background:linear-gradient(90deg,#4572ff 0,#cedaff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 4px;max-width:500px}.rzd-subtitle{font-family:\"DM Sans\",sans-serif;font-size:16px;font-weight:400;color:#ffffffcc;margin:-14px 0 12px;letter-spacing:.2px}.rdz-input{font-family:\"DM Sans\",sans-serif;line-height:1.5;font-weight:400;color:#fff;border-radius:12px;border:none;padding:0 20px;font-size:16px;background-color:transparent;cursor:text;outline:0;position:relative}input.rdz-input{box-sizing:border-box;width:100%;max-width:480px;height:58px}.rdz-input-wrapper{position:relative;width:100%;max-width:480px;background:0 0}.rdz-input-wrapper::before{content:\"\";position:absolute;inset:0;border-radius:12px;padding:1.5px;background:linear-gradient(90deg,#fff,#4572ff);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.rdz-input-wrapper .rdz-input{width:100%;max-width:100%;height:54px;border-radius:10px;background-color:transparent}.rdz-input-wrapper:hover::before{background:linear-gradient(90deg,#fff,#6b9aff)}.rdz-input-wrapper:hover{box-shadow:0 0 12px rgba(69,114,255,.3),0 0 24px rgba(69,114,255,.15)}.rdz-input-wrapper:focus-within::before{background:linear-gradient(90deg,#fff,#6b9aff)}.rdz-input-wrapper:focus-within{box-shadow:0 0 16px rgba(69,114,255,.45),0 0 36px rgba(69,114,255,.2)}input.rdz-input::placeholder{color:rgba(255,255,255,.5);font-family:\"DM Sans\",sans-serif;font-size:16px}.rdz-magic-email-container{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.rdz-magic-email-error{color:#ff4d4d;font-family:\"DM Sans\",sans-serif;font-size:14px}.rdz-magic-email-button{font-family:\"DM Sans\",sans-serif;font-size:22px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#fff;border:none;cursor:pointer;width:100%;max-width:520px;height:130px;background-color:transparent;background-size:contain;background-position:center;background-repeat:no-repeat;transition:transform .2s ease,filter .2s ease}.rdz-magic-email-button:hover{transform:scale(1.03);filter:brightness(1.1)}.rdz-magic-email-button:active{transform:scale(.98)}.rdz-sign-up-text{font-family:\"DM Sans\",sans-serif;font-size:14px;font-weight:400;color:rgba(255,255,255,.6);margin:4px 0}.rdz-icon-button{width:50px;height:50px;border-radius:50%;border:none;background-color:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,filter .2s ease}.rdz-icon-button img{width:100%;height:100%;object-fit:contain}.rdz-icon-button:hover{transform:scale(1.12);filter:brightness(1.15)}.rdz-icon-button:active{transform:scale(.95)}.rdz-icon-button-disabled,.rdz-icon-button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(100%);pointer-events:none}.rdz-icon-button-disabled:hover,.rdz-icon-button:disabled:hover{transform:none;filter:grayscale(100%)}.rdz-logout-button{margin-left:8px;padding:12px 28px;background:linear-gradient(90deg,#1a6dff,#00c8ff);color:#fff;border-radius:50px;border:none;cursor:pointer;font-family:\"DM Sans\",sans-serif;font-size:16px;font-weight:600;transition:transform .2s ease,filter .2s ease}.rdz-logout-button:hover{transform:scale(1.05);filter:brightness(1.1)}.rdz-logout-button:active{transform:scale(.98)}");
|
|
15
16
|
|
|
16
17
|
const coinbaseLogo = "https://res.cloudinary.com/dz0wa3qbj/image/upload/v1760030923/coinbase_kyknjr.png";
|
|
17
18
|
const CoinbaseButton = ({ openCoinbase, disabled = false })=>{
|
|
@@ -89,7 +90,6 @@ function useTaunt() {
|
|
|
89
90
|
return ctx;
|
|
90
91
|
}
|
|
91
92
|
|
|
92
|
-
const btnImage = "https://res.cloudinary.com/dz0wa3qbj/image/upload/v1760030925/btn_ioay6n.png";
|
|
93
93
|
const MagicEmailInput = ({ onEmail })=>{
|
|
94
94
|
const { otpMagicLogin } = useTaunt();
|
|
95
95
|
const [email, setEmail] = useState();
|
|
@@ -119,14 +119,17 @@ const MagicEmailInput = ({ onEmail })=>{
|
|
|
119
119
|
className: "rdz-magic-email-error",
|
|
120
120
|
children: "Please enter a valid email"
|
|
121
121
|
}),
|
|
122
|
-
/*#__PURE__*/ jsx("
|
|
123
|
-
className: "rdz-input",
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
122
|
+
/*#__PURE__*/ jsx("div", {
|
|
123
|
+
className: "rdz-input-wrapper",
|
|
124
|
+
children: /*#__PURE__*/ jsx("input", {
|
|
125
|
+
className: "rdz-input",
|
|
126
|
+
onChange: (e)=>{
|
|
127
|
+
setEmail(e.target.value ? e.target.value : undefined);
|
|
128
|
+
},
|
|
129
|
+
placeholder: "Email address",
|
|
130
|
+
type: "email",
|
|
131
|
+
value: email
|
|
132
|
+
})
|
|
130
133
|
}),
|
|
131
134
|
/*#__PURE__*/ jsx("button", {
|
|
132
135
|
onClick: runMagic,
|
|
@@ -363,21 +366,46 @@ const LoginView = ({ providers = [
|
|
|
363
366
|
});
|
|
364
367
|
};
|
|
365
368
|
|
|
366
|
-
const
|
|
369
|
+
const bgImage = "https://files.playtaunt.io/taunt-logins-ui/bg.png";
|
|
370
|
+
const tauntVector = "https://files.playtaunt.io/taunt-logins-ui/tauntvector.png";
|
|
371
|
+
const LoginUIComplete = ({ className, extLoading = false, title = "Log in to access \n all the features", subtitle = "Add Gamefi or Socialfi to any stream via AI Agents", ...loginProps })=>{
|
|
367
372
|
const { loggedIn, isLoading } = useTaunt();
|
|
368
|
-
return /*#__PURE__*/
|
|
373
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
369
374
|
className: `rzd-loginview rzd-loginui-complete ${className ?? ""}`,
|
|
370
|
-
children:
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
375
|
+
children: [
|
|
376
|
+
/*#__PURE__*/ jsx("img", {
|
|
377
|
+
src: bgImage,
|
|
378
|
+
alt: "",
|
|
379
|
+
className: "rzd-bg"
|
|
380
|
+
}),
|
|
381
|
+
/*#__PURE__*/ jsx("img", {
|
|
382
|
+
src: tauntVector,
|
|
383
|
+
alt: "",
|
|
384
|
+
className: "rzd-vector"
|
|
385
|
+
}),
|
|
386
|
+
/*#__PURE__*/ jsx("div", {
|
|
387
|
+
className: "rzd-content",
|
|
388
|
+
children: extLoading || isLoading ? /*#__PURE__*/ jsx(LoadingView, {}) : loggedIn ? /*#__PURE__*/ jsx(LoggedInView, {}) : /*#__PURE__*/ jsxs(Fragment, {
|
|
389
|
+
children: [
|
|
390
|
+
/*#__PURE__*/ jsxs("h1", {
|
|
391
|
+
className: "rzd-gradient-title",
|
|
392
|
+
children: [
|
|
393
|
+
"Log in to access",
|
|
394
|
+
/*#__PURE__*/ jsx("br", {}),
|
|
395
|
+
"all the features"
|
|
396
|
+
]
|
|
397
|
+
}),
|
|
398
|
+
/*#__PURE__*/ jsx("p", {
|
|
399
|
+
className: "rzd-subtitle",
|
|
400
|
+
children: subtitle
|
|
401
|
+
}),
|
|
402
|
+
/*#__PURE__*/ jsx(LoginView, {
|
|
403
|
+
...loginProps
|
|
404
|
+
})
|
|
405
|
+
]
|
|
378
406
|
})
|
|
379
|
-
|
|
380
|
-
|
|
407
|
+
})
|
|
408
|
+
]
|
|
381
409
|
});
|
|
382
410
|
};
|
|
383
411
|
function LoggedInView() {
|
|
@@ -656,8 +684,9 @@ const TauntProvider = ({ children, tauntServiceEndpoint, magicKey })=>{
|
|
|
656
684
|
}
|
|
657
685
|
setIsLoading(true);
|
|
658
686
|
try {
|
|
659
|
-
await taunt.refresh(token);
|
|
660
|
-
|
|
687
|
+
const details = await taunt.refresh(token);
|
|
688
|
+
await refreshUser();
|
|
689
|
+
return details;
|
|
661
690
|
} catch (error) {
|
|
662
691
|
console.error("Failed to refresh token:", error);
|
|
663
692
|
if (autoLogoutOnError) {
|
package/dist/styling.css
CHANGED
|
@@ -1,142 +1,249 @@
|
|
|
1
|
+
/* ============================
|
|
2
|
+
Login UI Complete (Card)
|
|
3
|
+
============================ */
|
|
1
4
|
.rzd-loginui-complete {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
+
position: relative;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
border-radius: 24px;
|
|
5
8
|
display: flex;
|
|
6
9
|
flex-direction: column;
|
|
7
10
|
justify-content: center;
|
|
8
11
|
align-items: center;
|
|
9
12
|
text-align: center;
|
|
10
13
|
gap: 20px;
|
|
11
|
-
|
|
12
|
-
padding: 40px;
|
|
14
|
+
padding: 50px 40px 36px;
|
|
13
15
|
max-width: 620px;
|
|
16
|
+
min-height: 500px;
|
|
17
|
+
min-width: 520px;
|
|
18
|
+
background-color: #000000;
|
|
19
|
+
font-family: "DM Sans", sans-serif;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* Background wave image */
|
|
23
|
+
.rzd-loginui-complete .rzd-bg {
|
|
24
|
+
position: absolute;
|
|
25
|
+
inset: 0;
|
|
26
|
+
width: 100%;
|
|
27
|
+
height: 100%;
|
|
28
|
+
object-fit: cover;
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
z-index: 0;
|
|
31
|
+
opacity: 0.85;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Taunt vector pattern at bottom */
|
|
35
|
+
.rzd-loginui-complete .rzd-vector {
|
|
36
|
+
position: absolute;
|
|
37
|
+
bottom: 0;
|
|
38
|
+
left: 0;
|
|
39
|
+
width: 100%;
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
z-index: 1;
|
|
42
|
+
opacity: 0.35;
|
|
43
|
+
}
|
|
14
44
|
|
|
15
|
-
|
|
16
|
-
|
|
45
|
+
/* Content layer above backgrounds */
|
|
46
|
+
.rzd-loginui-complete .rzd-content {
|
|
47
|
+
position: relative;
|
|
48
|
+
z-index: 2;
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: column;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 20px;
|
|
53
|
+
width: 100%;
|
|
17
54
|
}
|
|
18
55
|
|
|
56
|
+
/* ============================
|
|
57
|
+
Login View wrapper
|
|
58
|
+
============================ */
|
|
19
59
|
.rzd-loginview {
|
|
20
60
|
box-sizing: border-box;
|
|
21
61
|
color: white;
|
|
62
|
+
font-family: "DM Sans", sans-serif;
|
|
63
|
+
}
|
|
22
64
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
.logo:hover {
|
|
39
|
-
filter: drop-shadow(0 0 2em #646cffaa);
|
|
40
|
-
}
|
|
41
|
-
.logo.react:hover {
|
|
42
|
-
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/* @keyframes logo-spin {
|
|
46
|
-
from {
|
|
47
|
-
transform: rotate(0deg);
|
|
48
|
-
}
|
|
49
|
-
to {
|
|
50
|
-
transform: rotate(360deg);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
55
|
-
a:nth-of-type(2) .logo {
|
|
56
|
-
animation: logo-spin infinite 20s linear;
|
|
57
|
-
}
|
|
58
|
-
} */
|
|
59
|
-
|
|
60
|
-
.card {
|
|
61
|
-
padding: 2em;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.read-the-docs {
|
|
65
|
-
color: #888;
|
|
66
|
-
}
|
|
65
|
+
/* ============================
|
|
66
|
+
Gradient Title
|
|
67
|
+
============================ */
|
|
68
|
+
.rzd-gradient-title {
|
|
69
|
+
font-family: "DM Sans", sans-serif;
|
|
70
|
+
font-size: 54px;
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
font-style: normal;
|
|
73
|
+
line-height: 1.1;
|
|
74
|
+
background: linear-gradient(90deg, #4572ff 0%, #cedaff 100%);
|
|
75
|
+
-webkit-background-clip: text;
|
|
76
|
+
-webkit-text-fill-color: transparent;
|
|
77
|
+
background-clip: text;
|
|
78
|
+
margin: 0 0 4px;
|
|
79
|
+
max-width: 500px;
|
|
67
80
|
}
|
|
68
81
|
|
|
82
|
+
/* ============================
|
|
83
|
+
Subtitle
|
|
84
|
+
============================ */
|
|
85
|
+
.rzd-subtitle {
|
|
86
|
+
font-family: "DM Sans", sans-serif;
|
|
87
|
+
font-size: 16px;
|
|
88
|
+
font-weight: 400;
|
|
89
|
+
color: #ffffffcc;
|
|
90
|
+
margin: -14px 0 12px;
|
|
91
|
+
letter-spacing: 0.2px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* ============================
|
|
95
|
+
Input
|
|
96
|
+
============================ */
|
|
69
97
|
.rdz-input {
|
|
70
|
-
font-family: "
|
|
98
|
+
font-family: "DM Sans", sans-serif;
|
|
71
99
|
line-height: 1.5;
|
|
72
|
-
font-weight: 400 !important;
|
|
73
|
-
|
|
74
|
-
color: white;
|
|
75
|
-
border-radius: 8px;
|
|
76
|
-
border: 1px solid transparent;
|
|
77
|
-
padding: 0.6em 1.2em;
|
|
78
|
-
font-size: 1.2em;
|
|
79
100
|
font-weight: 400;
|
|
80
|
-
|
|
101
|
+
color: white;
|
|
102
|
+
border-radius: 12px;
|
|
103
|
+
border: none;
|
|
104
|
+
padding: 0 20px;
|
|
105
|
+
font-size: 16px;
|
|
81
106
|
background-color: transparent;
|
|
82
|
-
cursor:
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
/* On hover, show a blue border */
|
|
86
|
-
&:hover {
|
|
87
|
-
border-color: #646cff;
|
|
88
|
-
}
|
|
89
|
-
/* On focus, show an accessible outline */
|
|
90
|
-
&:focus,
|
|
91
|
-
&:focus-visible {
|
|
92
|
-
outline: 4px auto -webkit-focus-ring-color;
|
|
93
|
-
}
|
|
107
|
+
cursor: text;
|
|
108
|
+
outline: none;
|
|
109
|
+
position: relative;
|
|
94
110
|
}
|
|
95
111
|
|
|
96
112
|
input.rdz-input {
|
|
97
113
|
box-sizing: border-box;
|
|
98
|
-
position: relative;
|
|
99
114
|
width: 100%;
|
|
100
115
|
max-width: 480px;
|
|
101
116
|
height: 58px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Gradient border wrapper for input */
|
|
120
|
+
.rdz-input-wrapper {
|
|
121
|
+
position: relative;
|
|
122
|
+
width: 100%;
|
|
123
|
+
max-width: 480px;
|
|
124
|
+
|
|
125
|
+
background: transparent;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.rdz-input-wrapper::before {
|
|
129
|
+
content: "";
|
|
130
|
+
position: absolute;
|
|
131
|
+
inset: 0;
|
|
132
|
+
border-radius: 12px;
|
|
133
|
+
padding: 1.5px;
|
|
134
|
+
background: linear-gradient(90deg, #ffffff, #4572ff);
|
|
135
|
+
-webkit-mask:
|
|
136
|
+
linear-gradient(#fff 0 0) content-box,
|
|
137
|
+
linear-gradient(#fff 0 0);
|
|
138
|
+
mask:
|
|
139
|
+
linear-gradient(#fff 0 0) content-box,
|
|
140
|
+
linear-gradient(#fff 0 0);
|
|
141
|
+
-webkit-mask-composite: xor;
|
|
142
|
+
mask-composite: exclude;
|
|
143
|
+
pointer-events: none;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.rdz-input-wrapper .rdz-input {
|
|
147
|
+
width: 100%;
|
|
148
|
+
max-width: 100%;
|
|
149
|
+
height: 54px;
|
|
150
|
+
border-radius: 10px;
|
|
151
|
+
background-color: transparent;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.rdz-input-wrapper:hover::before {
|
|
155
|
+
background: linear-gradient(90deg, #ffffff, #6b9aff);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.rdz-input-wrapper:hover {
|
|
159
|
+
box-shadow:
|
|
160
|
+
0 0 12px rgba(69, 114, 255, 0.3),
|
|
161
|
+
0 0 24px rgba(69, 114, 255, 0.15);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.rdz-input-wrapper:focus-within::before {
|
|
165
|
+
background: linear-gradient(90deg, #ffffff, #6b9aff);
|
|
166
|
+
}
|
|
102
167
|
|
|
103
|
-
|
|
104
|
-
box-shadow:
|
|
105
|
-
|
|
168
|
+
.rdz-input-wrapper:focus-within {
|
|
169
|
+
box-shadow:
|
|
170
|
+
0 0 16px rgba(69, 114, 255, 0.45),
|
|
171
|
+
0 0 36px rgba(69, 114, 255, 0.2);
|
|
106
172
|
}
|
|
107
173
|
|
|
108
174
|
input.rdz-input::placeholder {
|
|
109
|
-
color:
|
|
110
|
-
|
|
111
|
-
font-
|
|
112
|
-
font-size: 1em;
|
|
175
|
+
color: rgba(255, 255, 255, 0.5);
|
|
176
|
+
font-family: "DM Sans", sans-serif;
|
|
177
|
+
font-size: 16px;
|
|
113
178
|
}
|
|
114
179
|
|
|
115
|
-
/*
|
|
180
|
+
/* ============================
|
|
181
|
+
Magic Email Container
|
|
182
|
+
============================ */
|
|
116
183
|
.rdz-magic-email-container {
|
|
117
184
|
display: flex;
|
|
118
185
|
flex-direction: column;
|
|
119
186
|
align-items: center;
|
|
120
|
-
gap:
|
|
187
|
+
gap: 20px;
|
|
121
188
|
width: 100%;
|
|
122
189
|
}
|
|
123
190
|
|
|
124
|
-
/* Error Message */
|
|
125
191
|
.rdz-magic-email-error {
|
|
126
|
-
color:
|
|
192
|
+
color: #ff4d4d;
|
|
193
|
+
font-family: "DM Sans", sans-serif;
|
|
194
|
+
font-size: 14px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* ============================
|
|
198
|
+
CTA Button (LOG IN / SIGN UP)
|
|
199
|
+
============================ */
|
|
200
|
+
.rdz-magic-email-button {
|
|
201
|
+
font-family: "DM Sans", sans-serif;
|
|
202
|
+
font-size: 22px;
|
|
203
|
+
font-weight: 900;
|
|
204
|
+
letter-spacing: 2px;
|
|
205
|
+
text-transform: uppercase;
|
|
206
|
+
color: white;
|
|
207
|
+
border: none;
|
|
208
|
+
cursor: pointer;
|
|
209
|
+
width: 100%;
|
|
210
|
+
max-width: 520px;
|
|
211
|
+
height: 130px;
|
|
212
|
+
background-color: transparent;
|
|
213
|
+
background-size: contain;
|
|
214
|
+
background-position: center;
|
|
215
|
+
background-repeat: no-repeat;
|
|
216
|
+
transition:
|
|
217
|
+
transform 0.2s ease,
|
|
218
|
+
filter 0.2s ease;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.rdz-magic-email-button:hover {
|
|
222
|
+
transform: scale(1.03);
|
|
223
|
+
filter: brightness(1.1);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.rdz-magic-email-button:active {
|
|
227
|
+
transform: scale(0.98);
|
|
127
228
|
}
|
|
128
229
|
|
|
129
|
-
/*
|
|
230
|
+
/* ============================
|
|
231
|
+
Divider Text ("Or Sign Up Using")
|
|
232
|
+
============================ */
|
|
130
233
|
.rdz-sign-up-text {
|
|
131
|
-
font-family: "
|
|
132
|
-
font-size:
|
|
234
|
+
font-family: "DM Sans", sans-serif;
|
|
235
|
+
font-size: 14px;
|
|
133
236
|
font-weight: 400;
|
|
237
|
+
color: rgba(255, 255, 255, 0.6);
|
|
238
|
+
margin: 4px 0;
|
|
134
239
|
}
|
|
135
240
|
|
|
136
|
-
/*
|
|
241
|
+
/* ============================
|
|
242
|
+
Icon Buttons (Social Providers)
|
|
243
|
+
============================ */
|
|
137
244
|
.rdz-icon-button {
|
|
138
|
-
width:
|
|
139
|
-
height:
|
|
245
|
+
width: 50px;
|
|
246
|
+
height: 50px;
|
|
140
247
|
border-radius: 50%;
|
|
141
248
|
border: none;
|
|
142
249
|
background-color: transparent;
|
|
@@ -157,8 +264,8 @@ input.rdz-input::placeholder {
|
|
|
157
264
|
}
|
|
158
265
|
|
|
159
266
|
.rdz-icon-button:hover {
|
|
160
|
-
transform: scale(1.
|
|
161
|
-
filter: brightness(1.
|
|
267
|
+
transform: scale(1.12);
|
|
268
|
+
filter: brightness(1.15);
|
|
162
269
|
}
|
|
163
270
|
|
|
164
271
|
.rdz-icon-button:active {
|
|
@@ -179,51 +286,20 @@ input.rdz-input::placeholder {
|
|
|
179
286
|
filter: grayscale(100%);
|
|
180
287
|
}
|
|
181
288
|
|
|
182
|
-
/*
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
background-position: center;
|
|
186
|
-
background-repeat: no-repeat;
|
|
187
|
-
font-family: "DRUNKWIDE", sans-serif;
|
|
188
|
-
border: none;
|
|
189
|
-
color: white;
|
|
190
|
-
padding: 16px 32px;
|
|
191
|
-
cursor: pointer;
|
|
192
|
-
min-height: 135px;
|
|
193
|
-
margin-bottom: -20px;
|
|
194
|
-
width: 100%;
|
|
195
|
-
max-width: 410px;
|
|
196
|
-
font-size: 22px;
|
|
197
|
-
font-weight: bold;
|
|
198
|
-
text-transform: uppercase;
|
|
199
|
-
letter-spacing: 1px;
|
|
200
|
-
background-color: transparent;
|
|
201
|
-
transition:
|
|
202
|
-
transform 0.2s ease,
|
|
203
|
-
filter 0.2s ease;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.rdz-magic-email-button:hover {
|
|
207
|
-
transform: scale(1.05);
|
|
208
|
-
filter: brightness(1.1);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.rdz-magic-email-button:active {
|
|
212
|
-
transform: scale(0.98);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
/* Logout Button */
|
|
289
|
+
/* ============================
|
|
290
|
+
Logout Button
|
|
291
|
+
============================ */
|
|
216
292
|
.rdz-logout-button {
|
|
217
293
|
margin-left: 8px;
|
|
218
|
-
padding: 12px
|
|
219
|
-
background
|
|
294
|
+
padding: 12px 28px;
|
|
295
|
+
background: linear-gradient(90deg, #1a6dff, #00c8ff);
|
|
220
296
|
color: white;
|
|
221
|
-
border-radius:
|
|
297
|
+
border-radius: 50px;
|
|
222
298
|
border: none;
|
|
223
299
|
cursor: pointer;
|
|
224
|
-
font-family: "
|
|
300
|
+
font-family: "DM Sans", sans-serif;
|
|
225
301
|
font-size: 16px;
|
|
226
|
-
font-weight:
|
|
302
|
+
font-weight: 600;
|
|
227
303
|
transition:
|
|
228
304
|
transform 0.2s ease,
|
|
229
305
|
filter 0.2s ease;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@redzone/taunt-logins-ui-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.28",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/es/index.js",
|
|
6
6
|
"module": "./dist/es/index.js",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"eslint-plugin-react-refresh": "^0.4.22",
|
|
60
60
|
"globals": "^16.4.0",
|
|
61
61
|
"prettier": "latest",
|
|
62
|
-
"prettier-config
|
|
62
|
+
"@repo/prettier-config": "*",
|
|
63
63
|
"typescript": "~5.9.3",
|
|
64
64
|
"typescript-eslint": "^8.45.0",
|
|
65
65
|
"vite": "^7.2.1"
|