Skip to content

Commit

Permalink
fix: error handling, dark mode, consent bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Siddharth committed Oct 22, 2023
1 parent 52b4a31 commit e70c0f5
Show file tree
Hide file tree
Showing 29 changed files with 593 additions and 317 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,10 @@ const PrimaryButton: React.FC<PrimaryButtonProps> = ({
disabled={loadOrDisable}
{...buttonProps}
className={`flex-1 ${
!loadOrDisable ? "bg-orange-500" : "bg-orange-600"
} text-white p-2 rounded-lg text-sm hover:bg-orange-600`}
!loadOrDisable
? "bg-[var(--primaryButtonBackground)]"
: "bg-[var(--primaryButtonBackground)]"
} text-[var(--primaryButtonFont)] p-2 rounded-lg text-sm hover:bg-[var(--primaryButtonBackground)]`}
>
{loadOrDisable ? <Loader size="15px" /> : children}
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const SecondaryButton: React.FC<SecondaryButtonProps> = ({
<button
disabled={pending || disabled}
{...buttonProps}
className={`flex-1 border-orange-500 bg-transparent text-gray-800 p-2 rounded-lg text-sm border-2 transition-all duration-300 ease-in-out hover:bg-orange-500 hover:text-white hover:border-transparent`}
className={`flex-1 border-[var(--primaryButtonBackground)] bg-transparent text-[var(--inputColor)] p-2 rounded-lg text-sm border-2 transition-all duration-300 ease-in-out hover:bg-[var(--primaryButtonBackground)] hover:text-[var(--primaryButtonFont)] hover:border-transparent`}
>
{children}
</button>
Expand Down
47 changes: 35 additions & 12 deletions apps/consent/app/components/captcha-challenge/index.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,37 @@
"use client";
import { sendPhoneCode } from "@/app/login/phone/server-actions";
import { env } from "@/env";
import { memo, useCallback, useEffect } from "react";
import { toast } from "react-toastify";

declare global {
interface Window {
initGeetest: (options: any, callback: (captchaObj: any) => void) => void;
}
}

const CaptchaChallengeComponent: React.FC<{
id: string;
challenge: string;
formData: {
login_challenge: string;
phone: string;
remember: string;
channel: string ;
};
}> = ({ id, challenge, formData }) => {
const sendMockData = async () => {
const mockCaptchaResult = {
geetest_challenge: "mockChallenge",
geetest_validate: "mockValidate",
geetest_seccode: "mockSecCode",
};
const res = await sendPhoneCode(mockCaptchaResult, formData);
if (res?.error) {
toast.error(res.message);
}
};

const captchaHandler = useCallback(
(captchaObj: any) => {
const onSuccess = async () => {
Expand All @@ -35,18 +55,21 @@ const CaptchaChallengeComponent: React.FC<{
);

useEffect(() => {
// @ts-ignore
window.initGeetest(
{
gt: id,
challenge: challenge,
offline: false,
new_captcha: true,
product: "bind",
lang: "en",
},
captchaHandler
);
if (env.NODE_ENV === "development") {
sendMockData();
} else {
window.initGeetest(
{
gt: id,
challenge: challenge,
offline: false,
new_captcha: true,
product: "bind",
lang: "en",
},
captchaHandler
);
}
}, [captchaHandler, id, challenge]);

return <div data-testid="captcha_container" id="captcha"></div>;
Expand Down
6 changes: 2 additions & 4 deletions apps/consent/app/components/card/card.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,9 @@

@media (min-width: 768px) {
.card {
background-color: white;
background-color: var(--backgroundColor);
border-radius: 0.5rem;
box-shadow:
rgba(0, 0, 0, 0.144) 0px 1px 3px 0px,
rgba(27, 31, 35, 0.144) 0px 0px 0px 1px;
box-shadow: var(--shadow);
width: auto;
margin: auto;
width: 25em;
Expand Down
32 changes: 24 additions & 8 deletions apps/consent/app/components/input-component.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,37 @@
import React, { InputHTMLAttributes } from "react"
import React, { InputHTMLAttributes } from "react";

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
label?: string
id: string
label?: string;
id: string;
}

const InputComponent: React.FC<InputProps> = ({ label, id, ...inputProps }) => {
return (
<div className="mb-4">
{label ? (
<label htmlFor={id} className="block mb-2 text-sm font-medium text-gray-900">
<label
htmlFor={id}
className="block mb-2 text-sm font-medium text-[var(--inputColor)]"
>
{label}
</label>
) : null}
<input {...inputProps} id={id} className="p-2 border rounded w-full" />
<input
{...inputProps}
id={id}
className="p-2
border-2
border-solid
border-gray-300
rounded-sm
mb-
w-full
bg-[var(--inputBackground)]
focus-within:border-blue-500
focus-within:bg-[var(--inputBackground)] "
/>
</div>
)
}
);
};

export default InputComponent
export default InputComponent;
59 changes: 55 additions & 4 deletions apps/consent/app/components/logo/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,62 @@
import React from "react";
import Image from "next/image";

const Logo: React.FC = () => {
return (
<div className="flex justify-center mb-4">
<Image src="/blink_logo.svg" alt="Galoy" width={120} height={120} />
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlSpace="preserve"
id="Layer_1"
viewBox="0 0 769 233.4"
width={100}
height={40}
style={{
marginBottom: "1em",
display:"flex",
justifyContent:"center",
alignItems:"center",
margin:"1em auto",
}}
>
<style>{".st1{fill:var(--inputColor)}"}</style>
<linearGradient
id="SVGID_1_"
x1={44.737}
x2={188.696}
y1={23.937}
y2={207.7}
gradientTransform="matrix(1 0 0 -1 0 232.54)"
gradientUnits="userSpaceOnUse"
>
<stop
offset={0}
style={{
stopColor: "#febe13",
}}
/>
<stop
offset={0.5}
style={{
stopColor: "#ef8b22",
}}
/>
<stop
offset={1}
style={{
stopColor: "#f15822",
}}
/>
</linearGradient>
<path
d="M145.1 3.5c-.1 0-.2-.1-.3-.1-9.4-2.3-18.9-3.4-28.2-3.4C64.2 0 16.6 35.5 3.5 88.6-12.1 151.2 26.1 214.5 88.6 230c9.4 2.3 18.9 3.5 28.2 3.5 52.4 0 100-35.5 113.2-88.6 15.5-62.5-22.5-125.7-84.9-141.4zm75.7 139c-11.9 48-54.7 81.5-104 81.5-8.7 0-17.4-1.1-25.9-3.2-27.8-6.9-51.3-24.2-66.1-48.7S5.7 118.7 12.6 90.9C24.5 43 67.3 9.5 116.7 9.4c8.7 0 17.4 1.1 26 3.2h.2C200 27.1 235 85.3 220.8 142.5z"
style={{
fill: "url(#SVGID_1_)",
}}
/>
<path
d="M141 101.1c-3.4 13.4-23.8 6.5-30.4 4.9l5.9-23.5c6.5 1.6 27.9 4.7 24.5 18.6zm-3.6 37.9c-3.6 14.6-28.2 6.7-36.2 4.7l6.5-25.9c7.9 2 33.5 6 29.7 21.2zm26.8-37.7c2.1-14.3-8.8-21.9-23.5-27l4.8-19.3-11.8-3-4.7 18.8c-3.1-.8-6.3-1.5-9.4-2.2l4.7-19-11.8-2.9-4.8 19.3-7.5-1.7-16.3-4.1-3.1 12.6s8.1 2 8.6 2.1c2.6.5 5.8 3.4 5.5 6.7l-13.2 52.9c-.7 2.3-3.1 3.5-5.4 2.8-.3-.1-8.6-2.1-8.6-2.1l-5.8 13.4 15.3 3.8 8.4 2.2-4.9 19.5 11.8 3 4.8-19.3c3.2.9 6.3 1.7 9.4 2.4l-4.8 19.4 11.8 2.9 4.9-19.5c20.1 3.8 35.2 2.3 41.5-15.9 5.1-14.6-.3-23-10.8-28.5 7.6-1.8 13.3-6.7 14.9-17.3zM337.4 81.3c7.3 0 13.6 1.3 18.9 3.9 5.3 2.6 9.7 6.1 13.2 10.5s6.1 9.6 7.8 15.5c1.7 5.9 2.5 12.3 2.5 19.2 0 10.5-1.9 20.4-5.8 29.8s-9.2 17.5-15.9 24.4-14.6 12.4-23.7 16.4c-9.1 4-19 6-29.7 6-1.4 0-3.8 0-7.2-.1-3.4-.1-7.3-.4-11.8-1s-9.1-1.5-14-2.7c-4.9-1.2-9.6-2.9-14-5l39.5-165.8 35.4-5.5-14.1 58.9c3-1.4 6.1-2.4 9.1-3.2 3-.9 6.3-1.3 9.8-1.3zm-29.6 97.6c5.3 0 10.3-1.3 15.1-3.9 4.7-2.6 8.8-6 12.2-10.4 3.4-4.3 6.1-9.2 8.1-14.7s3-11.2 3-17.1c0-7.3-1.2-13-3.6-17.1-2.4-4.1-6.9-6.2-13.5-6.2-2.1 0-4.9.4-8.3 1.1-3.4.8-6.5 2.4-9.2 4.8L296.4 178c.9.1 1.7.3 2.4.5.7.1 1.4.3 2.2.3.8.1 1.7.1 2.7.1h4.1zM434.1 206.1c-10.8 0-19.3-1.4-25.4-4.2-6.2-2.8-10.6-6.6-13.2-11.5s-4-10.5-3.9-16.8c.1-6.3 1-13 2.6-20.2l29-121.1 35.4-5.5-31.7 131.4c-.6 2.7-1 5.3-1 7.5s.3 4.3 1.3 6c.9 1.8 2.5 3.2 4.7 4.2 2.2 1.1 5.3 1.8 9.2 2l-7 28.2zM485.5 203.8h-33.8l28.5-120h34l-28.7 120zM539.3 89.3c2.6-.8 5.4-1.6 8.5-2.6 3.1-1 6.6-1.9 10.5-2.7 3.9-.8 8.2-1.5 13-2.1 4.8-.5 10.2-.8 16.3-.8 17.9 0 30.3 5.2 37 15.5 6.7 10.3 7.8 24.5 3.4 42.4l-15.5 64.8h-34l15.1-63.4c.9-3.9 1.6-7.8 2.2-11.5.5-3.7.5-7-.1-9.8-.6-2.8-2-5.1-4.2-6.8-2.2-1.8-5.6-2.6-10.2-2.6-4.4 0-8.9.5-13.5 1.4l-22.1 92.8h-34l27.6-114.6zM684.1 127.1c9.1-7.3 17.7-14.8 25.8-22.4 8.1-7.6 15-14.6 20.8-21H769c-8.5 9.4-17.4 18.7-26.6 27.7s-19.7 18.7-31.6 28.9c3.2 4 6.4 8.5 9.7 13.7 3.3 5.2 6.4 10.6 9.3 16.2 3 5.6 5.7 11.3 8.2 17.1 2.5 5.8 4.6 11.3 6.3 16.4h-37.9c-1.4-4-3.1-8.3-5.1-13s-4.3-9.4-6.8-14-5.1-9.2-7.9-13.6-5.5-8.4-8.2-11.9l-12.8 52.5h-33.8L673 32.3l35.4-5.5-24.3 100.3zM526.2 47.6c0 3.2-.6 6.1-1.8 8.8-1.2 2.7-2.8 5.1-4.9 7.2-2.1 2-4.5 3.6-7.3 4.9-2.8 1.2-5.8 1.8-8.9 1.8-3.2 0-6.1-.6-8.9-1.8-2.8-1.2-5.2-2.8-7.2-4.9-2-2-3.7-4.4-4.9-7.2-1.2-2.7-1.8-5.7-1.8-8.8 0-3.1.6-6 1.8-8.8s2.8-5.2 4.9-7.2 4.4-3.7 7.2-4.9c2.8-1.2 5.8-1.8 8.9-1.8s6.1.6 8.9 1.8 5.2 2.8 7.3 4.9c2.1 2 3.7 4.4 4.9 7.2s1.8 5.7 1.8 8.8z"
className="st1"
/>
</svg>
);
};

Expand Down
4 changes: 2 additions & 2 deletions apps/consent/app/components/main-container/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ interface MainContentProps {

const MainContent: React.FC<MainContentProps> = ({ children }) => {
return (
<main className="min-h-screen flex items-start md:items-center justify-center p-1 md:p-4">
<main className="min-h-screen flex items-start md:items-center justify-center p-1 md:p-4 bg-[var(--backgroundColor)]">
{children}
</main>
)
);
}

export default MainContent
11 changes: 11 additions & 0 deletions apps/consent/app/components/next-themes-provider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
"use client";
import React, { ReactNode } from "react";
import { ThemeProvider } from "next-themes";

interface Props {
children: ReactNode;
}

export default function Theme({ children }: Props) {
return <ThemeProvider defaultTheme="system">{children}</ThemeProvider>;
}
4 changes: 3 additions & 1 deletion apps/consent/app/components/scope-item/scope-item.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@
border-radius: 0.5rem;
margin-bottom: 0.5em;
position: relative;
color: var(--inputColor);
background-color: var(--inputBackground);
}

.custom_label {
position: relative;
cursor: pointer;
flex-grow: 1;
flex-grow: 1;
}

.text-gray-700 {
Expand Down
47 changes: 47 additions & 0 deletions apps/consent/app/components/select.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React, { SelectHTMLAttributes } from "react";

interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
label?: string;
id: string;
options: string[];
}

const SelectComponent: React.FC<SelectProps> = ({
label,
id,
options,
...selectProps
}) => {
return (
<div className="mb-4">
{label ? (
<label
htmlFor={id}
className="block mb-2 text-sm font-medium text-[var(--inputColor)]"
>
{label}
</label>
) : null}
<select
{...selectProps}
id={id}
className="p-2
border-2
border-solid
border-gray-300
rounded-sm
w-full
bg-[var(--inputBackground)]
focus:border-blue-500 "
>
{options.map((option, index) => (
<option key={index} value={option}>
{option}
</option>
))}
</select>
</div>
);
};

export default SelectComponent;
6 changes: 3 additions & 3 deletions apps/consent/app/components/separator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ const Separator: React.FC<SeparatorProps> = ({ children }) => {
return (
<div className="relative flex items-center justify-center mb-4">
<div className="absolute inset-y-0 left-0 flex items-center justify-center w-1/2">
<div className="h-px bg-gray-300 w-full"></div>
<div className="h-px bg-[var(--inputSecondary)] w-full"></div>
</div>
<span className="relative z-10 bg-white px-2 text-gray-500 text-sm ">
<span className="relative z-10 bg-[var(--backgroundColor)] px-2 text-[var(--inputSecondary)] text-sm ">
{children}
</span>
<div className="absolute inset-y-0 right-0 flex items-center justify-center w-1/2">
<div className="h-px bg-gray-300 w-full"></div>
<div className="h-px bg-[var(--inputSecondary)] w-full"></div>
</div>
</div>
);
Expand Down
Loading

0 comments on commit e70c0f5

Please sign in to comment.