feat(preferences): not logged in segment (#649)

* feat(preferences): not logged in segment

* Update app/assets/javascripts/preferences/panes/account/Authentication.tsx

Co-authored-by: Mo Bitar <mo@standardnotes.org>

* Update app/assets/javascripts/preferences/panes/account/Authentication.tsx

Co-authored-by: Mo Bitar <mo@standardnotes.org>

Co-authored-by: Mo Bitar <mo@standardnotes.org>

app/assets/javascripts/preferences/components/Content.tsx

@@ -4,8 +4,8 @@ export const Title: FunctionComponent = ({ children }) => (
   <h2 className="text-base m-0 mb-1">{children}</h2>
 );
 
-export const Subtitle: FunctionComponent = ({ children }) => (
-  <h4 className="font-medium text-sm m-0 mb-1">{children}</h4>
+export const Subtitle: FunctionComponent<{ className?: string }> = ({ children, className = "" }) => (
+  <h4 className={`font-medium text-sm m-0 mb-1 ${className}`}>{children}</h4>
 );
 
 export const Text: FunctionComponent<{ className?: string }> = ({

app/assets/javascripts/preferences/components/PreferencesPane.tsx

@@ -6,13 +6,13 @@ export const PreferencesPane: FunctionComponent = ({ children }) => (
       <div className="w-125 max-w-125 flex flex-col">
         {children != undefined && Array.isArray(children)
           ? children
-              .filter((child) => child != undefined)
-              .map((child) => (
-                <>
-                  {child}
-                  <div className="min-h-3" />
-                </>
-              ))
+            .filter((child) => child != undefined)
+            .map((child) => (
+              <>
+                {child}
+                <div className="min-h-3" />
+              </>
+            ))
           : children}
       </div>
     </div>

app/assets/javascripts/preferences/panes/AccountPreferences.tsx

@@ -3,6 +3,7 @@ import {
   SubscriptionWrapper,
   Credentials,
   LogOutWrapper,
+  Authentication,
 } from '@/preferences/panes/account';
 import { PreferencesPane } from '@/preferences/components';
 import { observer } from 'mobx-react-lite';
@@ -16,6 +17,17 @@ type Props = {
 
 export const AccountPreferences = observer(
   ({ application, appState }: Props) => {
+    const isLoggedIn = application.getUser();
+
+    if (!isLoggedIn) {
+      return (
+        <PreferencesPane>
+          <Authentication application={application} appState={appState} />
+          <LogOutWrapper application={application} appState={appState} />
+        </PreferencesPane>
+      );
+    }
+
     return (
       <PreferencesPane>
         <Credentials application={application} />

app/assets/javascripts/preferences/panes/account/Authentication.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@/components/Button";
+import { PreferencesGroup, PreferencesSegment, Subtitle, Text, Title } from "@/preferences/components";
+import { WebApplication } from "@/ui_models/application";
+import { AppState } from "@/ui_models/app_state";
+import { observer } from "mobx-react-lite";
+import { FunctionComponent } from "preact";
+
+export const Authentication: FunctionComponent<{ application: WebApplication, appState: AppState }> =
+  observer(({ appState }) => {
+
+    const clickSignIn = () => {
+      appState.preferences.closePreferences();
+      appState.accountMenu.setShowLogin(true);
+      appState.accountMenu.setShow(true);
+    };
+
+    const clickRegister = () => {
+      appState.preferences.closePreferences();
+      appState.accountMenu.setShowRegister(true);
+      appState.accountMenu.setShow(true);
+    };
+
+    return (
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <div className="flex flex-col items-center px-12">
+            <Title>You're not signed in</Title>
+            <Subtitle className="text-center">Sign in to sync your notes and preferences across all your devices and enable end-to-end encryption.</Subtitle>
+            <div className="min-h-3" />
+            <div className="flex flex-row w-full">
+              <Button type="primary" onClick={clickSignIn} label="Sign in" className="flex-grow" />
+              <div className="min-w-3" />
+              <Button type="primary" onClick={clickRegister} label="Register" className="flex-grow" />
+            </div>
+            <div className="min-h-3" />
+            <Text className="text-center">Standard Notes is free on every platform, and comes standard with sync and encryption.</Text>
+          </div>
+        </PreferencesSegment>
+      </PreferencesGroup>
+    );
+  });

app/assets/javascripts/preferences/panes/account/Credentials.tsx

@@ -7,12 +7,13 @@ import { dateToLocalizedString } from '@/utils';
 import { useState } from 'preact/hooks';
 import { ChangeEmail } from '@/preferences/panes/account/changeEmail';
 import { PasswordWizardType } from '@/types';
+import { FunctionComponent } from 'preact';
 
 type Props = {
   application: WebApplication;
 };
 
-export const Credentials = observer(({ application }: Props) => {
+export const Credentials: FunctionComponent<Props> = observer(({ application }: Props) => {
   const [isChangeEmailDialogOpen, setIsChangeEmailDialogOpen] = useState(false);
 
   const user = application.getUser();

app/assets/javascripts/preferences/panes/account/Sync.tsx

@@ -6,12 +6,13 @@ import { useState } from '@node_modules/preact/hooks';
 import { dateToLocalizedString } from '@/utils';
 import { observer } from '@node_modules/mobx-react-lite';
 import { WebApplication } from '@/ui_models/application';
+import { FunctionComponent } from 'preact';
 
 type Props = {
   application: WebApplication;
 };
 
-export const Sync = observer(({ application }: Props) => {
+export const Sync: FunctionComponent<Props> = observer(({ application }: Props) => {
   const formatLastSyncDate = (lastUpdatedDate: Date) => {
     return dateToLocalizedString(lastUpdatedDate);
   };

app/assets/javascripts/preferences/panes/account/index.ts

@@ -2,3 +2,4 @@ export { SubscriptionWrapper } from './subscription/SubscriptionWrapper';
 export { Sync } from './Sync';
 export { Credentials } from './Credentials';
 export { LogOutWrapper } from './LogOutView';
+export { Authentication } from './Authentication';

app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx

@@ -10,13 +10,14 @@ import { SubscriptionInformation } from './SubscriptionInformation';
 import { NoSubscription } from './NoSubscription';
 import { Text } from '@/preferences/components';
 import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
 
 type Props = {
   application: WebApplication;
   subscriptionState: SubscriptionState;
 };
 
-export const Subscription = observer(({
+export const Subscription: FunctionComponent<Props> = observer(({
   application,
   subscriptionState,
 }: Props) => {

app/assets/stylesheets/_sn.scss

@@ -247,6 +247,11 @@
   padding-right: 2.25rem;
 }
 
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
 .py-9 {
   padding-top: 2.25rem;
   padding-bottom: 2.25rem;