mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-02 00:55:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix tabs rendering verticaly bug

Browse source
This commit is contained in:
Milo Schwartz 2024-11-24 00:12:38 -05:00
parent d7c4bc43a4
commit 4be535c08d
No known key found for this signature in database
2 changed files with 21 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/app/auth/resource/[resourceId]/components/ResourceAuthPortal.tsx
View file

@ -64,11 +64,14 @@ type ResourceAuthPortalProps = {
};
redirect: string;
queryParamName: string;
numMethods: number;
};
export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
const router = useRouter();
const numMethods = props.numMethods;
const [passwordError, setPasswordError] = useState<string | null>(null);
const [pincodeError, setPincodeError] = useState<string | null>(null);
const [accessDenied, setAccessDenied] = useState<boolean>(false);
@ -90,16 +93,6 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
const [activeTab, setActiveTab] = useState(getDefaultSelectedMethod());
const getColLength = () => {
let colLength = 0;
if (props.methods.pincode) colLength++;
if (props.methods.password) colLength++;
if (props.methods.sso) colLength++;
return colLength;
};
const [numMethods, setNumMethods] = useState(getColLength());
const pinForm = useForm<z.infer<typeof pinSchema>>({
resolver: zodResolver(pinSchema),
defaultValues: {
@ -125,9 +118,7 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
setLoadingLogin(true);
api.post<AxiosResponse<AuthWithPasswordResponse>>(
`/resource/${props.resource.id}/auth/pincode`,
{
pincode: values.pin,
},
{ pincode: values.pin },
)
.then((res) => {
const session = res.data.data.session;
@ -202,10 +193,17 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
<Tabs
value={activeTab}
onValueChange={setActiveTab}
orientation="horizontal"
>
{numMethods > 1 && (
<TabsList
className={`grid w-full grid-cols-${numMethods}`}
className={`grid w-full ${
numMethods === 1
? "grid-cols-1"
: numMethods === 2
? "grid-cols-2"
: "grid-cols-3"
}`}
>
{props.methods.pincode && (
<TabsTrigger value="pin">

9
src/app/auth/resource/[resourceId]/page.tsx
View file

@ -80,6 +80,14 @@ export default async function ResourceAuthPage(props: {
);
}
const getNumMethods = () => {
let colLength = 0;
if (authInfo.pincode) colLength++;
if (authInfo.password) colLength++;
if (authInfo.sso) colLength++;
return colLength;
};
return (
<>
<div className="w-full max-w-md">
@ -97,6 +105,7 @@ export default async function ResourceAuthPage(props: {
queryParamName={
process.env.RESOURCE_SESSION_QUERY_PARAM_NAME!
}
numMethods={getNumMethods()}
/>
</div>
</>