improvements to account style

This commit is contained in:
James Pine 2024-10-12 00:57:34 -07:00
parent 2d2ecbf18d
commit 06e227d17a
4 changed files with 17 additions and 7 deletions

View File

@ -62,12 +62,8 @@ export const Component = () => {
</>
}
/>
<div className={clsx(userInfo != null ? '' : 'flex items-center justify-center')}>
<div
className={clsx(
userInfo != null ? '' : 'w-full max-w-md space-y-8 p-8 text-center lg:p-12'
)}
>
<div className={clsx(userInfo != null ? '' : 'flex')}>
<div className={clsx(userInfo != null ? '' : 'w-full max-w-md text-center')}>
{userInfo === null ? (
<>
<Authentication reload={setReload} cloudBootstrap={cloudBootstrap} />

View File

@ -7,7 +7,7 @@ import clsx from 'clsx';
import { motion } from 'framer-motion';
import { Dispatch, SetStateAction, useState } from 'react';
import { getAuthorisationURLWithQueryParamsAndSetState } from 'supertokens-web-js/recipe/thirdparty';
import { Card, toast } from '@sd/ui';
import { Card, Divider, toast } from '@sd/ui';
import { Icon as Logo } from '~/components';
import { useIsDark } from '~/hooks';
@ -138,6 +138,9 @@ export const Authentication = ({
) : (
<Register />
)}
<div className="text-center text-sm text-ink-faint">
Social auth and SSO (Single Sign On) available soon!
</div>
{/* Optionally, uncomment the social login block when ready */}
{/* <div className="flex items-center w-full gap-3 my-4">
<Divider />

View File

@ -140,6 +140,7 @@ const LoginForm = ({ reload, cloudBootstrap, setContinueWithEmail }: LoginProps)
placeholder="johndoe@gmail.com"
error={Boolean(form.formState.errors.email?.message)}
type="email"
size="md"
disabled={form.formState.isSubmitting}
className="w-full"
/>
@ -162,6 +163,7 @@ const LoginForm = ({ reload, cloudBootstrap, setContinueWithEmail }: LoginProps)
<Input
{...field}
placeholder="Password"
size="md"
error={Boolean(form.formState.errors.password?.message)}
className="w-full"
disabled={form.formState.isSubmitting}
@ -190,6 +192,7 @@ const LoginForm = ({ reload, cloudBootstrap, setContinueWithEmail }: LoginProps)
type="submit"
className={clsx('mx-auto mt-3 w-full border-none')}
variant="accent"
size="md"
onClick={form.handleSubmit(async (data) => {
await signInClicked(data.email, data.password, reload, cloudBootstrap);
})}
@ -207,6 +210,7 @@ const LoginForm = ({ reload, cloudBootstrap, setContinueWithEmail }: LoginProps)
<Button
variant="gray"
className="w-full"
size="md"
onClick={() => {
form.reset();
setContinueWithEmail(true);
@ -256,6 +260,7 @@ const ContinueWithEmail = ({ setContinueWithEmail, reload, cloudBootstrap }: Pro
<Input
{...field}
type="email"
size="md"
className="w-full"
placeholder="johndoe@gmail.com"
error={Boolean(
@ -272,6 +277,7 @@ const ContinueWithEmail = ({ setContinueWithEmail, reload, cloudBootstrap }: Pro
</div>
<Button
type="submit"
size="md"
className="mx-auto mt-3 w-full border-none"
variant="accent"
onClick={() => {}}
@ -296,6 +302,7 @@ const ContinueWithEmail = ({ setContinueWithEmail, reload, cloudBootstrap }: Pro
)}
<Button
variant="subtle"
size="md"
className="mt-5 flex w-full justify-center gap-1.5"
onClick={() => {
if (step === 2) return setStep(1);

View File

@ -112,6 +112,7 @@ const Register = () => {
className="w-full"
error={Boolean(form.formState.errors.email?.message)}
type="email"
size="md"
disabled={form.formState.isSubmitting}
/>
)}
@ -135,6 +136,7 @@ const Register = () => {
placeholder="Password"
error={Boolean(form.formState.errors.password?.message)}
className="w-full"
size="md"
disabled={form.formState.isSubmitting}
type={showPassword ? 'text' : 'password'}
onPaste={(e) => {
@ -162,6 +164,7 @@ const Register = () => {
<Input
{...field}
placeholder="Confirm password"
size="md"
error={Boolean(form.formState.errors.confirmPassword?.message)}
className="w-full"
disabled={form.formState.isSubmitting}
@ -184,6 +187,7 @@ const Register = () => {
<Button
type="submit"
className={clsx('mx-auto mt-3 w-full border-none')}
size="md"
variant="accent"
onClick={form.handleSubmit(async (data) => {
console.log(data);