From dd337670593a4044875bd8d7c6a62ea8d10e17a7 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Tue, 14 Nov 2023 13:58:00 -0800
Subject: [PATCH] 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>
---
.../src/pages/Invite/NewUserModal/index.jsx | 41 ++++++++++++-------
frontend/src/pages/Invite/index.jsx | 8 ++--
2 files changed, 30 insertions(+), 19 deletions(-)
diff --git a/frontend/src/pages/Invite/NewUserModal/index.jsx b/frontend/src/pages/Invite/NewUserModal/index.jsx
index ae3fb6ed3..398411909 100644
--- a/frontend/src/pages/Invite/NewUserModal/index.jsx
+++ b/frontend/src/pages/Invite/NewUserModal/index.jsx
@@ -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>
diff --git a/frontend/src/pages/Invite/index.jsx b/frontend/src/pages/Invite/index.jsx
index 2818fd11f..1ed25e799 100644
--- a/frontend/src/pages/Invite/index.jsx
+++ b/frontend/src/pages/Invite/index.jsx
@@ -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>
);
--
GitLab