ACC-50 Create edit profile page (first name, last name)

package.json

@@ -23,10 +23,10 @@
     "cross-fetch": "^3.0.4",
     "dotenv": "^8.2.0",
     "effector": "^21.8.12",
-    "effector-inspector": "^0.4.1",
+    "effector-inspector": "^0.5.0",
     "effector-react": "^21.3.3",
     "effector-reflect": "^0.3.2",
-    "effector-root": "^1.1.0",
+    "effector-root": "^1.3.0",
     "express": "^4.17.1",
     "history": "^4.10.1",
     "http-proxy-middleware": "^1.0.3",

src/features/navigation/index.ts

@@ -43,3 +43,5 @@ if (process.env.BUILD_TARGET === 'client') {
     fn: ({ pathname, params }) => `${pathname}${queryToString(params)}`,
   });
 }
+
+export { EffectorSsrRedirect } from './lib';

src/features/navigation/lib/effector-ssr-redirect.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useEvent } from 'effector-react/ssr';
+import { historyPush } from '../index';
+
+/**
+ * A component similar to 'Redirect' from 'react-router'
+ * need to use this instead of original component,
+ * because the one from 'react-router' does not work with ssr
+ * */
+export const EffectorSsrRedirect = ({ href }: { href: string }) => {
+  const push = useEvent(historyPush);
+  useEffect(() => {
+    push(href);
+  }, [push, href]);
+  return null;
+};

src/features/navigation/lib/index.ts

@@ -0,0 +1 @@
+export { EffectorSsrRedirect } from './effector-ssr-redirect';

src/globals.ts

@@ -22,7 +22,7 @@ export const Globals = createGlobalStyle`
     --block-shadow: 0 3px 12px -3px var(--border-color);
 
     /* titles */
-    --title-color: var(--black)
+    --title-color: var(--black);
     --title-height: 1.2rem;
 
     --h1-font-size: 4.2rem;

src/lib/sleep.ts

@@ -0,0 +1,3 @@
+export function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

src/pages/access-recovery/confirm/page.tsx

@@ -44,7 +44,7 @@ export const AccessRecoveryConfirmPage = withStart(pageStart, () => (
         <RepeatPassword placeholder="Repeat password" type="password" />
         <Failure />
         <Group>
-          <Submit text="Save password" variant="primary" />
+          <Submit text="Save password" />
         </Group>
       </Form>
     </Container>

src/pages/home/page.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import { createEvent } from 'effector-root';
+import { useStore } from 'effector-react/ssr';
+import { reflect } from 'effector-reflect/ssr';
 import styled from 'styled-components';
 import { Button } from 'woly';
 import { withStart, createStart } from 'lib/page-routing';
-import { useStore } from 'effector-react/ssr';
-import { createEvent } from 'effector-root';
-import { reflect } from 'effector-reflect/ssr';
 import { $fullName, $showError } from './model';
 
 export const pageStarted = createStart();

src/pages/login/page.tsx

@@ -7,7 +7,7 @@ import { createEvent, createStore } from 'effector-root';
 import { reflect } from 'effector-reflect/ssr';
 import { withStart, createStart } from 'lib/page-routing';
 import Logo from 'logo.svg';
-import { CenterCardTemplate } from '@auth/ui';
+import { CenterCardTemplate } from 'ui';
 
 import { path } from 'pages/paths';
 import { Failure } from './types';

src/pages/paths.ts

@@ -6,4 +6,9 @@ export const path = {
   accessRecovery: () => '/access-recovery',
   accessRecoveryConfirm: (code: string) => `/access-recovery/confirm-${code}`,
   oauthAuthorize: () => '/oauth/authorize',
+  settings: {
+    base: () => '/settings',
+    profile: () => `${path.settings.base()}/profile`,
+    emails: () => `${path.settings.base()}/emails`,
+  },
 };

src/pages/routes.ts

@@ -8,6 +8,7 @@ import { RegisterConfirmPage } from './register/confirm';
 import { RegisterPage } from './register';
 import { AccessRecoveryPage } from './access-recovery';
 import { AccessRecoveryConfirmPage } from './access-recovery/confirm';
+import { SettingsPage } from './settings';
 
 export const routes = [
   {
@@ -45,6 +46,11 @@ export const routes = [
     exact: true,
     component: AccessRecoveryConfirmPage,
   },
+  {
+    path: path.settings.base(),
+    exact: false,
+    component: SettingsPage,
+  },
   {
     path: '*',
     component: Error404Page,

src/pages/settings/emails/index.ts

@@ -0,0 +1,22 @@
+import { sample } from 'effector-root';
+import { contract } from 'lib/contract';
+import * as model from './model';
+import * as page from './page';
+
+export { EmailsProfilePage } from './page';
+
+sample({
+  clock: page.newEmailChanged,
+  fn: (e) => e.target.value,
+  target: model.changeEmail,
+});
+contract({
+  page,
+  model: {
+    ...model,
+    formSubmitted: model.submitForm.prepend(() => undefined),
+    $userNewEmail: model.$newEmail,
+    passwordChanged: model.changePassword.prepend((e) => e.target.value),
+    newEmailChanged: model.changeEmail.prepend((e) => e.target.value),
+  },
+});

src/pages/settings/emails/model.ts

@@ -0,0 +1,81 @@
+import {
+  combine,
+  createStore,
+  createEffect,
+  createEvent,
+  restore,
+  guard,
+} from 'effector-root';
+import { sleep } from 'lib/sleep';
+import { validateEmail } from 'lib/email';
+import { EmailErrorType, RequestFailure } from './types';
+
+const requestFx = createEffect(
+  async (req: { email: string; password: string }) => {
+    await sleep(2000);
+    const isSuccess = Math.random() > 0.5;
+    if (isSuccess) return req;
+
+    throw {
+      type: RequestFailure.required,
+    };
+  },
+);
+
+const changeEmail = createEvent<string>();
+const $newEmail = restore(changeEmail, '');
+const changePassword = createEvent<string>();
+const $password = restore(changePassword, '');
+
+const $emailError = $newEmail.map((email) => {
+  if (!email) return EmailErrorType.required;
+  if (!validateEmail(email)) return EmailErrorType.invalid;
+  return null;
+});
+const $isEmailValid = $emailError.map((error) => !error);
+const $isPasswordValid = $password.map(Boolean);
+
+const $isFormValid = combine(
+  $isEmailValid,
+  $isPasswordValid,
+  (isEmail, isPw) => isEmail && isPw,
+);
+
+const $isFormPending = requestFx.pending;
+
+const $isSubmitDisabled = combine(
+  $isFormValid,
+  $isFormPending,
+  (isValid, isPending) => !isValid || isPending,
+);
+
+const $isFormDisabled = $isFormPending.map((is) => is);
+
+const $errorType = createStore<RequestFailure | null>(null);
+
+const submitForm = createEvent();
+
+requestFx.finally.watch((res) => {
+  if (res.status === 'fail') console.log(res.error);
+  if (res.status === 'done') console.log(res.result);
+});
+
+guard({
+  clock: submitForm,
+  filter: $isSubmitDisabled.map((is) => !is),
+  source: { email: $newEmail, password: $password },
+  target: requestFx,
+});
+
+export {
+  submitForm,
+  $newEmail,
+  changeEmail,
+  $password,
+  changePassword,
+  $emailError,
+  $isFormDisabled,
+  $isSubmitDisabled,
+  $isFormPending,
+  $errorType,
+};

src/pages/settings/emails/page.tsx

@@ -0,0 +1,128 @@
+import React, { ChangeEvent, FormEvent } from 'react';
+import styled from 'styled-components';
+import { reflect } from 'effector-reflect';
+import { Button, Form, Input, Title } from 'woly';
+import { createEvent, createStore, StoreValue } from 'effector-root';
+import { EmailErrorType, RequestFailure } from './types';
+
+export const formSubmitted = createEvent<FormEvent>();
+
+export const $userNewEmail = createStore('');
+export const newEmailChanged = createEvent<ChangeEvent<HTMLInputElement>>();
+export const $password = createStore('');
+export const passwordChanged = createEvent<ChangeEvent<HTMLInputElement>>();
+
+export const $emailError = createStore<EmailErrorType | null>(null);
+const $emailErrorMessage = $emailError.map((error) => {
+  if (error === EmailErrorType.required) return 'Email is required';
+  if (error === EmailErrorType.invalid) return 'Email is invalid';
+  return null;
+});
+const $passwordErrorMessage = $password.map((pw) => {
+  if (!pw) return 'Password is required';
+  return null;
+});
+
+export const $isFormDisabled = createStore(false);
+export const $isSubmitDisabled = createStore(false);
+
+export const $isFormPending = createStore(false);
+const $submitText = $isFormPending.map((is) => (is ? 'Sending...' : 'Change'));
+
+export const $errorType = createStore<RequestFailure | null>(null);
+const $errorText = $errorType.map((errorType) => {
+  if (!errorType) return null;
+  return 'AAAA';
+});
+
+export const EmailsProfilePage = () => {
+  return (
+    <FormWrapper>
+      <EmailForm>
+        <Title level={1}>Change email form</Title>
+        <Title level={2}>Email</Title>
+        <Email placeholder="your new email" />
+        <EmailError />
+        <Title level={2}>Password</Title>
+        <Password placeholder="password" type="password" />
+        <PasswordError />
+        <ErrorBlock />
+        <Submit type="submit" />
+      </EmailForm>
+    </FormWrapper>
+  );
+};
+
+const Email = reflect({
+  view: Input,
+  bind: {
+    value: $userNewEmail,
+    onChange: newEmailChanged,
+    disabled: $isFormDisabled,
+  },
+});
+const Password = reflect({
+  view: Input,
+  bind: {
+    value: $password,
+    onChange: passwordChanged,
+    disabled: $isFormDisabled,
+  },
+});
+const EmailError = reflect({
+  view: ({ error }: { error: StoreValue<typeof $emailErrorMessage> }) => {
+    if (error) return <ErrorTitle>{error}</ErrorTitle>;
+    return null;
+  },
+  bind: {
+    error: $emailErrorMessage,
+  },
+});
+const PasswordError = reflect({
+  view: ({ error }: { error: StoreValue<typeof $passwordErrorMessage> }) => {
+    if (error) return <ErrorTitle>{error}</ErrorTitle>;
+    return null;
+  },
+  bind: {
+    error: $passwordErrorMessage,
+  },
+});
+
+const ErrorBlock = reflect({
+  view: ({ failure }: { failure: string | null }) => {
+    if (failure) {
+      return <Fail>{failure}</Fail>;
+    }
+    return null;
+  },
+  bind: {
+    failure: $errorText,
+  },
+});
+
+const Submit = reflect({
+  view: Button,
+  bind: {
+    disable: $isSubmitDisabled,
+    text: $submitText,
+  },
+});
+
+const EmailForm = reflect({
+  view: Form,
+  bind: {
+    onSubmit: formSubmitted,
+  },
+});
+
+const Fail = styled.div`
+  font-size: 1.3rem;
+  margin-bottom: 1rem;
+`;
+const ErrorTitle = styled.span`
+  color: red;
+  display: block;
+`;
+const FormWrapper = styled.div`
+  padding: 3rem;
+`;

src/pages/settings/emails/types.ts

@@ -0,0 +1,7 @@
+export enum EmailErrorType {
+  required = 'required',
+  invalid = 'invalid',
+}
+export enum RequestFailure {
+  required = 'required',
+}

src/pages/settings/index.ts

@@ -0,0 +1,7 @@
+import { contract } from 'lib/contract';
+import * as page from './page';
+import * as model from './model';
+
+export { SettingsPage } from './page';
+
+contract({ page, model });

src/pages/settings/model.ts

@@ -0,0 +1,5 @@
+import { createStart } from 'lib/page-routing';
+import { checkAuthenticated } from '../../features/session';
+
+export const pageStarted = createStart();
+checkAuthenticated({ when: pageStarted });

src/pages/settings/page.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { EffectorSsrRedirect } from 'features/navigation';
+import { createStart, withStart } from 'lib/page-routing';
+import { path } from '../paths';
+import { SettingsProfilePage } from './profile';
+import { EmailsProfilePage } from './emails';
+
+export const pageStarted = createStart();
+
+export const SettingsPage = withStart(pageStarted, () => {
+  return (
+    <Switch>
+      <Route exact path={path.settings.profile()}>
+        <SettingsProfilePage />
+      </Route>
+      <Route exact path={path.settings.emails()}>
+        <EmailsProfilePage />
+      </Route>
+      <Route path="*">
+        <EffectorSsrRedirect href={path.settings.profile()} />
+      </Route>
+    </Switch>
+  );
+});