mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-05 06:20:10 +01:00
365 update invite UI to match new UI (#370)
* update NewUserModal to match ui styles * fix bg color of invite screen/auto login after accept invitation * fix error text color * cleanup --------- Co-authored-by: timothycarambat <rambat1010@gmail.com>
This commit is contained in:
Sean Hatfield
GitHub
parent
1aa58dcb7b
commit
dd33767059
@ -2,10 +2,13 @@ import React, { useState } from "react";
|
||||
import Invite from "../../../models/invite";
|
||||
import paths from "../../../utils/paths";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { AUTH_TOKEN, AUTH_USER } from "../../../utils/constants";
|
||||
import System from "../../../models/system";
|
||||
|
||||
export default function NewUserModal() {
|
||||
const { code } = useParams();
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const handleCreate = async (e) => {
|
||||
setError(null);
|
||||
e.preventDefault();
|
||||
@ -13,16 +16,26 @@ export default function NewUserModal() {
|
||||
const form = new FormData(e.target);
|
||||
for (var [key, value] of form.entries()) data[key] = value;
|
||||
const { success, error } = await Invite.acceptInvite(code, data);
|
||||
if (!!success) window.location.replace(paths.home());
|
||||
if (success) {
|
||||
const { valid, user, token, message } = await System.requestToken(data);
|
||||
if (valid && !!token && !!user) {
|
||||
window.localStorage.setItem(AUTH_USER, JSON.stringify(user));
|
||||
window.localStorage.setItem(AUTH_TOKEN, token);
|
||||
window.location = paths.home();
|
||||
} else {
|
||||
setError(message);
|
||||
}
|
||||
return;
|
||||
}
|
||||
setError(error);
|
||||
};
|
||||
|
||||
return (
|
||||
<dialog open={true} className="bg-transparent outline-none">
|
||||
<div className="relative w-full max-w-2xl max-h-full">
|
||||
<div className="relative bg-white rounded-lg shadow dark:bg-stone-700">
|
||||
<div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
<div className="relative bg-main-gradient rounded-lg shadow">
|
||||
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
Create a new account
|
||||
</h3>
|
||||
</div>
|
||||
@ -32,14 +45,14 @@ export default function NewUserModal() {
|
||||
<div>
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
className="block mb-2 text-sm font-medium text-white"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
name="username"
|
||||
type="text"
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-stone-600 dark:border-stone-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||
className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
|
||||
placeholder="My username"
|
||||
minLength={2}
|
||||
required={true}
|
||||
@ -49,14 +62,14 @@ export default function NewUserModal() {
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
className="block mb-2 text-sm font-medium text-white"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
name="password"
|
||||
type="text"
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-stone-600 dark:border-stone-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||
type="password"
|
||||
className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
|
||||
placeholder="Your password"
|
||||
required={true}
|
||||
minLength={8}
|
||||
@ -64,20 +77,18 @@ export default function NewUserModal() {
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<p className="text-red-600 dark:text-red-400 text-sm">
|
||||
Error: {error}
|
||||
</p>
|
||||
<p className="text-red-400 text-sm">Error: {error}</p>
|
||||
)}
|
||||
<p className="text-gray-800 dark:text-slate-200 text-xs md:text-sm">
|
||||
<p className="text-slate-200 text-xs md:text-sm">
|
||||
After creating your account you will be able to login with
|
||||
these credentials and start using workspaces.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
|
||||
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-black dark:text-slate-200 dark:border-transparent dark:hover:text-slate-200 dark:hover:bg-gray-900 dark:focus:ring-gray-800"
|
||||
className="w-full transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800 text-center justify-center"
|
||||
>
|
||||
Accept Invitation
|
||||
</button>
|
||||
|
||||
@ -31,7 +31,7 @@ export default function InvitePage() {
|
||||
|
||||
if (result.status === "loading") {
|
||||
return (
|
||||
<div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex">
|
||||
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
|
||||
<FullScreenLoader />
|
||||
</div>
|
||||
);
|
||||
@ -39,14 +39,14 @@ export default function InvitePage() {
|
||||
|
||||
if (result.status === "invalid") {
|
||||
return (
|
||||
<div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex items-center justify-center">
|
||||
<p className="text-red-600 text-lg">{result.message}</p>
|
||||
<div className="w-screen h-screen overflow-hidden bg-sidebar flex items-center justify-center">
|
||||
<p className="text-red-400 text-lg">{result.message}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-screen h-screen overflow-hidden bg-gray-100 dark:bg-stone-900 flex items-center justify-center">
|
||||
<div className="w-screen h-screen overflow-hidden bg-sidebar flex items-center justify-center">
|
||||
<NewUserModal />
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user