diff --git a/apps/consent/app/components/input-component.tsx b/apps/consent/app/components/input-component.tsx index 1df23590fb..7d46e779f9 100644 --- a/apps/consent/app/components/input-component.tsx +++ b/apps/consent/app/components/input-component.tsx @@ -23,7 +23,7 @@ const InputComponent: React.FC = ({ label, id, ...inputProps }) => { border-1 border-solid border-gray-300 - rounded-sm + rounded-md mb- w-full bg-[var(--inputBackground)] diff --git a/apps/consent/app/components/login-link.tsx b/apps/consent/app/components/login-link.tsx new file mode 100644 index 0000000000..82d6b5d939 --- /dev/null +++ b/apps/consent/app/components/login-link.tsx @@ -0,0 +1,25 @@ +import React from "react" +import Link from "next/link" + +type LoginLinkProp = { + href: string +} + +const LoginLink: React.FC = ({ href }) => { + return ( +
+
+ +

+ Already have an Account?{" "} + + Login Here. + +

+ +
+
+ ) +} + +export default LoginLink diff --git a/apps/consent/app/components/phone-auth/index.tsx b/apps/consent/app/components/phone-auth/index.tsx new file mode 100644 index 0000000000..5a1c9b5dde --- /dev/null +++ b/apps/consent/app/components/phone-auth/index.tsx @@ -0,0 +1,65 @@ +import { redirect } from "next/navigation" +import React from "react" + +import PhoneAuthForm from "./phone-auth-form" + +import { getSupportedCountryCodes } from "@/app/graphql/queries/get-supported-countries" + +import { hydraClient } from "@/services/hydra" +import Card from "@/app/components/card" +import MainContent from "@/app/components/main-container" +import Logo from "@/app/components/logo" +import Heading from "@/app/components/heading" +import SubHeading from "@/app/components/sub-heading" + +interface PhoneAuth { + login_challenge: string + authAction: "Register" | "Login" +} + +const PhoneAuth = async ({ login_challenge, authAction }: PhoneAuth) => { + if (!login_challenge) { + throw new Error("Invalid Request") + } + + const { data: body } = await hydraClient.getOAuth2LoginRequest({ + loginChallenge: login_challenge, + }) + + if (body.skip) { + const { data: response } = await hydraClient.acceptOAuth2LoginRequest({ + loginChallenge: login_challenge, + acceptOAuth2LoginRequest: { + subject: String(body.subject), + }, + }) + redirect(String(response.redirect_to)) + } + + const countries = await getSupportedCountryCodes() + if (!countries) { + throw new Error("Unable to get Countries") + } + + const countryCodes = countries.map((country) => country.id) + const subHeadingMessage = + authAction === "Register" + ? "Enter your phone number to register with Blink and log in to this application." + : "Enter your phone number to log in to this application." + + return ( + + + + {authAction} In with Blink + {subHeadingMessage} + + + + ) +} +export default PhoneAuth diff --git a/apps/consent/app/login/phone/form.tsx b/apps/consent/app/components/phone-auth/phone-auth-form.tsx similarity index 77% rename from apps/consent/app/login/phone/form.tsx rename to apps/consent/app/components/phone-auth/phone-auth-form.tsx index 80710dd2e6..25d8d92bcb 100644 --- a/apps/consent/app/login/phone/form.tsx +++ b/apps/consent/app/components/phone-auth/phone-auth-form.tsx @@ -12,9 +12,11 @@ import { E164Number } from "libphonenumber-js/types" // @ts-ignore-next-line error import { experimental_useFormState as useFormState } from "react-dom" -import { getCaptchaChallenge } from "./server-actions" +import LoginLink from "../login-link" -import { GetCaptchaChallengeResponse } from "./phone-login.types" +import { getCaptchaChallenge } from "@/app/login/phone/server-actions" + +import { GetCaptchaChallengeResponse } from "@/app/types/phone-auth.types" import PrimaryButton from "@/app/components/button/primary-button-component" import SecondaryButton from "@/app/components/button/secondary-button-component" @@ -23,7 +25,7 @@ import { CaptchaChallenge } from "@/app/components/captcha-challenge" import FormComponent from "@/app/components/form-component" import Separator from "@/app/components/separator" -import { SubmitValue } from "@/app/index.types" +import { SubmitValue } from "@/app/types/index.types" // eslint-disable-next-line import/no-unassigned-import import "react-phone-number-input/style.css" // eslint-disable-next-line import/no-unassigned-import @@ -31,14 +33,21 @@ import "./phone-input-styles.css" import SelectComponent from "@/app/components/select" -interface LoginFormProps { +import RegisterLink from "@/app/components/register-link" + +interface AuthFormProps { + authAction: "Register" | "Login" login_challenge: string // eslint-disable-next-line @typescript-eslint/no-explicit-any countryCodes: any } // TODO need to add country call codes -const LoginForm: React.FC = ({ login_challenge, countryCodes }) => { +const PhoneAuthForm: React.FC = ({ + login_challenge, + countryCodes, + authAction, +}) => { const [phoneNumber, setPhoneNumber] = useState("") //TODO useFormState is not giving type suggestions/errors i.e: not typed const [state, formAction] = useFormState( @@ -121,15 +130,19 @@ const LoginForm: React.FC = ({ login_challenge, countryCodes }) Remember me - or - -
-
- -

Sign in with Email

- -
-
+ + {authAction === "Register" ? null : ( + <> + or +
+
+ +

Sign in with Email

+ +
+
+ + )}
= ({ login_challenge, countryCodes })
+ {authAction === "Register" ? ( + + ) : ( + + )} ) } -export default LoginForm +export default PhoneAuthForm diff --git a/apps/consent/app/login/phone/phone-input-styles.css b/apps/consent/app/components/phone-auth/phone-input-styles.css similarity index 100% rename from apps/consent/app/login/phone/phone-input-styles.css rename to apps/consent/app/components/phone-auth/phone-input-styles.css diff --git a/apps/consent/app/components/register-link.tsx b/apps/consent/app/components/register-link.tsx new file mode 100644 index 0000000000..3ed9afee94 --- /dev/null +++ b/apps/consent/app/components/register-link.tsx @@ -0,0 +1,25 @@ +import React from "react" +import Link from "next/link" + +type RegisterLinkProp = { + href: string +} + +const RegisterLink: React.FC = ({ href }) => { + return ( +
+
+ +

+ Don't have an Account?{" "} + + Register Here. + +

+ +
+
+ ) +} + +export default RegisterLink diff --git a/apps/consent/app/components/select.tsx b/apps/consent/app/components/select.tsx index cf56d517cf..ef9362b5c1 100644 --- a/apps/consent/app/components/select.tsx +++ b/apps/consent/app/components/select.tsx @@ -29,7 +29,7 @@ const SelectComponent: React.FC = ({ border-1 border-solid border-gray-300 - rounded-sm + rounded-md w-full bg-[var(--inputBackground)] focus:border-blue-500 " diff --git a/apps/consent/app/consent/page.tsx b/apps/consent/app/consent/page.tsx index 3cee7b34ab..2815b3a33b 100644 --- a/apps/consent/app/consent/page.tsx +++ b/apps/consent/app/consent/page.tsx @@ -10,7 +10,7 @@ import ScopeItem from "../components/scope-item/scope-item" import PrimaryButton from "../components/button/primary-button-component" import SecondaryButton from "../components/button/secondary-button-component" import Heading from "../components/heading" -import { SubmitValue } from "../index.types" +import { SubmitValue } from "../types/index.types" interface ConsentProps { consent_challenge: string diff --git a/apps/consent/app/globals.css b/apps/consent/app/globals.css index 182e238a47..7511ad4325 100644 --- a/apps/consent/app/globals.css +++ b/apps/consent/app/globals.css @@ -54,7 +54,7 @@ --primaryButtonFont: var(--black); --inputBackground: var(--darkGrey); --inputColor: var(--white); - --inputSecondary: var(--grey4); + --inputSecondary: var(--grey3); --shadow: rgba(255, 255, 255, 0.144) 0px 1px 3px 0px, rgba(227, 231, 235, 0.144) 0px 0px 0px 1px; diff --git a/apps/consent/app/login/email-login-form.tsx b/apps/consent/app/login/email-login-form.tsx index 34632f2130..5131cfc69f 100644 --- a/apps/consent/app/login/email-login-form.tsx +++ b/apps/consent/app/login/email-login-form.tsx @@ -11,9 +11,12 @@ import FormComponent from "../components/form-component" import Separator from "../components/separator" import PrimaryButton from "../components/button/primary-button-component" import SecondaryButton from "../components/button/secondary-button-component" -import { SubmitValue } from "../index.types" +import RegisterLink from "../components/register-link" + +import { SubmitValue } from "../types/index.types" import { submitForm } from "./email-login-server-action" + interface LoginProps { login_challenge: string } @@ -30,63 +33,67 @@ const EmailLoginForm = ({ login_challenge }: LoginProps) => { } return ( - - - -
- -
- or -
-
- + + + +
+ +
+ or +
+
+ +

Sign in with phone

+ +
+
+ +
+ + Next + + -

Sign in with phone

- + Cancel +
-
-
- - Next - - - Cancel - -
- + + + ) } export default EmailLoginForm diff --git a/apps/consent/app/login/email-login-server-action.ts b/apps/consent/app/login/email-login-server-action.ts index 3d0adf0fbb..3190ad4e3e 100644 --- a/apps/consent/app/login/email-login-server-action.ts +++ b/apps/consent/app/login/email-login-server-action.ts @@ -3,7 +3,7 @@ import { redirect } from "next/navigation" import { cookies, headers } from "next/headers" import { hydraClient } from "../../services/hydra" -import { LoginType, SubmitValue } from "../index.types" +import { LoginType, SubmitValue } from "../types/index.types" import { LoginEmailResponse } from "./email-login.types" diff --git a/apps/consent/app/login/email-login.types.ts b/apps/consent/app/login/email-login.types.ts index 7b865f1df0..6f7db534c1 100644 --- a/apps/consent/app/login/email-login.types.ts +++ b/apps/consent/app/login/email-login.types.ts @@ -1,3 +1,3 @@ -import { ServerActionResponse } from "../index.types" +import { ServerActionResponse } from "../types/index.types" type LoginEmailBody = null export interface LoginEmailResponse extends ServerActionResponse {} diff --git a/apps/consent/app/login/phone/page.tsx b/apps/consent/app/login/phone/page.tsx index e7ff3626bb..3c6cf3eb55 100644 --- a/apps/consent/app/login/phone/page.tsx +++ b/apps/consent/app/login/phone/page.tsx @@ -1,15 +1,6 @@ -import { redirect } from "next/navigation" import React from "react" -import LoginForm from "./form" - -import { hydraClient } from "@/services/hydra" -import Card from "@/app/components/card" -import MainContent from "@/app/components/main-container" -import Logo from "@/app/components/logo" -import Heading from "@/app/components/heading" -import SubHeading from "@/app/components/sub-heading" -import { getSupportedCountryCodes } from "@/app/graphql/queries/get-supported-countries" +import PhoneAuth from "@/app/components/phone-auth" interface LoginProps { login_challenge: string @@ -17,41 +8,7 @@ interface LoginProps { const Login = async ({ searchParams }: { searchParams: LoginProps }) => { const { login_challenge } = searchParams - - if (!login_challenge) { - throw new Error("Invalid Request") - } - - const { data: body } = await hydraClient.getOAuth2LoginRequest({ - loginChallenge: login_challenge, - }) - - if (body.skip) { - const { data: response } = await hydraClient.acceptOAuth2LoginRequest({ - loginChallenge: login_challenge, - acceptOAuth2LoginRequest: { - subject: String(body.subject), - }, - }) - redirect(String(response.redirect_to)) - } - - const countries = await getSupportedCountryCodes() - if (!countries) { - throw new Error("Unable to get Countries") - } - - const countryCodes = countries.map((country) => country.id) - - return ( - - - - Sign In with Blink - Enter your Phone Number to sign in to this Application. - - - - ) + const authAction = "Login" + return } export default Login diff --git a/apps/consent/app/login/phone/server-actions.ts b/apps/consent/app/login/phone/server-actions.ts index 414f273b9b..d7f3b9e851 100644 --- a/apps/consent/app/login/phone/server-actions.ts +++ b/apps/consent/app/login/phone/server-actions.ts @@ -3,9 +3,12 @@ import { cookies, headers } from "next/headers" import { redirect } from "next/navigation" import { isValidPhoneNumber } from "libphonenumber-js" -import { GetCaptchaChallengeResponse, SendPhoneCodeResponse } from "./phone-login.types" +import { + GetCaptchaChallengeResponse, + SendPhoneCodeResponse, +} from "@/app/types/phone-auth.types" -import { LoginType, SubmitValue } from "@/app/index.types" +import { LoginType, SubmitValue } from "@/app/types/index.types" import authApi from "@/services/galoy-auth" import { hydraClient } from "@/services/hydra" import { handleAxiosError } from "@/app/error-handler" diff --git a/apps/consent/app/login/verification/page.tsx b/apps/consent/app/login/verification/page.tsx index d9113b7289..cc5a5cdfdd 100644 --- a/apps/consent/app/login/verification/page.tsx +++ b/apps/consent/app/login/verification/page.tsx @@ -6,7 +6,7 @@ import VerificationForm from "./form" import MainContent from "@/app/components/main-container" import Card from "@/app/components/card" import Logo from "@/app/components/logo" -import { LoginType } from "@/app/index.types" +import { LoginType } from "@/app/types/index.types" interface VerificationProps { login_challenge: string diff --git a/apps/consent/app/login/verification/server-actions.ts b/apps/consent/app/login/verification/server-actions.ts index e3b3c6180f..d6f38babac 100644 --- a/apps/consent/app/login/verification/server-actions.ts +++ b/apps/consent/app/login/verification/server-actions.ts @@ -5,7 +5,7 @@ import { redirect } from "next/navigation" import { handleAxiosError } from "@/app/error-handler" import { getUserId } from "@/app/graphql/queries/me-query" -import { LoginType } from "@/app/index.types" +import { LoginType } from "@/app/types/index.types" import authApi from "@/services/galoy-auth" import { hydraClient } from "@/services/hydra" diff --git a/apps/consent/app/register/page.tsx b/apps/consent/app/register/page.tsx new file mode 100644 index 0000000000..f23c53b4e7 --- /dev/null +++ b/apps/consent/app/register/page.tsx @@ -0,0 +1,14 @@ +import React from "react" + +import PhoneAuth from "@/app/components/phone-auth" + +interface LoginProps { + login_challenge: string +} + +const Login = async ({ searchParams }: { searchParams: LoginProps }) => { + const { login_challenge } = searchParams + const authAction = "Register" + return +} +export default Login diff --git a/apps/consent/app/index.types.ts b/apps/consent/app/types/index.types.ts similarity index 100% rename from apps/consent/app/index.types.ts rename to apps/consent/app/types/index.types.ts diff --git a/apps/consent/app/login/phone/phone-login.types.ts b/apps/consent/app/types/phone-auth.types.ts similarity index 89% rename from apps/consent/app/login/phone/phone-login.types.ts rename to apps/consent/app/types/phone-auth.types.ts index 523ae5b0b7..c23fd03cba 100644 --- a/apps/consent/app/login/phone/phone-login.types.ts +++ b/apps/consent/app/types/phone-auth.types.ts @@ -1,4 +1,4 @@ -import { ServerActionResponse } from "../../index.types" +import { ServerActionResponse } from "./index.types" interface GetCaptchaChallengeBody { id: string | null