Merge pull request #229 from kbase/sign-up-state

package.json

@@ -33,7 +33,10 @@
     "d3-zoom": "^3.0.0",
     "dompurify": "^3.0.1",
     "downsample-lttb-ts": "^0.0.6",
+    "front-matter": "^4.0.2",
     "jest-fetch-mock": "^3.0.3",
+    "js-md5": "^0.8.3",
+    "kbase-policies": "github:kbase/policies",
     "leaflet": "^1.9.4",
     "marked": "^4.2.12",
     "node-sass": "^9.0.0",

src/app/App.module.scss

@@ -39,6 +39,7 @@
 
     .left_navbar {
       background-color: use-color("white");
+      border-right: 1px solid use-color("silver");
       flex-grow: 0;
       flex-shrink: 0;
       max-height: 100%;
@@ -53,6 +54,8 @@
       flex-shrink: 1;
       max-height: 100%;
       overflow-y: auto;
+      padding-bottom: 1rem;
+      padding-top: 1rem;
       position: relative;
     }
   }

src/app/App.tsx

@@ -60,15 +60,15 @@ const App: FC = () => {
         <div className={classes.left_navbar}>
           <LeftNavBar />
         </div>
-        <div className={classes.page_content}>
+        <main className={classes.page_content}>
           <ErrorBoundary FallbackComponent={ErrorPage}>
             <Loader loading={isLoading}>
               <Routes />
             </Loader>
             <Toaster />
             <ModalDialog />
           </ErrorBoundary>
-        </div>
+        </main>
       </div>
     </div>
   );

src/app/Routes.tsx

@@ -1,5 +1,6 @@
 import { FC, ReactElement } from 'react';
 import {
+  createSearchParams,
   Navigate,
   Route,
   Routes as RRRoutes,
@@ -27,17 +28,23 @@ import {
 } from '../common/hooks';
 import ORCIDLinkFeature from '../features/orcidlink';
 import { LogIn } from '../features/login/LogIn';
+import { LogInContinue } from '../features/login/LogInContinue';
+import { LoggedOut } from '../features/login/LoggedOut';
+import { SignUp } from '../features/signup/SignUp';
 import ORCIDLinkCreateLink from '../features/orcidlink/CreateLink';
 
-export const LOGIN_ROUTE = '/legacy/login';
+export const LOGIN_ROUTE = '/login';
+export const SIGNUP_ROUTE = '/signup';
 export const ROOT_REDIRECT_ROUTE = '/narratives';
 
 const Routes: FC = () => {
   useFilteredParams();
   usePageTracking();
   return (
     <RRRoutes>
+      {/* Legacy */}
       <Route path={`${LEGACY_BASE_ROUTE}/*`} element={<Legacy />} />
+
       <Route path="/status" element={<Status />} />
       <Route
         path="/profile/:usernameRequested/narratives"
@@ -54,6 +61,11 @@ const Routes: FC = () => {
 
       {/* Log In */}
       <Route path="/login" element={<LogIn />} />
+      <Route path="/login/continue" element={<LogInContinue />} />
+      <Route path="/loggedout" element={<LoggedOut />} />
+
+      {/* Sign Up */}
+      <Route path={`${SIGNUP_ROUTE}/:step?`} element={<SignUp />} />
 
       {/* Navigator */}
       <Route
@@ -119,14 +131,19 @@ const Routes: FC = () => {
 export const Authed: FC<{ element: ReactElement }> = ({ element }) => {
   const token = useAppSelector((state) => state.auth.token);
   const location = useLocation();
-  if (!token)
+  if (!token) {
     return (
       <Navigate
-        to={LOGIN_ROUTE}
+        to={{
+          pathname: LOGIN_ROUTE,
+          search: createSearchParams({
+            nextRequest: JSON.stringify(location),
+          }).toString(),
+        }}
         replace
-        state={{ preLoginPath: location.pathname }}
       />
     );
+  }
 
   return <>{element}</>;
 };

src/app/store.ts

@@ -8,6 +8,7 @@ import navigator from '../features/navigator/navigatorSlice';
 import orcidlink from '../features/orcidlink/orcidlinkSlice';
 import params from '../features/params/paramsSlice';
 import profile from '../features/profile/profileSlice';
+import signup from '../features/signup/SignupSlice';
 
 const everyReducer = combineReducers({
   auth,
@@ -18,6 +19,7 @@ const everyReducer = combineReducers({
   params,
   profile,
   orcidlink,
+  signup,
   [baseApi.reducerPath]: baseApi.reducer,
 });
 

src/common/api/authService.ts

@@ -30,12 +30,73 @@ interface AuthParams {
     search: string;
     token: string;
   };
+  getLoginChoice: void;
+  postLoginPick: { id: string; policyids: string[] };
+  loginUsernameSuggest: string;
+  loginCreate: {
+    id: string;
+    user: string;
+    display: string;
+    email: string;
+    linkall: false;
+    policyids: string[];
+  };
 }
 
 interface AuthResults {
   getMe: Me;
   getUsers: Record<string, string>;
   searchUsers: Record<string, string>;
+  getLoginChoice: {
+    // cancelurl: string;
+    create: {
+      availablename: string;
+      id: string;
+      provemail: string;
+      provfullname: string;
+      provusername: string;
+    }[];
+    // createurl: string;
+    creationallowed: true;
+    expires: number;
+    login: {
+      adminonly: boolean;
+      disabled: boolean;
+      id: string;
+      loginallowed: true;
+      policyids: {
+        agreedon: number;
+        id: string;
+      }[];
+      provusernames: string[];
+      user: string;
+    }[];
+    // pickurl: string;
+    provider: string;
+    // redirecturl: string | null;
+    // suggestnameurl: string;
+  };
+  postLoginPick: {
+    redirecturl: null | string;
+    token: {
+      agent: string;
+      agentver: string;
+      created: number;
+      custom: unknown;
+      device: unknown;
+      expires: number;
+      id: string;
+      ip: string;
+      name: unknown;
+      os: unknown;
+      osver: unknown;
+      token: string;
+      type: string;
+      user: string;
+    };
+  };
+  loginUsernameSuggest: { availablename: string };
+  loginCreate: AuthResults['postLoginPick'];
 }
 
 // Auth does not use JSONRpc, so we use queryFn to make custom queries
@@ -102,8 +163,72 @@ export const authApi = baseApi.injectEndpoints({
           method: 'DELETE',
         }),
     }),
+    getLoginChoice: builder.query<
+      AuthResults['getLoginChoice'],
+      AuthParams['getLoginChoice']
+    >({
+      query: () =>
+        // MUST have an in-process-login-token cookie
+        authService({
+          headers: {
+            accept: 'application/json',
+          },
+          method: 'GET',
+          url: '/login/choice',
+        }),
+    }),
+    postLoginPick: builder.mutation<
+      AuthResults['postLoginPick'],
+      AuthParams['postLoginPick']
+    >({
+      query: (pickedChoice) =>
+        authService({
+          url: encode`/login/pick`,
+          body: pickedChoice,
+          method: 'POST',
+        }),
+    }),
+    loginUsernameSuggest: builder.query<
+      AuthResults['loginUsernameSuggest'],
+      AuthParams['loginUsernameSuggest']
+    >({
+      query: (username) =>
+        // MUST have an in-process-login-token cookie
+        authService({
+          headers: {
+            accept: 'application/json',
+          },
+          method: 'GET',
+          url: `/login/suggestname/${encodeURIComponent(username)}`,
+        }),
+    }),
+    loginCreate: builder.mutation<
+      AuthResults['loginCreate'],
+      AuthParams['loginCreate']
+    >({
+      query: (params) =>
+        // MUST have an in-process-login-token cookie
+        authService({
+          headers: {
+            accept: 'application/json',
+          },
+          method: 'POST',
+          body: params,
+          url: `/login/create/`,
+        }),
+    }),
   }),
 });
 
-export const { authFromToken, getMe, getUsers, searchUsers, revokeToken } =
-  authApi.endpoints;
+export const {
+  authFromToken,
+  getMe,
+  getUsers,
+  searchUsers,
+  revokeToken,
+  getLoginChoice,
+  postLoginPick,
+  loginUsernameSuggest,
+  loginCreate,
+} = authApi.endpoints;
+export type GetLoginChoiceResult = AuthResults['getLoginChoice'];

src/common/api/userProfileApi.ts

@@ -8,12 +8,15 @@ const userProfile = jsonRpcService({
 interface UserProfileParams {
   status: void;
   get_user_profile: { usernames: string[] };
-  set_user_profile: {
+  set_user_profile: [
     profile: {
-      user: { username: string; realname: string };
-      profile: unknown;
-    };
-  };
+      profile: {
+        user: { username: string; realname: string };
+        profile: unknown;
+      };
+    },
+    optionalToken: string | undefined
+  ];
 }
 
 interface UserProfileResults {
@@ -64,13 +67,16 @@ export const userProfileApi = baseApi
         UserProfileResults['set_user_profile'],
         UserProfileParams['set_user_profile']
       >({
-        query: ({ profile }) =>
+        query: ([profile, optionalToken]) =>
           userProfile({
+            fetchArgs: optionalToken
+              ? { headers: { Authorization: optionalToken } }
+              : {},
             method: 'UserProfile.set_user_profile',
-            params: [{ profile }],
+            params: [profile],
           }),
         // Invalidates the cache for any queries with a matching tag
-        invalidatesTags: (result, error, { profile }) => [
+        invalidatesTags: (result, error, [{ profile }]) => [
           { type: 'Profile', id: profile.user.username },
         ],
       }),

src/common/api/utils/kbaseBaseQuery.ts

@@ -28,7 +28,7 @@ export interface JsonRpcQueryArgs {
   service: StaticService | DynamicService;
   method: string;
   params?: unknown;
-  fetchArgs?: FetchArgs;
+  fetchArgs?: Partial<FetchArgs>;
 }
 
 export interface JSONRPC11Body {

src/common/types/auth.ts

@@ -8,7 +8,7 @@ export interface Me {
   idents: Record<string, string>[];
   lastlogin: number;
   local: boolean;
-  policyids: Record<string, string | number>[];
+  policyids: { id: string; agreedon: number }[];
   roles: Record<string, string>[];
   user: string;
 }

src/features/collections/Collections.module.scss

@@ -3,8 +3,6 @@
 $border: 1px solid use-color("base-lighter");
 
 .collections-main {
-  background-color: use-color("base-lightest");
-  border-left: 1px solid use-color("silver");
   min-height: 100%;
 }
 
@@ -22,7 +20,7 @@ $border: 1px solid use-color("base-lighter");
   font-size: 1.25rem;
   font-weight: 500;
   margin: 0;
-  padding: 2rem 1rem 1rem;
+  padding: 1rem;
 }
 
 .collection-card {