Skip to content

Commit

Permalink
changes requested for dec5
Browse files Browse the repository at this point in the history
  • Loading branch information
@moe-dev
moe-dev committed Dec 9, 2024
1 parent 9831553 commit aad2199
Show file tree
Hide file tree
Showing 11 changed files with 167 additions and 68 deletions.
2 changes: 2 additions & 0 deletions examples/react-components/src/app/components/PhoneInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ export const MuiPhone: React.FC<MUIPhoneProps> = ({
<TextField
variant="outlined"
color="primary"
name="phoneInput"
autoComplete="off"
placeholder="Phone number"
value={inputValue}
onChange={handlePhoneValueChange}
Expand Down
31 changes: 23 additions & 8 deletions examples/react-components/src/app/dashboard/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,18 @@ import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import Navbar from "../components/Navbar";
import { Toaster, toast } from "sonner";

const darkButtonTheme = {
"--button-bg": "var(--Greyscale-900, #2b2f33)",
"--button-text": "#ffffff",
"--button-border": "var(--Greyscale-800, #3f464b)",
"--button-hover-bg": "var(--Greyscale-700, #4a4f55)",
"--button-hover-text": "#ffffff",
"--button-disabled-bg": "#ffffff",
"--button-disabled-text": "var(--Greyscale-700, #a2a7ae)",
"--button-disabled-border": "var(--Greyscale-400, #a2a7ae)",
};


export default function Dashboard() {
const router = useRouter();
const { turnkey, authIframeClient, passkeyClient } = useTurnkey();
Expand Down Expand Up @@ -381,7 +393,7 @@ export default function Dashboard() {
? "HASH_FUNCTION_NO_OP"
: "HASH_FUNCTION_NOT_APPLICABLE",
});
setMessageSigningResult("Success! Message signed");
setMessageSigningResult("Success! Message signed.");
setSignature({ r: resp?.r, s: resp?.s, v: resp?.v });
} catch (error) {
console.error("Error signing message:", error);
Expand Down Expand Up @@ -448,7 +460,7 @@ export default function Dashboard() {
)}
</div>
{user && user.userEmail ? (
<CheckCircleIcon sx={{ color: "#4CAF50" }} />
<CheckCircleIcon sx={{ color: "#4c48ff" }} />
) : (
<div onClick={handleOpenEmailModal}>
<AddCircleIcon sx={{ cursor: "pointer" }} />
Expand All @@ -467,7 +479,7 @@ export default function Dashboard() {
)}
</div>
{user && user.userPhoneNumber ? (
<CheckCircleIcon sx={{ color: "#4CAF50" }} />
<CheckCircleIcon sx={{ color: "#4c48ff" }} />
) : (
<div onClick={handleOpenPhoneModal}>
<AddCircleIcon sx={{ cursor: "pointer" }} />
Expand All @@ -481,7 +493,7 @@ export default function Dashboard() {
<Typography>Passkey</Typography>
</div>
{user && user.authenticators && user.authenticators.length > 0 ? (
<CheckCircleIcon sx={{ color: "#4CAF50" }} />
<CheckCircleIcon sx={{ color: "#4c48ff" }} />
) : (
<div onClick={() => setIsPasskeyModalOpen(true)}>
<AddCircleIcon sx={{ cursor: "pointer" }} />
Expand All @@ -505,7 +517,7 @@ export default function Dashboard() {
user.oauthProviders.some((provider: { issuer: string }) =>
provider.issuer.toLowerCase().includes("google")
) ? (
<CheckCircleIcon sx={{ color: "#4CAF50" }} />
<CheckCircleIcon sx={{ color: "#4c48ff" }} />
) : (
<div onClick={() => handleAddOauth("Google")}>
<AddCircleIcon sx={{ cursor: "pointer" }} />
Expand All @@ -522,7 +534,7 @@ export default function Dashboard() {
user.oauthProviders.some((provider: { issuer: string }) =>
provider.issuer.toLowerCase().includes("apple")
) ? (
<CheckCircleIcon sx={{ color: "#4CAF50" }} />
<CheckCircleIcon sx={{ color: "#4c48ff" }} />
) : (
<div onClick={() => handleAddOauth("Apple")}>
<AddCircleIcon sx={{ cursor: "pointer" }} />
Expand All @@ -539,7 +551,7 @@ export default function Dashboard() {
user.oauthProviders.some((provider: { issuer: string }) =>
provider.issuer.toLowerCase().includes("facebook")
) ? (
<CheckCircleIcon sx={{ color: "#4CAF50" }} />
<CheckCircleIcon sx={{ color: "#4c48ff" }} />
) : (
<div onClick={() => handleAddOauth("Facebook")}>
<AddCircleIcon sx={{ cursor: "pointer" }} />
Expand Down Expand Up @@ -663,10 +675,12 @@ export default function Dashboard() {
walletId={selectedWallet!}
onHandleExportSuccess={handleExportSuccess}
onError={(errorMessage: string) => toast.error(errorMessage)}
theme={darkButtonTheme}
></Export>
<Import
onError={(errorMessage: string) => toast.error(errorMessage)}
onHandleImportSuccess={handleImportSuccess}
theme={darkButtonTheme}
/>
</div>
<div className="authFooter">
Expand Down Expand Up @@ -836,7 +850,6 @@ export default function Dashboard() {
{messageSigningResult && (
<Typography
sx={{
mt: 2,
color:
messageSigningResult.startsWith("Verified") ||
messageSigningResult.startsWith("Success")
Expand Down Expand Up @@ -919,6 +932,8 @@ export default function Dashboard() {
</Typography>
<TextField
fullWidth
autoComplete="off"
name="emailInput"
margin="normal"
value={emailInput}
onChange={(e) => setEmailInput(e.target.value)}
Expand Down
4 changes: 2 additions & 2 deletions examples/react-components/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export default function AuthPage() {
onChange={() => toggleSocials("enabled")}
/>
</div>
<div className="toggleSocialIndividualRow">
<div className="toggleSocialIndividualRow" style={{borderTopLeftRadius :"8px", borderTopRightRadius :"8px"}}>
<div className="labelContainer">
<img src="/google.svg" className="iconSmall" />
<Typography>Google</Typography>
Expand All @@ -200,7 +200,7 @@ export default function AuthPage() {
onChange={() => toggleSocials("apple")}
/>
</div>
<div className="toggleSocialIndividualRow">
<div className="toggleSocialIndividualRow" style={{borderBottomLeftRadius :"8px", borderBottomRightRadius :"8px"}}>
<div className="labelContainer">
<img src="/facebook.svg" className="iconSmall" />
<Typography>Facebook</Typography>
Expand Down
2 changes: 0 additions & 2 deletions examples/react-components/src/app/utils/oidc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ export const appleOidcToken = async ({

if (authWindow?.closed) {
clearInterval(interval);
reject(new Error("Apple login window was closed."));
}
}, 500);
});
Expand Down Expand Up @@ -127,7 +126,6 @@ export const googleOidcToken = async ({

if (authWindow?.closed) {
clearInterval(interval);
reject(new Error("Google login window was closed."));
}
}, 500);
});
Expand Down
5 changes: 3 additions & 2 deletions packages/sdk-react/src/components/auth/Auth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,11 +202,11 @@ const Auth: React.FC<AuthProps> = ({
setPasskeyCreationScreen(false);
setPasskeySignupError("");
} else {
setPasskeySignupError("Failed to login with passkey. Please try again");
setPasskeySignupError("Failed to login with passkey. Please try again.");
}
} catch {
setPasskeySignupError(
"The operation either timed out or was not allowed. Please try again"
"The operation either timed out or was not allowed. Please try again."
);
}
};
Expand Down Expand Up @@ -344,6 +344,7 @@ const Auth: React.FC<AuthProps> = ({
<div className={styles.inputGroup}>
<TextField
name="emailInput"
autoComplete="off"
type="email"
placeholder="Enter your email"
value={email}
Expand Down
57 changes: 50 additions & 7 deletions packages/sdk-react/src/components/auth/OtpVerification.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,53 @@
text-align: center;
color: var(--text-secondary);
margin-top: 16px;
height: 244px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box;
max-width: 400px;
padding: 8px;
margin: 0 auto;
background-color: var(--card-background-color);
border-radius: 8px;
}

.contentWrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}

.otpInputWrapper {
width: 100%;
}

.loadingWrapper {
position: absolute; /* Ensure it overlays the content */
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}

.errorText {
min-height: 16px;
text-align: center;
margin-top: 12px;
color: var(--error-color);
font-size: 12px;
max-width: 320px; /* Ensures error messages align with the OtpInput */
word-wrap: break-word;
}


.verificationBold {
font-family: Inter;
color: var(--text-primary);
Expand All @@ -30,6 +75,11 @@
margin-bottom: 12px;
}


.circularProgress {
position: absolute;
color: var(--accent-color);
}
.resendCode {
font-family: Inter;
font-size: 12px;
Expand All @@ -51,10 +101,3 @@
margin-bottom: 12px;
}

.errorText {
min-height: 16px;
text-align: center;
margin-top: 12px;
color: var(--error-color);
font-size: 12px;
}
103 changes: 60 additions & 43 deletions packages/sdk-react/src/components/auth/OtpVerification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { formatPhoneNumber } from "./utils";
import { otpAuth } from "../../actions";
import EmailIcon from "@mui/icons-material/Email";
import SmsIcon from "@mui/icons-material/Sms";
import { CircularProgress } from "@mui/material";
interface OtpVerificationProps {
type: string;
contact: string;
Expand All @@ -28,12 +29,13 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({
onResendCode,
}) => {
const [otpError, setOtpError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [resendText, setResendText] = useState("Resend code");
const otpInputRef = useRef<any>(null);

const handleValidateOtp = async (otp: string) => {
setOtpError(null);

setIsLoading(true)
try {
const authResponse = await otpAuth({
suborgID: suborgId,
Expand All @@ -45,12 +47,13 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({
if (authResponse?.credentialBundle) {
await onValidateSuccess(authResponse.credentialBundle);
} else {
setOtpError("Invalid code. Please try again");
setOtpError("Invalid code. Please try again.");
}
otpInputRef.current.resetOtp();
} catch (error) {
setOtpError("An error occurred. Please try again.");
}
setIsLoading(false)
};

const handleResendCode = async () => {
Expand All @@ -72,52 +75,66 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({

return (
<div className={styles.verification}>
<div className={styles.verificationIcon}>
{type === "otpEmail" ? (
<EmailIcon
sx={{
fontSize: "86px",
color: "var(--accent-color)",
}}
/>
) : (
<SmsIcon
sx={{
fontSize: "86px",
color: "var(--accent-color)",
}}
{isLoading && (
<div className={styles.loadingWrapper}>
<CircularProgress
size={80}
thickness={1}
className={styles.circularProgress!}
/>
)}
</div>

<span>
Enter the 6-digit code we {type === "otpEmail" ? "emailed" : "sent"} to{" "}
<span className={styles.verificationBold}>
{type === "otpEmail" ? contact : formatPhoneNumber(contact)}
</span>
</span>

<OtpInput
ref={otpInputRef}
onComplete={handleValidateOtp}
hasError={!!otpError}
/>

<div className={styles.errorText}>{otpError ? otpError : " "}</div>

<div className={styles.resendCode}>
<span
onClick={resendText === "Resend code" ? handleResendCode : undefined}
style={{
cursor: resendText === "Resend code" ? "pointer" : "not-allowed",
}}
className={styles.resendCodeBold}
>
{resendText}
</div>
)}
<div className={styles.contentWrapper} style={{ opacity: isLoading ? 0.5 : 1 }}>
<div className={styles.verificationIcon}>
{type === "otpEmail" ? (
<EmailIcon
sx={{
fontSize: "86px",
color: "var(--accent-color)",
}}
/>
) : (
<SmsIcon
sx={{
fontSize: "86px",
color: "var(--accent-color)",
}}
/>
)}
</div>

<span>
Enter the 6-digit code we {type === "otpEmail" ? "emailed" : "sent"} to{" "}
<span className={styles.verificationBold}>
{type === "otpEmail" ? contact : formatPhoneNumber(contact)}
</span>
</span>

<div className={styles.otpInputWrapper}>
<OtpInput
ref={otpInputRef}
onComplete={handleValidateOtp}
hasError={!!otpError}
/>
</div>

<div className={styles.errorText}>{otpError ? otpError : " "}</div>

<div className={styles.resendCode}>
<span
onClick={resendText === "Resend code" ? handleResendCode : undefined}
style={{
cursor: resendText === "Resend code" ? "pointer" : "not-allowed",
}}
className={styles.resendCodeBold}
>
{resendText}
</span>
</div>
</div>
</div>
);

};

export default OtpVerification;
Loading

0 comments on commit aad2199

Please sign in to comment.