mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2025-12-11 20:15:30 +01:00
improvements to account style
This commit is contained in:
parent
2d2ecbf18d
commit
06e227d17a
@ -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} />
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user