feat: Basic auth for projects (#3)

reearth · Jun 3, 2021 · 372c4e8 · 372c4e8
1 parent b367404
commit 372c4e8
Show file tree

Hide file tree

Showing 9 changed files with 8,870 additions and 8,558 deletions.
diff --git a/src/components/molecules/Settings/Field/index.tsx b/src/components/molecules/Settings/Field/index.tsx
@@ -8,7 +8,7 @@ type Props = {
   header?: React.ReactNode;
   action?: React.ReactNode;
   secondaryAction?: React.ReactNode;
-  body?: string;
+  body?: React.ReactNode;
   children?: React.ReactNode;
 };
 

diff --git a/src/components/molecules/Settings/Project/BasicAuthSection/index.tsx b/src/components/molecules/Settings/Project/BasicAuthSection/index.tsx
@@ -0,0 +1,53 @@
+import { styled } from "@reearth/theme";
+import React from "react";
+import { useIntl } from "react-intl";
+import Section from "../../Section";
+import EditableItem from "../EditableItem";
+import ToggleItem from "../ToggleItem";
+
+export type Props = {
+  onSave: (active?: boolean, basicAuthUsername?: string, basicAuthPassword?: string) => void;
+  isBasicAuthActive?: boolean;
+  basicAuthUsername?: string;
+  basicAuthPassword?: string;
+};
+
+const BasicAuthSection: React.FC<Props> = ({
+  onSave,
+  isBasicAuthActive,
+  basicAuthUsername,
+  basicAuthPassword,
+}) => {
+  const intl = useIntl();
+  return (
+    <Wrapper>
+      <Section title={intl.formatMessage({ defaultMessage: "Basic Authorization" })}>
+        <ToggleItem
+          title={intl.formatMessage({ defaultMessage: "Enable basic authorization" })}
+          checked={!!isBasicAuthActive}
+          onChange={() => onSave(!isBasicAuthActive, basicAuthUsername, basicAuthPassword)}
+        />
+        <EditableItem
+          title={intl.formatMessage({ defaultMessage: "Username" })}
+          body={basicAuthUsername}
+          multilineTextBox={false}
+          onSubmit={username => onSave(isBasicAuthActive, username, basicAuthPassword)}
+        />
+        <EditableItem
+          title={intl.formatMessage({ defaultMessage: "Password" })}
+          body={basicAuthPassword}
+          multilineTextBox={false}
+          onSubmit={password => onSave(isBasicAuthActive, basicAuthUsername, password)}
+        />
+      </Section>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.bg[3]};
+  margin-bottom: 64px;
+`;
+
+export default BasicAuthSection;
diff --git a/src/components/molecules/Settings/Project/ToggleItem/index.tsx b/src/components/molecules/Settings/Project/ToggleItem/index.tsx
@@ -0,0 +1,15 @@
+import ToggleButton from "@reearth/components/atoms/ToggleButton";
+import React from "react";
+import Field from "../../Field";
+
+export type Props = {
+  checked: boolean;
+  title: string;
+  onChange?: () => void;
+};
+
+const ToggleItem: React.FC<Props> = ({ title, onChange, checked }) => {
+  return <Field header={title} body={<ToggleButton checked={checked} onChange={onChange} />} />;
+};
+
+export default ToggleItem;
diff --git a/src/components/organisms/Settings/Project/hooks.ts b/src/components/organisms/Settings/Project/hooks.ts
@@ -9,6 +9,7 @@ import {
   useCheckProjectAliasLazyQuery,
   useArchiveProjectMutation,
   useDeleteProjectMutation,
+  useUpdateProjectBasicAuthMutation,
 } from "@reearth/gql";
 import { useLocalState } from "@reearth/state";
 
@@ -43,6 +44,9 @@ export default ({ projectId }: Params) => {
             publicTitle: rawProject.publicTitle,
             publicDescription: rawProject.publicDescription,
             isArchived: rawProject.isArchived,
+            isBasicAuthActive: rawProject.isBasicAuthActive,
+            basicAuthUsername: rawProject.basicAuthUsername,
+            basicAuthPassword: rawProject.basicAuthPassword,
             imageUrl: rawProject.imageUrl,
             alias: rawProject.alias,
             publishmentStatus: rawProject.publishmentStatus,
@@ -52,6 +56,7 @@ export default ({ projectId }: Params) => {
   );
 
   // Project Updating
+  const [updateProjectBasicAuthMutation] = useUpdateProjectBasicAuthMutation();
   const [updateProjectNameMutation] = useUpdateProjectNameMutation();
   const [updateProjectDescriptionMutation] = useUpdateProjectDescriptionMutation();
   const [updateProjectImageUrlMutation] = useUpdateProjectImageUrlMutation();
@@ -71,6 +76,16 @@ export default ({ projectId }: Params) => {
     projectId && deleteProjectMutation({ variables: { projectId } });
   }, [projectId, deleteProjectMutation]);
 
+  const updateProjectBasicAuth = useCallback(
+    (isBasicAuthActive?: boolean, basicAuthUsername?: string, basicAuthPassword?: string) => {
+      projectId &&
+        updateProjectBasicAuthMutation({
+          variables: { projectId, isBasicAuthActive, basicAuthUsername, basicAuthPassword },
+        });
+    },
+    [projectId, updateProjectBasicAuthMutation],
+  );
+
   const updateProjectDescription = useCallback(
     (description: string) => {
       projectId && updateProjectDescriptionMutation({ variables: { projectId, description } });
@@ -145,6 +160,7 @@ export default ({ projectId }: Params) => {
     project,
     projectId,
     currentTeam,
+    updateProjectBasicAuth,
     updateProjectName,
     updateProjectDescription,
     updateProjectImageUrl,

diff --git a/src/components/organisms/Settings/Project/index.tsx b/src/components/organisms/Settings/Project/index.tsx
@@ -8,6 +8,7 @@ import ProfileSection from "@reearth/components/molecules/Settings/Project/Profi
 import PublishSection from "@reearth/components/molecules/Settings/Project/PublishSection";
 import DangerSection from "@reearth/components/molecules/Settings/Project/DangerSection";
 import ArchivedMessage from "@reearth/components/molecules/Settings/Project/ArchivedMessage";
+import BasicAuthSection from "@reearth/components/molecules/Settings/Project/BasicAuthSection";
 
 type Props = {
   projectId: string;
@@ -17,6 +18,7 @@ const Project: React.FC<Props> = ({ projectId }) => {
   const {
     project,
     currentTeam,
+    updateProjectBasicAuth,
     updateProjectName,
     updateProjectDescription,
     updateProjectImageUrl,
@@ -37,6 +39,12 @@ const Project: React.FC<Props> = ({ projectId }) => {
       {!project?.isArchived && (
         <>
           <StatusSection projectStatus={projectStatus} />
+          <BasicAuthSection
+            onSave={updateProjectBasicAuth}
+            isBasicAuthActive={project?.isBasicAuthActive}
+            basicAuthUsername={project?.basicAuthUsername ?? ""}
+            basicAuthPassword={project?.basicAuthPassword ?? ""}
+          />
           <ProfileSection
             currentProject={project}
             updateProjectName={updateProjectName}

diff --git a/src/components/organisms/Settings/Project/queries.ts b/src/components/organisms/Settings/Project/queries.ts
@@ -8,6 +8,9 @@ export const PROJECT = gql`
         name
         description
         isArchived
+        isBasicAuthActive
+        basicAuthUsername
+        basicAuthPassword
         publicTitle
         publicDescription
         imageUrl
@@ -18,6 +21,32 @@ export const PROJECT = gql`
   }
 `;
 
+export const UPDATE_PROJECT_BASIC_AUTH = gql`
+  mutation updateProjectBasicAuth(
+    $projectId: ID!
+    $isBasicAuthActive: Boolean
+    $basicAuthUsername: String
+    $basicAuthPassword: String
+  ) {
+    updateProject(
+      input: {
+        projectId: $projectId
+        isBasicAuthActive: $isBasicAuthActive
+        basicAuthUsername: $basicAuthUsername
+        basicAuthPassword: $basicAuthPassword
+      }
+    ) {
+      project {
+        id
+        name
+        isBasicAuthActive
+        basicAuthUsername
+        basicAuthPassword
+      }
+    }
+  }
+`;
+
 export const UPDATE_PROJECT_NAME = gql`
   mutation updateProjectName($projectId: ID!, $name: String!) {
     updateProject(input: { projectId: $projectId, name: $name }) {
@@ -26,6 +55,9 @@ export const UPDATE_PROJECT_NAME = gql`
         name
         description
         isArchived
+        isBasicAuthActive
+        basicAuthUsername
+        basicAuthPassword
         publicTitle
         publicDescription
         imageUrl
@@ -44,6 +76,9 @@ export const UPDATE_PROJECT_DESCRIPTION = gql`
         name
         description
         isArchived
+        isBasicAuthActive
+        basicAuthUsername
+        basicAuthPassword
         publicTitle
         publicDescription
         imageUrl
@@ -62,6 +97,9 @@ export const UPDATE_PROJECT_IMAGE_URL = gql`
         name
         description
         isArchived
+        isBasicAuthActive
+        basicAuthUsername
+        basicAuthPassword
         publicTitle
         publicDescription
         imageUrl
@@ -80,6 +118,9 @@ export const UPDATE_PROJECT_PUBLIC_TITLE = gql`
         name
         description
         isArchived
+        isBasicAuthActive
+        basicAuthUsername
+        basicAuthPassword
         publicTitle
         publicDescription
         imageUrl
@@ -98,6 +139,9 @@ export const UPDATE_PROJECT_PUBLIC_DESCRIPTION = gql`
         name
         description
         isArchived
+        isBasicAuthActive
+        basicAuthUsername
+        basicAuthPassword
         publicTitle
         publicDescription
         imageUrl
@@ -116,6 +160,9 @@ export const ARCHIVE_PROJECT = gql`
         name
         description
         isArchived
+        isBasicAuthActive
+        basicAuthUsername
+        basicAuthPassword
         publicTitle
         publicDescription
         imageUrl

diff --git a/src/gql/fragmentMatcher.json b/src/gql/fragmentMatcher.json
@@ -4,16 +4,12 @@
       "Asset",
       "Scene",
       "DatasetSchemaField",
+      "Project",
       "Property",
-      "User",
-      "DatasetSchema",
       "Team",
       "Dataset",
-      "Project"
-    ],
-    "Layers": [
-      "LayerItem",
-      "LayerGroup"
+      "DatasetSchema",
+      "User"
     ],
     "PropertyItem": [
       "PropertyGroup",
@@ -22,6 +18,10 @@
     "Layer": [
       "LayerGroup",
       "LayerItem"
+    ],
+    "Layers": [
+      "LayerItem",
+      "LayerGroup"
     ]
   }
 }