feat: create user if not any

Author: kunish

src/apis/gql/gql.ts

@@ -96,6 +96,9 @@ const documents = {
     types.UserDocument,
   '\n        query User {\n          user {\n            username\n            name\n            avatar\n          }\n        }\n      ':
     types.UserDocument,
+  '\n      query NumberUsers {\n        numberUsers\n      }\n    ': types.NumberUsersDocument,
+  '\n        mutation CreateUser($username: String!, $password: String!) {\n          createUser(username: $username, password: $password)\n        }\n      ':
+    types.CreateUserDocument,
   '\n      query Token($username: String!, $password: String!) {\n        token(username: $username, password: $password)\n      }\n    ':
     types.TokenDocument
 }
@@ -366,6 +369,18 @@ export function graphql(
 export function graphql(
   source: '\n        query User {\n          user {\n            username\n            name\n            avatar\n          }\n        }\n      '
 ): (typeof documents)['\n        query User {\n          user {\n            username\n            name\n            avatar\n          }\n        }\n      ']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n      query NumberUsers {\n        numberUsers\n      }\n    '
+): (typeof documents)['\n      query NumberUsers {\n        numberUsers\n      }\n    ']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n        mutation CreateUser($username: String!, $password: String!) {\n          createUser(username: $username, password: $password)\n        }\n      '
+): (typeof documents)['\n        mutation CreateUser($username: String!, $password: String!) {\n          createUser(username: $username, password: $password)\n        }\n      ']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

src/apis/gql/graphql.ts

@@ -1052,6 +1052,17 @@ export type UserQuery = {
   user: { __typename?: 'User'; username: string; name?: string | null; avatar?: string | null }
 }
 
+export type NumberUsersQueryVariables = Exact<{ [key: string]: never }>
+
+export type NumberUsersQuery = { __typename?: 'Query'; numberUsers: number }
+
+export type CreateUserMutationVariables = Exact<{
+  username: Scalars['String']['input']
+  password: Scalars['String']['input']
+}>
+
+export type CreateUserMutation = { __typename?: 'Mutation'; createUser: string }
+
 export type TokenQueryVariables = Exact<{
   username: Scalars['String']['input']
   password: Scalars['String']['input']
@@ -2925,6 +2936,63 @@ export const UserDocument = {
     }
   ]
 } as unknown as DocumentNode<UserQuery, UserQueryVariables>
+export const NumberUsersDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'NumberUsers' },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [{ kind: 'Field', name: { kind: 'Name', value: 'numberUsers' } }]
+      }
+    }
+  ]
+} as unknown as DocumentNode<NumberUsersQuery, NumberUsersQueryVariables>
+export const CreateUserDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'CreateUser' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'username' } },
+          type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } } }
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'password' } },
+          type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } } }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'createUser' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'username' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'username' } }
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'password' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'password' } }
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<CreateUserMutation, CreateUserMutationVariables>
 export const TokenDocument = {
   kind: 'Document',
   definitions: [

src/app/(auth)/login/page.tsx

@@ -22,7 +22,7 @@ export default function LoginPage() {
   })
 
   return (
-    <div className="mx-auto flex w-full max-w-screen-xl flex-col items-center gap-4 px-4 pt-4 sm:flex-row sm:pt-32">
+    <div className="mx-auto flex w-full max-w-screen-xl flex-col items-center gap-4 px-4 pt-4 sm:flex-row sm:pt-64">
       <div className="flex w-full flex-col items-center sm:w-2/5">
         <div className="overflow-hidden rounded-lg">
           <RiveComponent src="/809-1634-rocket-demo.riv" className="h-64 w-64" />

src/app/api/login/route.ts

@@ -1,18 +1,43 @@
-import { gql, request } from 'graphql-request'
+import { request } from 'graphql-request'
 import { NextResponse } from 'next/server'
-import { TokenQuery } from '~/apis/gql/graphql'
+import { graphql } from '~/apis/gql'
 import { storeJWTAsCookie } from '~/helpers'
 
 export const POST = async (req: Request) => {
   const { endpointURL, username, password } = await req.json()
 
-  const { token } = await request<TokenQuery>(
+  const { numberUsers } = await request(
     endpointURL,
-    gql`
+    graphql(`
+      query NumberUsers {
+        numberUsers
+      }
+    `)
+  )
+
+  if (numberUsers === 0) {
+    const { createUser } = await request(
+      endpointURL,
+      graphql(`
+        mutation CreateUser($username: String!, $password: String!) {
+          createUser(username: $username, password: $password)
+        }
+      `),
+      { username, password }
+    )
+
+    storeJWTAsCookie(endpointURL, createUser)
+
+    return new NextResponse()
+  }
+
+  const { token } = await request(
+    endpointURL,
+    graphql(`
       query Token($username: String!, $password: String!) {
         token(username: $username, password: $password)
       }
-    `,
+    `),
     { username, password }
   )
 

src/components/Header.tsx

@@ -309,6 +309,7 @@ export const Header: FC = () => {
               <ModalSubmitFormFooter
                 reset={updateProfileForm.reset}
                 isResetDisabled={!updateProfileFormDirty}
+                isSubmitDisabled={!updateProfileFormDirty}
                 isSubmitting={updateProfileForm.formState.isSubmitting}
               />
             </ModalContent>

src/styles/globals.css

@@ -16,6 +16,10 @@ form {
   @apply contents;
 }
 
+input {
+  @apply bg-clip-text;
+}
+
 @media screen(sm) {
   ::-webkit-scrollbar {
     @apply block;