thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

feat: edit state, help button, loader while login in

Browse Source
This commit is contained in:
Dakshesh Jain
2022-11-24 20:23:50 +05:30
parent 97544c1760
commit b28dbaea30
8 changed files with 83 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
pages/projects/[projectId]/settings.tsx
View File

@@ -28,9 +28,14 @@ import CreateUpdateStateModal from "components/project/issues/BoardView/state/Cr
import { Spinner, Button, Input, TextArea, Select } from "ui";
import { Breadcrumbs, BreadcrumbItem } from "ui/Breadcrumbs";
// icons
import { ChevronDownIcon, CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
import {
ChevronDownIcon,
CheckIcon,
PlusIcon,
PencilSquareIcon,
} from "@heroicons/react/24/outline";
// types
import type { IProject, IWorkspace, WorkspaceMember } from "types";
import type { IProject, IState, IWorkspace, WorkspaceMember } from "types";
const defaultValues: Partial<IProject> = {
name: "",
@@ -52,6 +57,7 @@ const ProjectSettings: NextPage = () => {
});
const [isCreateStateModalOpen, setIsCreateStateModalOpen] = useState(false);
const [selectedState, setSelectedState] = useState<string | undefined>();
const router = useRouter();
@@ -135,9 +141,13 @@ const ProjectSettings: NextPage = () => {
<ProjectLayout>
<div className="w-full h-full space-y-5">
<CreateUpdateStateModal
isOpen={isCreateStateModalOpen}
setIsOpen={setIsCreateStateModalOpen}
isOpen={isCreateStateModalOpen || Boolean(selectedState)}
handleClose={() => {
setSelectedState(undefined);
setIsCreateStateModalOpen(false);
}}
projectId={projectId as string}
data={selectedState ? states?.find((state) => state.id === selectedState) : undefined}
/>
<Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" />
@@ -404,16 +414,23 @@ const ProjectSettings: NextPage = () => {
<div className="w-full space-y-5">
{states?.map((state) => (
<div
className="border p-1 px-4 rounded flex items-center gap-x-2"
className="border p-1 px-4 rounded flex justify-between items-center"
key={state.id}
>
<div
className="w-3 h-3 rounded-full"
style={{
backgroundColor: state.color,
}}
></div>
<h4>{addSpaceIfCamelCase(state.name)}</h4>
<div className="flex items-center gap-x-2">
<div
className="w-3 h-3 rounded-full"
style={{
backgroundColor: state.color,
}}
></div>
<h4>{addSpaceIfCamelCase(state.name)}</h4>
</div>
<div>
<button type="button" onClick={() => setSelectedState(state.id)}>
<PencilSquareIcon className="h-5 w-5 text-gray-400" />
</button>
</div>
</div>
))}
<button

24
pages/signin.tsx
View File

@@ -1,10 +1,9 @@
import React, { useCallback, useState, useEffect } from "react";
// next
import type { NextPage } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
import Image from "next/image";
// react
import React, { useCallback, useState } from "react";
// hooks
import useUser from "lib/hooks/useUser";
// services
@@ -37,8 +36,10 @@ const SignIn: NextPage = () => {
const { mutateUser, mutateWorkspaces } = useUser();
const [githubToken, setGithubToken] = React.useState(undefined);
const [loginCallBackURL, setLoginCallBackURL] = React.useState(undefined);
const [githubToken, setGithubToken] = useState(undefined);
const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
const [isGoogleAuthenticationLoading, setIsGoogleAuthenticationLoading] = useState(false);
const onSignInSuccess = useCallback(
async (res: any) => {
@@ -54,7 +55,7 @@ const SignIn: NextPage = () => {
return githubToken;
}, [githubToken]);
React.useEffect(() => {
useEffect(() => {
const {
query: { code },
} = router;
@@ -63,7 +64,7 @@ const SignIn: NextPage = () => {
}
}, [router, githubTokenMemo]);
React.useEffect(() => {
useEffect(() => {
if (githubToken) {
authenticationService
.socialAuth({
@@ -80,10 +81,12 @@ const SignIn: NextPage = () => {
}
}, [githubToken, mutateUser, mutateWorkspaces, router, onSignInSuccess]);
React.useEffect(() => {
useEffect(() => {
const origin =
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
setLoginCallBackURL(`${origin}/signin` as any);
return () => setIsGoogleAuthenticationLoading(false);
}, []);
return (
@@ -92,6 +95,11 @@ const SignIn: NextPage = () => {
title: "Plane - Sign In",
}}
>
{isGoogleAuthenticationLoading && (
<div className="absolute top-0 left-0 w-full h-full bg-white z-50 flex items-center justify-center">
<h2 className="text-2xl text-black">Sign in with Google. Please wait...</h2>
</div>
)}
<div className="w-full h-screen flex justify-center items-center bg-gray-50 overflow-auto">
<div className="min-h-full w-full flex flex-col justify-center py-12 px-6 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-md">
@@ -129,6 +137,7 @@ const SignIn: NextPage = () => {
</button>
<GoogleLoginButton
onSuccess={({ clientId, credential }) => {
setIsGoogleAuthenticationLoading(true);
authenticationService
.socialAuth({
medium: "google",
@@ -140,6 +149,7 @@ const SignIn: NextPage = () => {
})
.catch((err) => {
console.log(err);
setIsGoogleAuthenticationLoading(false);
});
}}
onFailure={(err) => {

4
pages/workspace/settings.tsx
View File

@@ -119,10 +119,10 @@ const WorkspaceSettings = () => {
<input {...getInputProps()} />
<div className="text-gray-500 mb-2">Logo</div>
<div>
<div className="h-60 bg-blue-50" {...getRootProps()}>
<div className="w-1/2 aspect-square bg-blue-50" {...getRootProps()}>
{((watch("logo") && watch("logo") !== null && watch("logo") !== "") ||
(image && image !== null)) && (
<div className="relative flex mx-auto h-60">
<div className="relative flex mx-auto h-full">
<Image
src={image ? URL.createObjectURL(image) : watch("logo") ?? ""}
alt="Workspace Logo"