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>

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>

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>
   );