logout and info

api/src/api.ts

@@ -167,11 +167,8 @@ export default function createApi(log: Log, pg: Pg, discogs, offers, events) {
         ctx.assert(ctx.isAuthenticated(), 401, 'log in required');
         const { username } = ctx.request.body;
         const user = await pg.userFindId(ctx.state.user.id);
-
         const wants = await discogs.wantListSync(username, user);
-
         events.emit(Events.WantsAdded, wants);
-
         ctx.response.body = wants;
     });
 
@@ -189,6 +186,13 @@ export default function createApi(log: Log, pg: Pg, discogs, offers, events) {
         ctx.response.body = results;
     });
 
+    router.post('/auth/logout', async (ctx, next) => {
+        ctx.assert(ctx.isAuthenticated(), 401, 'log in required');
+        ctx.logout();
+        ctx.status = 200;
+        ctx.body = { success: true };
+    });
+
     app.use(router.routes());
 
     return {

api/src/discogs.ts

@@ -47,6 +47,9 @@ export default function createDiscogs(log: Log, pg: Pg) {
         const results = await Promise.allSettled(releases.map(release => pg.wantCreate(release, user)));
         // @ts-ignore
         const additions = results.filter(r => r.status === 'fulfilled').map(r => r.value);
+
+        log.info(additions);
+
         return additions;
     }
 

api/src/routers/router.auth.ts

@@ -39,7 +39,6 @@ export default function authRouter(log, pg: Pg) {
     authRouter.post('/login', async (ctx, next) => {
         await passport.authenticate('local', (err, user, info, status) => {
             ctx.assert(user, 401, 'incorrect login');
-
             ctx.login(user);
             ctx.status = 200;
             ctx.body = {
@@ -59,15 +58,6 @@ export default function authRouter(log, pg: Pg) {
         };
     });
 
-    authRouter.post('/logout', async (ctx, next) => {
-        await passport.authenticate('local', (err, user, info, status) => {
-            ctx.assert(user, 401, 'incorrect login');
-            ctx.logout();
-            ctx.status = 200;
-            ctx.body = { success: true };
-        })(ctx, next);
-    });
-
     authRouter.post('/register', async (ctx, next) => {
         const { discogs, email, password } = ctx.request.body;
         // fetch discogs data if they have it

client/src/actions.ts

@@ -72,6 +72,10 @@ const actions = {
         });
     },
 
+    postLogout: async function postLogout() {
+        return api.post('/auth/logout', {});
+    },
+
     postRegister: async function postRegister(email, password) {
         return api.post('/auth/register', {
             email,

client/src/app.tsx

@@ -32,9 +32,16 @@ function App() {
         route('/search');
     }
 
+    async function logout(e) {
+        e.preventDefault();
+        await actions.postLogout();
+        route('/login');
+        setUser(null);
+    }
+
     return (
         <main id="app">
-            <Header user={user} />
+            <Header user={user} logout={logout} />
             <Router>
                 <Route path="/" component={Home} />
                 <Route path="/login" component={Login} success={loginSuccess} mode="login" />

client/src/components/header.tsx

@@ -1,7 +1,9 @@
 import { h } from 'preact';
-// import { Link } from 'preact-router/match';
+import { route } from 'preact-router';
 
-const Header = ({ user }) => {
+import actions from './../actions';
+
+const Header = ({ user, logout }) => {
     const nav = () => (
         <nav>
             <a href="/">Offers</a>
@@ -22,14 +24,21 @@ const Header = ({ user }) => {
             <a href="/bundles">Bundles</a>
             <a href='/offers/acp'>Offers ACP</a>
         </nav>
+    )
+
+    const userNav = () => (
+        <nav>
+            <a href="/account">Account</a>
+            <a href="/auth/logout" onClick={(e) => logout(e)}>Logout</a>
+        </nav>
 
     )
 
     return (
         <header>
             {user ? nav() : anonNav()}
-            <div></div>
             {user ? adminNav() : null}
+            {user ? userNav() : null}
         </header>
     );
 }

client/src/routes/login.tsx

@@ -8,8 +8,6 @@ const Login = ({ success, mode }) => {
     const [confirmPassword, setConfirmPassword] = useState('');
     const [error, setError] = useState('');
 
-    console.log(confirmPassword);
-
     async function postLogin() {
         const [error, user] = await actions.postLogin(email, password);
         if (error) return setError(error);
@@ -38,15 +36,15 @@ const Login = ({ success, mode }) => {
             <form action="">
                 <div class="item">
                     <label for="email">email</label>
-                    <input type="email" name="email" id="email" value={email} required onChange={(e) => setEmail((e.target as HTMLInputElement).value)} />
+                    <input type="email" name="email" id="email" value={email} required onInput={(e) => setEmail((e.target as HTMLInputElement).value)} />
                 </div>
                 <div class="item">
                     <label for="password">password</label>
-                    <input type="password" name="password" id="password" value={password} required onChange={(e) => setConfirmPassword((e.target as HTMLInputElement).value)} />
+                    <input type="password" name="password" id="password" value={password} required onInput={(e) => setConfirmPassword((e.target as HTMLInputElement).value)} />
                 </div>
                 <div class="item">
                     <label for="password">confirm password</label>
-                    <input type="password" name="password" id="password" value={password} required onChange={(e) => setConfirmPassword((e.target as HTMLInputElement).value)} />
+                    <input type="password" name="password" id="password" value={password} required onInput={(e) => setConfirmPassword((e.target as HTMLInputElement).value)} />
                 </div>
                 <div class="item">
                     <input type="submit" value="register" onClick={handleSubmit} />
@@ -62,11 +60,11 @@ const Login = ({ success, mode }) => {
             <form action="">
                 <div class="item">
                     <label for="email">email</label>
-                    <input type="email" name="email" id="email" value={email} required onChange={(e) => setEmail((e.target as HTMLInputElement).value)} />
+                    <input type="email" name="email" id="email" value={email} required onInput={(e) => setEmail((e.target as HTMLInputElement).value)} />
                 </div>
                 <div class="item">
                     <label for="password">password</label>
-                    <input type="password" name="password" id="password" value={password} required onChange={(e) => setPassword((e.target as HTMLInputElement).value)} />
+                    <input type="password" name="password" id="password" value={password} required onInput={(e) => setPassword((e.target as HTMLInputElement).value)} />
                 </div>
                 <div class="item">
                     <input type="submit" value="login" onClick={handleSubmit} />

client/src/routes/search.tsx

@@ -37,28 +37,28 @@ const User = () => {
     const [title, setTitle] = useState('');
     const [username, setUsername] = useState('');
     const [results, setResults] = useState([]);
-    const [noResults, setNoResults] = useState(false);
+    const [infoText, setInfoText] = useState('');
 
     async function fetchResults() {
         const [error, results] = await actions.postWantSearch(artist, title);
 
         if (results.length === 0) {
             setResults([]);
-            return setNoResults(true);
+            return setInfoText('No results');
         }
 
-        setNoResults(false);
+        setInfoText('');
         setResults(results);
     }
 
     async function submitWantlist() {
         const [error, wants] = await actions.postDiscogs(username);
-        if (results.length === 0) {
+        if (wants.length === 0) {
             setResults([]);
-            return setNoResults(true);
+            return setInfoText('No new additions');
         }
 
-        console.log('synced', wants.length, 'wants');
+        setInfoText(`Added ${wants.length} items to your list.`);
     }
 
     const searchRef = useRef<HTMLInputElement>()
@@ -81,8 +81,8 @@ const User = () => {
         ? <button onClick={() => window.scrollTo(0, 0)}> top </button>
         : null;
 
-    const noResultsEl = noResults
-        ? <article>No Results</article>
+    const infoEl = infoText
+        ? <article><div></div><div>{infoText}</div></article>
         : null;
 
     return (
@@ -108,7 +108,7 @@ const User = () => {
             </div>
             <div />
             <div>
-                {noResultsEl}
+                {infoEl}
                 {results.map(Result)}
                 {topEl}
             </div>

docker-compose.TEST.yaml

@@ -11,7 +11,7 @@ services:
   api:
     image: node:16
     working_dir: /opt/mcrates/api
-    entrypoint: sleep 10000
+    entrypoint: npm run test:watch
     depends_on:
       - pg
     environment: