Spaces:
Sleeping
Sleeping
File size: 4,483 Bytes
c40c75a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
"use client";
import React, { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import {
Card,
Title,
Text,
TextInput,
Callout,
Button,
Grid,
Col,
} from "@tremor/react";
import { RiAlarmWarningLine, RiCheckboxCircleLine } from "@remixicon/react";
import {
invitationClaimCall,
userUpdateUserCall,
getOnboardingCredentials,
claimOnboardingToken,
} from "@/components/networking";
import { jwtDecode } from "jwt-decode";
import { Form, Button as Button2, message } from "antd";
import { getCookie } from "@/utils/cookieUtils";
export default function Onboarding() {
const [form] = Form.useForm();
const searchParams = useSearchParams()!;
const token = getCookie('token');
const inviteID = searchParams.get("invitation_id");
const [accessToken, setAccessToken] = useState<string | null>(null);
const [defaultUserEmail, setDefaultUserEmail] = useState<string>("");
const [userEmail, setUserEmail] = useState<string>("");
const [userID, setUserID] = useState<string | null>(null);
const [loginUrl, setLoginUrl] = useState<string>("");
const [jwtToken, setJwtToken] = useState<string>("");
useEffect(() => {
if (!inviteID) {
return;
}
getOnboardingCredentials(inviteID).then((data) => {
const login_url = data.login_url;
console.log("login_url:", login_url);
setLoginUrl(login_url);
const token = data.token;
const decoded = jwtDecode(token) as { [key: string]: any };
setJwtToken(token);
console.log("decoded:", decoded);
setAccessToken(decoded.key);
console.log("decoded user email:", decoded.user_email);
const user_email = decoded.user_email;
setUserEmail(user_email);
const user_id = decoded.user_id;
setUserID(user_id);
});
}, [inviteID]);
const handleSubmit = (formValues: Record<string, any>) => {
console.log(
"in handle submit. accessToken:",
accessToken,
"token:",
jwtToken,
"formValues:",
formValues
);
if (!accessToken || !jwtToken) {
return;
}
formValues.user_email = userEmail;
if (!userID || !inviteID) {
return;
}
claimOnboardingToken(
accessToken,
inviteID,
userID,
formValues.password
).then((data) => {
let litellm_dashboard_ui = "/ui/";
litellm_dashboard_ui += "?login=success";
// set cookie "token" to jwtToken
document.cookie = "token=" + jwtToken;
console.log("redirecting to:", litellm_dashboard_ui);
window.location.href = litellm_dashboard_ui;
});
// redirect to login page
};
return (
<div className="mx-auto w-full max-w-md mt-10">
<Card>
<Title className="text-sm mb-5 text-center">🚅 LiteLLM</Title>
<Title className="text-xl">Sign up</Title>
<Text>Claim your user account to login to Admin UI.</Text>
<Callout
className="mt-4"
title="SSO"
icon={RiCheckboxCircleLine}
color="sky"
>
<Grid numItems={2} className="flex justify-between items-center">
<Col>SSO is under the Enterprise Tier.</Col>
<Col>
<Button variant="primary" className="mb-2">
<a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
Get Free Trial
</a>
</Button>
</Col>
</Grid>
</Callout>
<Form
className="mt-10 mb-5 mx-auto"
layout="vertical"
onFinish={handleSubmit}
>
<>
<Form.Item label="Email Address" name="user_email">
<TextInput
type="email"
disabled={true}
value={userEmail}
defaultValue={userEmail}
className="max-w-md"
/>
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{ required: true, message: "password required to sign up" },
]}
help="Create a password for your account"
>
<TextInput placeholder="" type="password" className="max-w-md" />
</Form.Item>
</>
<div className="mt-10">
<Button2 htmlType="submit">Sign Up</Button2>
</div>
</Form>
</Card>
</div>
);
}
|