From f5e05ddc9fbbb056c1024f804072a2f82e784ef5 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 29 Jul 2022 14:33:03 +0100
Subject: [PATCH] Rework verify-email ux

---
 frontend/src/App.vue                    | 10 ++-
 frontend/src/pages/UnverifiedEmail.vue  | 45 ++++++++++++
 test/unit/forge/routes/api/user_spec.js | 92 +++++++++++++++++++++++++
 3 files changed, 144 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/UnverifiedEmail.vue
 create mode 100644 test/unit/forge/routes/api/user_spec.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1b07a57303..2769536380 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -15,7 +15,7 @@
             </main>
         </template>
         <!-- Platform Entry Point -->
-        <template v-else-if="user && !user.password_expired">
+        <template v-else-if="user && !user.password_expired && user.email_verified">
             <ff-layout-platform>
                 <router-view></router-view>
             </ff-layout-platform>
@@ -24,6 +24,10 @@
         <template v-else-if="user && user.password_expired">
             <PasswordExpired/>
         </template>
+        <!-- Email Verification Required -->
+        <template v-else-if="user && !user.email_verified">
+            <UnverifiedEmail/>
+        </template>
         <template v-else-if="!loginRequired">
             <router-view></router-view>
         </template>
@@ -40,7 +44,7 @@ import Login from '@/pages/Login.vue'
 import Loading from '@/components/Loading'
 import Offline from '@/components/Offline'
 import PasswordExpired from '@/pages/PasswordExpired.vue'
-
+import UnverifiedEmail from '@/pages/UnverifiedEmail.vue'
 import FFLayoutPlatform from '@/layouts/Platform.vue'
 
 export default {
@@ -54,13 +58,13 @@ export default {
     components: {
         Login,
         PasswordExpired,
+        UnverifiedEmail,
         Loading,
         Offline,
         'ff-layout-platform': FFLayoutPlatform
     },
     mounted () {
         this.$store.dispatch('account/checkState')
-        this.$store.dispatch('account/countNotifications')
     }
 }
 </script>
diff --git a/frontend/src/pages/UnverifiedEmail.vue b/frontend/src/pages/UnverifiedEmail.vue
new file mode 100644
index 0000000000..324ba40c0b
--- /dev/null
+++ b/frontend/src/pages/UnverifiedEmail.vue
@@ -0,0 +1,45 @@
+<template>
+    <ff-layout-box>
+        <form class="px-4 sm:px-6 lg:px-8 mt-8 space-y-6 max-w-md" @submit.prevent>
+            <p>
+                Before you can access the platform, we need to verify your email
+                address.
+            </p>
+            <p>
+                We sent you an email with a link to click when you signed up.
+            </p>
+            <ff-button :disabled="sent" @click="resend">
+                <span v-if="!sent">Resend email</span>
+                <span v-else>Sent</span>
+            </ff-button>
+        </form>
+    </ff-layout-box>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import userApi from '@/api/user'
+
+import FFLayoutBox from '@/layouts/Box'
+
+export default {
+    name: 'UnverifiedEmail',
+    methods: {
+        async resend () {
+            if (!this.sent) {
+                this.sent = true
+                await userApi.triggerVerification()
+            }
+        }
+    },
+    computed: mapState('account', ['user']),
+    data () {
+        return {
+            sent: false
+        }
+    },
+    components: {
+        'ff-layout-box': FFLayoutBox
+    }
+}
+</script>
diff --git a/test/unit/forge/routes/api/user_spec.js b/test/unit/forge/routes/api/user_spec.js
new file mode 100644
index 0000000000..76a1f9cf43
--- /dev/null
+++ b/test/unit/forge/routes/api/user_spec.js
@@ -0,0 +1,92 @@
+const should = require('should') // eslint-disable-line
+const setup = require('../setup')
+const FF_UTIL = require('flowforge-test-utils')
+const { Roles } = FF_UTIL.require('forge/lib/roles')
+
+describe('User API', async function () {
+    let app
+    const TestObjects = {}
+
+    beforeEach(async function () {
+        app = await setup({ features: { devices: true } })
+
+        // alice : admin, team owner
+        // bob
+        // chris : (unverified_email)
+
+        // ATeam ( alice  (owner), bob (owner), chris)
+        // BTeam ( bob (owner), chris)
+
+        // Alice create in setup()
+        TestObjects.alice = await app.db.models.User.byUsername('alice')
+        TestObjects.bob = await app.db.models.User.create({ username: 'bob', name: 'Bob Solo', email: 'bob@example.com', email_verified: true, password: 'bbPassword', admin: true })
+        TestObjects.chris = await app.db.models.User.create({ username: 'chris', name: 'Chris Kenobi', email: 'chris@example.com', password: 'ccPassword' })
+
+        // ATeam create in setup()
+        TestObjects.ATeam = await app.db.models.Team.byName('ATeam')
+        TestObjects.BTeam = await app.db.models.Team.create({ name: 'BTeam' })
+
+        // Alice set as ATeam owner in setup()
+        await TestObjects.ATeam.addUser(TestObjects.bob, { through: { role: Roles.Owner } })
+        await TestObjects.ATeam.addUser(TestObjects.chris, { through: { role: Roles.Member } })
+        await TestObjects.BTeam.addUser(TestObjects.bob, { through: { role: Roles.Owner } })
+        await TestObjects.BTeam.addUser(TestObjects.chris, { through: { role: Roles.Member } })
+
+        TestObjects.tokens = {}
+    })
+
+    async function login (username, password) {
+        const response = await app.inject({
+            method: 'POST',
+            url: '/account/login',
+            payload: { username, password, remember: false }
+        })
+        response.cookies.should.have.length(1)
+        response.cookies[0].should.have.property('name', 'sid')
+        TestObjects.tokens[username] = response.cookies[0].value
+    }
+
+    afterEach(async function () {
+        await app.close()
+    })
+
+    describe('User settings', async function () {
+        it('returns 401 on /user if not logged in', async function () {
+            // await login('alice', 'aaPassword')
+            // await login('bob', 'bbPassword')
+            // await login('chris', 'ccPassword')
+            const response = await app.inject({
+                method: 'GET',
+                url: '/api/v1/user'
+            })
+            response.statusCode.should.equal(401)
+        })
+        it('return user info for logged in user', async function () {
+            await login('alice', 'aaPassword')
+            const response = await app.inject({
+                method: 'GET',
+                url: '/api/v1/user',
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            response.statusCode.should.equal(200)
+            const result = response.json()
+            result.should.have.property('id', TestObjects.alice.hashid)
+            result.should.have.property('username', TestObjects.alice.username)
+            result.should.have.property('email', TestObjects.alice.email)
+        })
+        it('return user info for unverified_email user', async function () {
+            await login('chris', 'ccPassword')
+            const response = await app.inject({
+                method: 'GET',
+                url: '/api/v1/user',
+                cookies: { sid: TestObjects.tokens.chris }
+            })
+            response.statusCode.should.equal(200)
+            const result = response.json()
+            result.should.have.property('id', TestObjects.chris.hashid)
+            result.should.have.property('username', TestObjects.chris.username)
+            result.should.have.property('email', TestObjects.chris.email)
+            result.should.have.property('email_verified', false)
+        })
+    })
+})