Send password#154

app/components/reset-password.js

@@ -0,0 +1,187 @@
+import React, {useState, useEffect} from 'react'
+import { createUseStyles } from 'react-jss'
+import cx from "classnames";
+
+export default function ResetPassword ({activationToken, returnTo }) {
+    const classes = useStyles()
+
+    const [infoMessage, setInfoMessage] = useState('')
+    const [formError, setFormError] = useState('')
+    const [resetKey, setResetKey] = useState('')
+    const [newPassword, setNewPassword] = useState('')
+    const [confirmPassword, setConfirmPassword] = useState('')
+    const [token, setToken] = useState(activationToken)
+    const MISSING_RESET_KEY = "Missing Reset Key"
+    const MISSING_PASSWORDS = "Missing Passwords"
+    const PASSWORD_MISMATCH_ERROR = "Passwords don't match"
+
+    useEffect(() => {
+        setToken(activationToken)
+    }, [activationToken])
+
+    const sendResetPassword = e => {
+        e.preventDefault()
+        setInfoMessage('')
+        setFormError('')
+        if (!resetKey || resetKey === '') {
+            setInfoMessage('')
+            setFormError(MISSING_RESET_KEY)
+            return
+        }
+        if (!newPassword || !confirmPassword) {
+            setInfoMessage('')
+            setFormError(MISSING_PASSWORDS)
+            return
+        }
+        if (!doPasswordsMatch(newPassword, confirmPassword)) {
+            setInfoMessage('')
+            setFormError(PASSWORD_MISMATCH_ERROR)
+            return
+        }
+        setInfoMessage('One moment...')
+        window.socket.emit('reset-password', token, resetKey, newPassword, error => {
+            if (error) {
+                setInfoMessage('')
+                setFormError('Error resetting password, please try again or contact support')
+                console.error('Error resetting password: ', error)
+                return
+            }
+            setInfoMessage('Success! Redirecting')
+            setFormError('')
+            // is the timeout really necessary? copied from synapp
+            setTimeout(() => (location.href = returnTo || '/undebates'), 800)
+        })
+    }
+
+    const updateResetKeyValue = e => {
+        setResetKey(e.target.value)
+        setFormError('')
+    }
+
+    const updateNewPasswordValue = e => {
+        setNewPassword(e.target.value)
+        checkPasswords(e.target.value, confirmPassword)
+    }
+
+    const updateConfirmPasswordValue = e => {
+        setConfirmPassword(e.target.value)
+        checkPasswords(newPassword, e.target.value)
+    }
+
+    const checkPasswords = (newPass, confirmPass) => {
+        if (doPasswordsMatch(newPass, confirmPass)) {
+            setFormError('')
+        } else {
+            setFormError(PASSWORD_MISMATCH_ERROR)
+        }
+    }
+
+    const doPasswordsMatch = (newPass, confirmPass) => {
+        return !newPass || !confirmPass || (newPass && confirmPass && newPass === confirmPass)
+    }
+
+    return (
+        <div className={classes.formWrapper}>
+            <div className={classes.header}>Reset Password</div>
+            <form onSubmit={sendResetPassword}>
+                <div className={classes.inputContainer}>
+                <input
+                    name={'resetKey'}
+                    placeholder={'Reset Key from Email'}
+                    className={classes.input}
+                    onChange={updateResetKeyValue}
+                />
+                <input
+                    name={'newPassword'}
+                    type={'password'}
+                    placeholder={'New Password'}
+                    className={classes.input}
+                    onChange={updateNewPasswordValue}
+                />
+                <input
+                    name={'confirmPassword'}
+                    type={'password'}
+                    placeholder={'Confirm Password'}
+                    className={cx(classes.input, classes.disabled)}
+                    onChange={updateConfirmPasswordValue}
+                />
+                <div className={classes.buttonWrapper}>
+                    <button className={classes.btn}>
+                        Reset
+                    </button>
+                </div>
+                {infoMessage && <span>{infoMessage}</span>}
+                {formError && <div className={classes.formValidationErrors}>{formError}</div>}
+                </div>
+            </form>
+        </div>
+    )
+}
+
+const useStyles = createUseStyles(theme => ({
+    formWrapper: {
+        backgroundColor: theme.colorPrimary,
+        width: '24rem',
+        maxWidth: '100vw',
+        margin: 0,
+        borderRadius: '1rem',
+        height: 'auto',
+        padding: '0',
+        fontFamily: theme.defaultFontFamily,
+        position: 'fixed',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%,-50%)',
+    },
+    header: {
+        textAlign: 'center',
+        paddingTop: '1rem',
+        paddingBottom: '1rem',
+        position: 'relative',
+        color: '#FFFFFF',
+        textDecoration: 'none',
+        fontSize: '2rem',
+        background: 'none',
+        border: 'none',
+    },
+    inputContainer: {
+        margin: 0,
+        padding: '2rem',
+        borderRadius: '0 0 1rem 1rem',
+        backgroundColor: theme.colorPrimary,
+    },
+    input: {
+        width: '100%',
+        background: 'rgba(255, 255, 255, 0.8)',
+        fontSize: '1.5rem',
+        border: 'none',
+        padding: '1rem',
+        marginBottom: '2rem',
+        borderRadius: '0.5rem',
+        boxSizing: 'border-box',
+    },
+    btnWrapper: {
+        width: '100%',
+    },
+    btn: {
+        ...theme.button,
+        borderRadius: '.5rem',
+        backgroundColor: '#262D33',
+        color: '#FFFFFF',
+        display: 'block',
+        margin: '1rem auto',
+        textAlign: 'center',
+        fontSize: '2rem',
+        width: '100%',
+        '&:hover': {
+            backgroundColor: '#fec215',
+            cursor: 'pointer',
+            color: theme.colorPrimary,
+        },
+    },
+    formValidationErrors: {
+        color: '#fec215',
+        textAlign: 'center',
+        width: '100%',
+    },
+}))

app/start.js

@@ -20,6 +20,7 @@ async function start() {
         await server.earlyStart() // connect to the database, and such
         server.routesDirPaths.push(path.resolve(__dirname, '../node_modules/undebate/dist/routes'))
         server.routesDirPaths.push(path.resolve(__dirname, './routes'))
+        server.socketAPIsDirPaths.push(path.resolve(__dirname, '../node_modules/civil-server/dist/socket-apis'))
         server.socketAPIsDirPaths.push(path.resolve(__dirname, '../node_modules/undebate/dist/socket-apis'))
         server.socketAPIsDirPaths.push(path.resolve(__dirname, './socket-apis'))
         server.serverEventsDirPaths.push(path.resolve(__dirname, '../node_modules/undebate/dist/events'))

app/web-components/reset-password-undebate.js

@@ -0,0 +1,35 @@
+import React, {useEffect, useState} from 'react'
+import { createUseStyles } from "react-jss";
+import ClientResetPassword from '../components/reset-password'
+
+export default function ResetPasswordUndebate() {
+    const classes = useStyles()
+    const [params, setParams] = useState(null)
+
+    useEffect(() => {
+        setParams(new URLSearchParams(document.location.search))
+    }, [])
+
+    return (
+        <div className={classes.wrapper}>
+            <div className={classes.centeredWrapper}>
+                <ClientResetPassword activationToken={params?.get('t') || ''} returnTo={params?.get('p') || ''} />
+            </div>
+        </div>
+    )
+}
+
+const useStyles = createUseStyles({
+    wrapper: {
+        width: '100%',
+        height: '100vh',
+        textAlign: 'center',
+        verticalAlign: 'middle',
+    },
+    centeredWrapper: {
+        top: '50%',
+        left: '50%',
+        position: 'relative',
+        transform: 'translate(-50%, -50%)',
+    },
+})

assets/email-templates/candidate-invitation.html

@@ -115,10 +115,6 @@
                     </tr>
                 </tbody>
             </table>
-            </td>
-            </tr>
-            </tbody>
-            </table>
         </div>
     </div>
 </body>

assets/email-templates/moderator-invitation.html

@@ -128,10 +128,6 @@
                     </tr>
                 </tbody>
             </table>
-            </td>
-            </tr>
-            </tbody>
-            </table>
         </div>
     </div>
 </body>

iotas.json

@@ -8,6 +8,15 @@
         "description": "Civil Server Template Home Page",
         "webComponent": "Home"
     },
+    {
+        "_id": {
+            "$oid": "633baab31913b4a6e6855d1f"
+        },
+        "path": "/resetPassword",
+        "subject": "ResetPassword",
+        "description": "Reset Password",
+        "webComponent": "ResetPasswordUndebate"
+    },
     {
         "_id": "61e3309613eec40628793064",
         "path": "/test-election-docs",

package.json

@@ -80,7 +80,7 @@
     "peerDependencies": {
         "civil-client": "github:EnCiv/civil-client",
         "civil-server": "github:EnCiv/civil-server",
-        "undebate": "github:EnCiv/undebate#civ-serv"
+        "undebate": "github:EnCiv/undebate"
     },
     "devDependencies": {
         "@babel/cli": "^7.16.0",