DB: Social Login Users & Google Login UI

admin-ui/src/App.tsx

@@ -23,11 +23,14 @@ import { NutritionEdit } from "./Nutrition/NutritionEdit";
 import { NutritionList } from "./Nutrition/NutritionList";
 import { PersonEdit } from "./People/PersonEdit";
 import { PersonList } from "./People/PersonList";
-import { Register } from "./People/Register";
+import { Register as PeopleRegister } from "./People/Register";
 import { ResetPassword } from "./People/ResetPassword";
 import { ProductCreate } from "./Products/ProductCreate";
 import { ProductEdit } from "./Products/ProductEdit";
 import { ProductList } from "./Products/ProductList";
+import { SocialLoginList } from "./SocialLogin/SocialLoginList";
+import { Register as SocialLoginRegister } from "./SocialLogin/Register";
+import { SocialLoginEdit } from "./SocialLogin/SocialLoginEdit";
 
 function App() {
   const auth = useAuth();
@@ -46,6 +49,7 @@ function App() {
         Person: { excludeFields: ["id"] },
         Ingredient: { excludeFields: ["id"] },
         Match: { excludeFields: ["id"] },
+		SocialLoginUser: { excludeFields: ["id"] }
       },
     })
       .then((resolvedValue) => setDataProvider(resolvedValue))
@@ -111,14 +115,29 @@ function App() {
                 />
 
                 <CustomRoutes>
-                  <Route path="people/register" element={<Register />} />
+                  <Route path="people/register" element={<PeopleRegister />} />
                   <Route
                     path="people/:rowId/reset"
                     element={<ResetPassword />}
                   />
                 </CustomRoutes>
               </>
             )}
+
+            {auth.currentPerson?.role === "app_admin" && (
+              <>
+                <Resource
+                  name="socialLoginUsers"
+                  options={{ label: "Social Login" }}
+                  list={ SocialLoginList }
+				  edit={ SocialLoginEdit }
+                />
+
+				<CustomRoutes>
+					<Route path="socialLoginUsers/register" element={<SocialLoginRegister />} />
+				</CustomRoutes>
+              </>
+            )}
           </Admin>
         ) : (
           "loading..."

admin-ui/src/People/PersonList.tsx

@@ -12,32 +12,14 @@ import {
   useRecordContext,
 } from "react-admin";
 import { useNavigate } from "react-router-dom";
+import UserRole from "../components/UserRole";
+
 
 type Person = {
   role: string;
   rowId: string;
 };
 
-const UserRole = (props: FieldProps) => {
-  const record = useRecordContext<Person>();
-
-  const roles: { [key: string]: string | undefined } = {
-    APP_ADMIN: "Admin",
-    APP_MEAL_DESIGNER: "Meal Designer",
-    APP_USER: "Client",
-  };
-
-  if (!record) {
-    return <span>loading person</span>;
-  }
-  const userRole = roles[record.role] || "Anonymous";
-  console.log(record.role);
-  {
-    console.log("userRole", userRole);
-  }
-  return <span>{userRole}</span>;
-};
-
 const ResetPassword = (props: FieldProps) => {
   const navigate = useNavigate();
   const record = useRecordContext<Person>();
@@ -69,6 +51,7 @@ const PersonActions = () => {
     </TopToolbar>
   );
 };
+
 export const PersonList = (props: ListProps) => {
   return (
     <React.Fragment>

admin-ui/src/SocialLogin/Register.tsx

@@ -0,0 +1,77 @@
+import { useApolloClient } from "@apollo/client";
+import {
+	Button,
+	FormControl,
+	Grid,
+	InputLabel,
+	MenuItem,
+	Select,
+	TextField
+} from "@mui/material";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { registerSocialLoginUser } from "./service";
+
+
+export const Register = () => {
+	const [fullName, setFullName] = useState("");
+	const [email, setEmail] = useState("");
+	const [loginMode, setLoginMode] = useState("");
+	const client = useApolloClient();
+	const navigate = useNavigate();
+	const isValid = fullName && email && loginMode;
+
+
+	return (
+		<Grid container>
+			<Grid item xs={12}>
+				<TextField
+					required
+					fullWidth
+					label="Full Name"
+					value={fullName}
+					onChange={(e) => {
+						setFullName(e.target.value);
+					}}
+				/>
+
+				<TextField
+					required
+					fullWidth
+					label="Email"
+					value={email}
+					onChange={(e) => {
+						setEmail(e.target.value);
+					}}
+				/>
+
+				<FormControl fullWidth required>
+					<InputLabel id="login-mode-label">Login Mode</InputLabel>
+					<Select
+						labelId="login-mode-label"
+						value={loginMode}
+						label="Login Mode"
+						onChange={(e) => setLoginMode(e.target.value)}
+					>
+						<MenuItem value="GOOGLE">Google</MenuItem>
+						<MenuItem value="FACEBOOK">Facebook</MenuItem>
+					</Select>
+				</FormControl>
+
+				<Button
+					disabled={!isValid}
+					onClick={(e) => {
+						e.stopPropagation();
+						registerSocialLoginUser(client, fullName, loginMode, email).then(() => {
+							navigate("/socialLoginUsers");
+						}).catch((err) => {
+							console.log('Social Login Registration Failed', err.stack);
+						});
+					}}
+				>
+					Register
+				</Button>
+			</Grid>
+		</Grid>
+	);
+};

admin-ui/src/SocialLogin/SocialLoginEdit.tsx

@@ -0,0 +1,46 @@
+import { 
+	Edit, 
+	EditProps, 
+	SelectInput, 
+	SimpleForm, 
+	TextInput 
+} from "react-admin";
+
+
+export const SocialLoginEdit = (props: EditProps) => {
+	return (
+		<Edit {...props} title="Edit Person details">
+			<SimpleForm>
+				<TextInput source="fullName" />
+				<TextInput source="email" />
+				<SelectInput
+					source="role"
+					emptyText="Client"
+					emptyValue="APP_USER"
+					choices={[
+						{ id: "APP_MEAL_DESIGNER", name: "Meal Designer" },
+						{ id: "APP_ADMIN", name: "Admin" },
+					]}
+				/>
+				<SelectInput
+					source="loginMode"
+					emptyText="Google"
+					emptyValue="GOOGLE"
+					choices={[
+						{ id: "FACEBOOK", name: "Facebook" }
+					]}
+				/>
+				<SelectInput
+					source="status"
+					emptyText="Pending"
+					emptyValue="PENDING"
+					choices={[
+						{ id: "ACTIVE", name: "Active" },
+						{ id: "INACTIVE", name: "InActive" }
+
+					]}
+				/>
+			</SimpleForm>
+		</Edit>
+	);
+};

admin-ui/src/SocialLogin/SocialLoginList.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { 
+	List,
+	Datagrid,
+	ListProps,
+	FieldProps,
+	TextField,
+	useRecordContext,
+	EditButton,
+	ExportButton,
+	TopToolbar,
+	Button
+} from "react-admin";
+import { useNavigate } from "react-router-dom";
+import UserRole from "../components/UserRole";
+
+
+const SocialLoginActions = () => {
+  const navigate = useNavigate();
+  return (
+	<TopToolbar>
+	  <Button
+		onClick={() => {
+		  navigate("/socialLoginUsers/register");
+		}}
+		label="Register"
+	  />
+
+	  <ExportButton />
+	</TopToolbar>
+  );
+};
+
+type LoginModeRecord = {
+  loginMode: string;
+};
+
+const LoginMode = (props: FieldProps) => {
+	const record = useRecordContext<LoginModeRecord>();
+	if (!record) return <span>loading login mode...</span>;
+
+	const loginModes: { [key: string]: string | undefined } = {
+		GOOGLE: "Google",
+		FACEBOOK: "Facebook",
+	};
+
+	return <span>{loginModes[record.loginMode ?? ""] || "Unknown"}</span>;
+};
+
+type UserStatusRecord = {
+  status: string;
+};
+
+const UserStatus = (props: FieldProps) => {
+	const record = useRecordContext<UserStatusRecord>();
+	if (!record) return <span>loading login mode...</span>;
+
+	const UserStatus: { [key: string]: string | undefined } = {
+		PENDING: "Pending",
+		ACTIVE: "Active",
+		INACTIVE: "InActive"
+	};
+
+	return <span>{UserStatus[record.status ?? ""] || "Unknown"}</span>;
+};
+
+export const SocialLoginList = (props: ListProps) => {
+	return(
+		<React.Fragment>
+			<List {...props} title="List Social Login Users" actions={ <SocialLoginActions/> } >
+				<Datagrid>
+					<TextField source="id" />
+					<TextField source="fullName" />
+					<UserRole label="Role" />
+					<LoginMode label="Login Mode"/>
+					<UserStatus label="Status" />
+					<TextField source="email" />
+					<EditButton />
+				</Datagrid>
+			</List>
+		</React.Fragment>
+	);
+};

admin-ui/src/SocialLogin/service.ts

@@ -0,0 +1,35 @@
+import { ApolloClient, gql } from "@apollo/client";
+
+export const registerSocialLoginUserMutation = gql`
+	mutation RegisterSocialLoginUser( $fullName: String! $loginMode: LoginMode! $email: String!) {
+		createSocialLoginUser(
+		input: {
+			socialLoginUser: {
+				fullName: $fullName
+				loginMode: $loginMode
+				email: $email
+			}
+		}
+		) {
+		socialLoginUser {
+			rowId
+			fullName
+			createdAt
+		}
+		}
+	}
+`;
+
+export const registerSocialLoginUser = async (
+	client: ApolloClient<object>,
+	fullName: string,
+	loginMode: string,
+	email: string
+): Promise<void> => {
+	let result = await client.mutate({
+		mutation: registerSocialLoginUserMutation,
+		variables: { fullName, loginMode, email }
+	});
+	return;
+}
+

admin-ui/src/components/UserRole.tsx

@@ -0,0 +1,21 @@
+import { useRecordContext, FieldProps } from "react-admin";
+
+type UserRoleInfo = {
+  role: string;
+  rowId: string;
+};
+
+const UserRole = (props: FieldProps) => {
+  const record = useRecordContext<UserRoleInfo>();
+  if (!record) return <span>loading role</span>;
+
+  const roles: { [key: string]: string | undefined } = {
+	APP_ADMIN: "Admin",
+	APP_MEAL_DESIGNER: "Meal Designer",
+	APP_USER: "Client",
+  };
+
+  return <span>{roles[record.role] || "Anonymous"}</span>;
+};
+
+export default UserRole;

backend/db_migrations/000021_social-login-user.down.sql

@@ -0,0 +1,10 @@
+begin;
+
+	-- DROP TABLE: app.social_login_user
+	DROP TABLE app.social_login_user;
+
+	-- DROP ENUM: app.login_mode ('Google', 'Facebook'), app.user_status  ('pending', 'active',  'inactive')
+	DROP TYPE app.login_mode;
+	DROP TYPE app.user_status;
+
+COMMIT;