Mobile auth - wip

capacitor.config.json

@@ -1,6 +1,6 @@
 {
-  "appId": "com.proroute.restspace",
-  "appName": "RestSpace",
+  "appId": "com.proroute.WeWatchApp",
+  "appName": "WeWatchApp",
   "bundledWebRuntime": false,
   "npmClient": "npm",
   "webDir": "out",

components/Menu.tsx

@@ -83,7 +83,7 @@ const Menu = () => {
     <IonMenu side="start" contentId="main" onIonDidOpen={handleOpen} onIonDidClose={handleClose} swipeGesture={false}>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>RestSpace</IonTitle>
+          <IonTitle>We Watch</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent>

components/auth/Forgot.tsx

@@ -78,8 +78,8 @@ export const Forgot = ({sendPhoneNumberFnc, sendAuthStateFnc}) => {
           <div className="sm:mx-auto sm:w-full sm:max-w-md">
             <img
               className="mx-auto h-12 w-auto"
-              src="/svgs/restspace_logo_blk.svg"
-              alt="RestSpace"
+              src="/imgs/WeWatch/WeWatch_LogoStrap_black.svg"
+              alt="WeWatch"
             />
             <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Reset account password</h2>
             <p className="mt-2 text-center text-sm text-gray-600">

components/auth/Login.tsx

@@ -89,8 +89,8 @@ export const Login = ({sendPhoneNumberFnc, sendAuthStateFnc}) => {
           <div className="sm:mx-auto sm:w-full sm:max-w-md">
             <img
               className="mx-auto h-12 w-auto"
-              src="/svgs/restspace_logo_blk.svg"
-              alt="RestSpace"
+              src="/imgs/WeWatch/WeWatch_LogoStrap_black.svg"
+              alt="WeWatch"
             />
             <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Sign in to your account</h2>
             <p className="mt-2 text-center text-sm text-gray-600">

components/auth/Signup.tsx

@@ -107,8 +107,8 @@ export const Signup = ({sendPhoneNumberFnc, sendAuthStateFnc}) => {
           <div className="sm:mx-auto sm:w-full sm:max-w-md">
             <img
               className="mx-auto h-12 w-auto"
-              src="/svgs/restspace_logo_blk.svg"
-              alt="RestSpace"
+              src="/imgs/WeWatch/WeWatch_LogoStrap_black.svg"
+              alt="WeWatch"
             />
             <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Sign up for an account</h2>
             <p className="mt-2 text-center text-sm text-gray-600">

components/auth/UpdatePassword.tsx

@@ -151,8 +151,8 @@ export const UpdatePassword = ( {phoneNumber, displayPhoneNumber, sendAuthStateF
           <div className="sm:mx-auto sm:w-full sm:max-w-md">
             <img
               className="mx-auto h-12 w-auto"
-              src="/svgs/restspace_logo_blk.svg"
-              alt="RestSpace"
+              src="/imgs/WeWatch/WeWatch_LogoStrap_black.svg"
+              alt="WeWatch"
             />
             <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Verify</h2>
             <p className="mt-2 text-center text-sm text-gray-600">

components/auth/Verify.tsx

@@ -142,8 +142,8 @@ export const Verify = ( {phoneNumber, displayPhoneNumber, sendAuthStateFnc}) =>
           <div className="sm:mx-auto sm:w-full sm:max-w-md">
             <img
               className="mx-auto h-12 w-auto"
-              src="/svgs/restspace_logo_blk.svg"
-              alt="RestSpace"
+              src="/imgs/WeWatch/WeWatch_LogoStrap_black.svg"
+              alt="WeWatch"
             />
             <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Verify</h2>
             <p className="mt-2 text-center text-sm text-gray-600">

components/cards/UpgradeCard.tsx

@@ -10,12 +10,12 @@ export const UpgradeCard = () => {
         <div className="my-30">
             <br/>
             <a href="https://itunes.apple.com/us/app/restspace/id1266607495?ls=1&mt=8" className="w-full text-center mx-auto my-20">
-              <img  alt="App Store" src="/img/app-store.svg"  className="w-full text-center"/>
+              <img  alt="App Store" src="/imgs/app-store.svg"  className="w-full text-center"/>
             </a>
             <br/>
             <br/>
             <a href="https://play.google.com/store/apps/details?id=com.proroute.restspace" className="w-full text-center my-20">
-              <img  alt="Play Store" src="/img/google-play-badge.png"  className="w-full text-center"/>
+              <img  alt="Play Store" src="/imgs/google-play-badge.png"  className="w-full text-center"/>
             </a>
             <br/>
         </div>

components/pages/Forgot.tsx

@@ -55,7 +55,6 @@ export const ForgotPage = ({history}) => {
           </IonToolbar>
         </IonHeader>
         <IonContent>
-            {authMode}
             { authMode == 'forgot' && <Forgot sendPhoneNumberFnc={callSetPhoneNumber} sendAuthStateFnc={callSetAuthMode} />}
             { authMode == 'update' && <UpdatePassword phoneNumber={phoneNumber} displayPhoneNumber={displayPhoneNumber} sendAuthStateFnc={callSetAuthMode}/>}
             { authMode == 'post' && <p>reset, lets TODO next step delayed route</p>}

components/pages/Home.tsx

@@ -0,0 +1,62 @@
+import {
+  IonPage,
+  IonHeader,
+  IonItem,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonList,
+  IonToggle,
+  IonLabel,
+  IonCard,
+  IonCardContent,
+  IonButtons,
+  IonMenuButton,
+} from '@ionic/react';
+
+import Store from '../../store';
+import * as selectors from '../../store/selectors';
+import { setSettings } from '../../store/actions';
+import React from 'react';
+
+const Home = () => {
+  const settings = Store.useState(selectors.getSettings);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Home</IonTitle>
+          <IonButtons slot="start">
+            <IonMenuButton />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        {/* <IonList>
+          <IonItem>
+            <IonLabel>Enable Notifications</IonLabel>
+            <IonToggle
+              checked={settings.enableNotifications}
+              onIonChange={e => {
+                setSettings({
+                  ...settings,
+                  enableNotifications: e.target.checked,
+                });
+              }}
+            />
+          </IonItem>
+        </IonList> */}
+
+        <h2>Welcome back</h2>
+
+        <IonCard>
+         TODO
+        </IonCard>
+
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

components/pages/Settings.tsx

@@ -54,7 +54,7 @@ const Settings = () => {
           </IonItem>
 
           <IonCardContent>
-            If you have an issue please email support at <a href="mailto:restspace@proroute.co">restspace@proroute.co</a>
+            If you have an issue please email support at <a href="mailto:admin@wewatchapp.com">admin@wewatchapp.com</a>
           </IonCardContent>
           <IonCardContent>
             We hope you find this product useful, we accept no liability for usage or information supplied.

components/pages/Tabs.tsx

@@ -1,7 +1,7 @@
 import { Redirect, Route } from 'react-router-dom';
 import { IonRouterOutlet, IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonToast, IonContent, IonPopover } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import { cog, bookmark, map, list, add } from 'ionicons/icons';
+import { cog, bookmark, map, list, add, home } from 'ionicons/icons';
 import Bookmarked from './Bookmarked';
 import Map from './Map';
 import Lists from './Lists';
@@ -15,8 +15,10 @@ import ForgotPage from './Forgot';
 import UpdatePasswordPage from './UpdatePassword';
 import TourPage from './Tour';
 import NewDetail from './NewDetail';
+import Home from './Home';
 import { useSupabaseClient } from '@supabase/auth-helpers-react';
 
+
 const Tabs = () => {
 
 
@@ -33,22 +35,24 @@ const Tabs = () => {
         <Route path="/tabs/terms" component={Terms} exact={true} />
 
         <Route path="/tabs/new" component={NewDetail} exact={true} />
+        <Route path="/tabs/home" component={Home} exact={true} />
         <Route path="/tabs/map" component={Map} exact={true} />
         <Route path="/tabs/lists" component={Lists} exact={true} />
         <Route path="/tabs/bookmarked" component={Bookmarked} exact={true} />
         <Route path="/tabs/lists/:listId" component={ListDetail} exact={true} />
 
-        <Route path="/tabs" render={() => <Redirect to="/tabs/map" />} exact={true} />
+        <Route path="/tabs" render={() => <Redirect to="/tabs/home" />} exact={true} />
       </IonRouterOutlet>
       <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/tabs/map">
+        <IonTabButton tab="tab1" href="/tabs/home">
+          <IonIcon icon={home} />
+          <IonLabel>Home</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="tab2" href="/tabs/map">
           <IonIcon icon={map} />
           <IonLabel>Map</IonLabel>
         </IonTabButton>
-        <IonTabButton tab="tab2" href="/tabs/lists">
-          <IonIcon icon={list} />
-          <IonLabel>Lists</IonLabel>
-        </IonTabButton>
+
         <IonTabButton tab="tab3" href="/tabs/new">
           <IonIcon icon={add} size="large"/>
           <IonLabel></IonLabel>

components/pages/Tour.tsx

@@ -11,7 +11,7 @@ import {
 } from '@ionic/react';
 
 
-import { cog, bookmark, map, filter, eyeOffOutline } from 'ionicons/icons';
+import { cog, bookmark, map, filter, notifications } from 'ionicons/icons';
 import React from 'react';
 import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -52,7 +52,7 @@ const TourPage = () => {
                   <div className="h-full">
                     <img
                       className="h-full w-auto object-fill"
-                      src="/img/splash.png"
+                      src="/imgs/splash.png"
                       alt=""
                     />
                 </div>
@@ -69,7 +69,7 @@ const TourPage = () => {
                           </div>
                           <h3 className="text-xl font-medium text-gray-900">Dynamic Map</h3>
                           <p className="mt-4 text-base text-gray-500">
-                            Find closest Rest Areas fast with interactive maps
+                            Find out about the incident in your area with interactive maps
                           </p>
                         </div>
                         <div className="rounded-bl-2xl rounded-br-2xl bg-gray-50 p-6 md:px-8">
@@ -89,7 +89,7 @@ const TourPage = () => {
                   <div className="h-full">
                     <img
                       className="h-full w-auto object-fill"
-                      src="/img/splash.png"
+                      src="/imgs/splash.png"
                       alt=""
                     />
                 </div>
@@ -106,7 +106,7 @@ const TourPage = () => {
                           </div>
                           <h3 className="text-xl font-medium text-gray-900">Bookmark</h3>
                           <p className="mt-4 text-base text-gray-500">
-                            Create a free account to save your favourites
+                            Create a free account to bookmark incident to help you stay informed
                           </p>
                         </div>
                         <div className="rounded-bl-2xl rounded-br-2xl bg-gray-50 p-6 md:px-8">
@@ -124,7 +124,7 @@ const TourPage = () => {
                   <div className="h-full">
                     <img
                       className="h-full w-auto object-fill"
-                      src="/img/splash.png"
+                      src="/imgs/splash.png"
                       alt=""
                     />
                 </div>
@@ -141,7 +141,7 @@ const TourPage = () => {
                           </div>
                           <h3 className="text-xl font-medium text-gray-900">Filtering</h3>
                           <p className="mt-4 text-base text-gray-500">
-                            Simple filters to find what you need ASAP
+                            Simple filters to help you find what you need ASAP
                           </p>
                         </div>
                         <div className="rounded-bl-2xl rounded-br-2xl bg-gray-50 p-6 md:px-8">
@@ -159,7 +159,7 @@ const TourPage = () => {
                   <div className="h-full">
                     <img
                       className="h-full w-auto object-fill"
-                      src="/img/splash.png"
+                      src="/imgs/splash.png"
                       alt=""
                     />
                 </div>
@@ -172,11 +172,11 @@ const TourPage = () => {
                       <div  className="flex flex-col rounded-2xl bg-white shadow-xl">
                         <div className="relative flex-1 px-6 pt-16 pb-8 md:px-8">
                           <div className="top-0 inline-block -translate-y-1/2 transform rounded-xl bg-indigo-600 p-5 shadow-lg">
-                            <IonIcon icon={eyeOffOutline} color="light" />
+                            <IonIcon icon={notifications} color="light" />
                           </div>
-                          <h3 className="text-xl font-medium text-gray-900">Tracking</h3>
+                          <h3 className="text-xl font-medium text-gray-900">Keep in the Loop</h3>
                           <p className="mt-4 text-base text-gray-500">
-                            We do not track users
+                           We have notifications to let you if there is an incident in your area
                           </p>
                         </div>
                         <div className="rounded-bl-2xl rounded-br-2xl bg-gray-50 p-6 md:px-8">

next.config.js

@@ -2,8 +2,9 @@ module.exports = {
   experimental: {
     appDir: false,
   },
+  swcMinify: true,
   env: {
     NEXT_PUBLIC_SUPABASE_URL:'https://arvqjbylexvdpyooykji.supabase.co',
     NEXT_PUBLIC_SUPABASE_ANON_KEY:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFydnFqYnlsZXh2ZHB5b295a2ppIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTMxMTk1MzUsImV4cCI6MTk2ODY5NTUzNX0.09341SKltY0PCODodzrDD1RQDXB5tA5dnMc-jQbKPag'
-  },
+  }
 };