File size: 4,739 Bytes
e3278e4 |
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 161 162 163 164 165 166 167 168 |
"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";
function getCookie(name: string) {
console.log("COOKIES", document.cookie)
const cookieValue = document.cookie
.split('; ')
.find(row => row.startsWith(name + '='));
return cookieValue ? cookieValue.split('=')[1] : null;
}
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/";
const user_id = data.data?.user_id || data.user_id;
litellm_dashboard_ui += "?userID=" + user_id;
// 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 Tirer.</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>
);
}
|