simple login implementation

src/components/Login.tsx

@@ -1,19 +1,71 @@
 import React from "react"
+import { useState } from "react"
+import { RouteComponentProps } from "react-router-dom"
+import { useLoginMutation } from "../generated/graphql"
+
+const Login: React.FC<RouteComponentProps> = (props) => {
+	const [username,setUsername] = useState("")
+	const [password,setPassword] = useState("")
+
+	const [loginFailed,setLoginFailed] = useState(false)
+
+	const [loginMutation] = useLoginMutation()
 
-const Login: React.FC = () => {
 	return (
 		<div className="flex justify-center h-screen items-center">
 			<div>
-				<form onSubmit={(e)=>{
+				<form onSubmit={async (e)=>{
 					e.preventDefault()
+
+					const result =  await loginMutation({
+						variables:{
+							username: username,
+							password: password
+						}
+					})
+					
+					const successful = result.data?.login.successful
+
+					if (!successful){
+						setLoginFailed(true)
+						return
+					}
+
+					const token = result.data?.login.token
+
+					if (token){
+						const response = await fetch("/api/cookie",{
+							method:"POST",
+							body: token
+						})
+
+						if (response.ok){
+							// Login successful
+							props.history.push("/f/")
+						}else{
+							setLoginFailed(true)
+						}
+					}
 				}} >
+					{loginFailed && 
+						<div className="text-red-600 mb-4" >
+							<div className="font-bold" >
+								Login failed
+							</div>
+							<div>
+								Wrong username or password
+							</div>
+						</div>
+					}
 					<input type="text" placeholder="Username"
 						className="block my-2 text-input"
 						required
+						onChange={(e)=>setUsername(e.target.value)}
 					/>
 					<input type="password" placeholder="Password" 
 						className="block my-2 text-input"
 						required
+						onChange={(e)=>setPassword(e.target.value)}
 					/>
 					<button className="block my-2 w-full" >Login</button>
 				</form>

src/generated/graphql.tsx

@@ -40,12 +40,22 @@ export type File = {
   size: Scalars["Int"];
 };
 
+/** Result of a login */
+export type LoginResut = {
+  __typename?: "LoginResut";
+  /** If the login was successful */
+  successful: Scalars["Boolean"];
+  /** JWT token if login was successful */
+  token?: Maybe<Scalars["String"]>;
+};
+
 export type RootMutation = {
   __typename?: "RootMutation";
   copy?: Maybe<File>;
   createDir: Directory;
   delete?: Maybe<Scalars["String"]>;
   deleteDir: Scalars["String"];
+  login: LoginResut;
   move?: Maybe<File>;
 };
 
@@ -71,6 +81,12 @@ export type RootMutationDeleteDirArgs = {
 };
 
 
+export type RootMutationLoginArgs = {
+  username: Scalars["String"];
+  password: Scalars["String"];
+};
+
+
 export type RootMutationMoveArgs = {
   src: Scalars["ID"];
   dest: Scalars["ID"];
@@ -158,6 +174,20 @@ export type GetFileQuery = (
   )> }
 );
 
+export type LoginMutationVariables = Exact<{
+  username: Scalars["String"];
+  password: Scalars["String"];
+}>;
+
+
+export type LoginMutation = (
+  { __typename?: "RootMutation" }
+  & { login: (
+    { __typename?: "LoginResut" }
+    & Pick<LoginResut, "token" | "successful">
+  ) }
+);
+
 export type MoveMutationVariables = Exact<{
   src: Scalars["ID"];
   dest: Scalars["ID"];
@@ -357,6 +387,41 @@ export function useGetFileLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<Ge
 export type GetFileQueryHookResult = ReturnType<typeof useGetFileQuery>;
 export type GetFileLazyQueryHookResult = ReturnType<typeof useGetFileLazyQuery>;
 export type GetFileQueryResult = Apollo.QueryResult<GetFileQuery, GetFileQueryVariables>;
+export const LoginDocument = gql`
+    mutation Login($username: String!, $password: String!) {
+  login(username: $username, password: $password) {
+    token
+    successful
+  }
+}
+    `
+export type LoginMutationFn = Apollo.MutationFunction<LoginMutation, LoginMutationVariables>;
+
+/**
+ * __useLoginMutation__
+ *
+ * To run a mutation, you first call `useLoginMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useLoginMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [loginMutation, { data, loading, error }] = useLoginMutation({
+ *   variables: {
+ *      username: // value for 'username'
+ *      password: // value for 'password'
+ *   },
+ * });
+ */
+export function useLoginMutation(baseOptions?: Apollo.MutationHookOptions<LoginMutation, LoginMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<LoginMutation, LoginMutationVariables>(LoginDocument, options)
+}
+export type LoginMutationHookResult = ReturnType<typeof useLoginMutation>;
+export type LoginMutationResult = Apollo.MutationResult<LoginMutation>;
+export type LoginMutationOptions = Apollo.BaseMutationOptions<LoginMutation, LoginMutationVariables>;
 export const MoveDocument = gql`
     mutation move($src: ID!, $dest: ID!) {
   move(src: $src, dest: $dest) {

src/graphql/login.graphql

@@ -0,0 +1,6 @@
+mutation Login($username: String!, $password: String!){
+  login(username:$username,password:$password){
+    token
+    successful
+  }
+}