michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

365 update invite UI to match new UI (#370)

Browse Source 
* 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 2023-11-14 13:58:00 -08:00 committed by GitHub
parent 1aa58dcb7b
commit dd33767059
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/pages/Invite/NewUserModal/index.jsx
View File

@ -2,10 +2,13 @@ import React, { useState } from "react";
import Invite from "../../../models/invite"; import Invite from "../../../models/invite";
import paths from "../../../utils/paths"; import paths from "../../../utils/paths";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { AUTH_TOKEN, AUTH_USER } from "../../../utils/constants";
import System from "../../../models/system";
export default function NewUserModal() { export default function NewUserModal() {
const { code } = useParams(); const { code } = useParams();
const [error, setError] = useState(null); const [error, setError] = useState(null);
const handleCreate = async (e) => { const handleCreate = async (e) => {
setError(null); setError(null);
e.preventDefault(); e.preventDefault();
@ -13,16 +16,26 @@ export default function NewUserModal() {
const form = new FormData(e.target); const form = new FormData(e.target);
for (var [key, value] of form.entries()) data[key] = value; for (var [key, value] of form.entries()) data[key] = value;
const { success, error } = await Invite.acceptInvite(code, data); 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); setError(error);
}; };
return ( return (
<dialog open={true} className="bg-transparent outline-none"> <dialog open={true} className="bg-transparent outline-none">
<div className="relative w-full max-w-2xl max-h-full"> <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="relative bg-main-gradient rounded-lg shadow">
<div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"> <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white"> <h3 className="text-xl font-semibold text-white">
Create a new account Create a new account
</h3> </h3>
</div> </div>
@ -32,14 +45,14 @@ export default function NewUserModal() {
<div> <div>
<label <label
htmlFor="username" 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 Username
</label> </label>
<input <input
name="username" name="username"
type="text" 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" placeholder="My username"
minLength={2} minLength={2}
required={true} required={true}
@ -49,14 +62,14 @@ export default function NewUserModal() {
<div> <div>
<label <label
htmlFor="password" 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 Password
</label> </label>
<input <input
name="password" name="password"
type="text" type="password"
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="Your password" placeholder="Your password"
required={true} required={true}
minLength={8} minLength={8}
@ -64,20 +77,18 @@ export default function NewUserModal() {
/> />
</div> </div>
{error && ( {error && (
<p className="text-red-600 dark:text-red-400 text-sm"> <p className="text-red-400 text-sm">Error: {error}</p>
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 After creating your account you will be able to login with
these credentials and start using workspaces. these credentials and start using workspaces.
</p> </p>
</div> </div>
</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 <button
type="submit" 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 Accept Invitation
</button> </button>

8
frontend/src/pages/Invite/index.jsx
View File

@ -31,7 +31,7 @@ export default function InvitePage() {
if (result.status === "loading") { if (result.status === "loading") {
return ( 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 /> <FullScreenLoader />
</div> </div>
); );
@ -39,14 +39,14 @@ export default function InvitePage() {
if (result.status === "invalid") { if (result.status === "invalid") {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex items-center justify-center"> <div className="w-screen h-screen overflow-hidden bg-sidebar flex items-center justify-center">
<p className="text-red-600 text-lg">{result.message}</p> <p className="text-red-400 text-lg">{result.message}</p>
</div> </div>
); );
} }
return ( 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 /> <NewUserModal />
</div> </div>
); );