Implement email configuration

Author: velopert

velog-backend/src/lib/common.js

@@ -5,6 +5,8 @@ import type { Middleware } from 'koa';
 import removeMd from 'remove-markdown';
 import crypto from 'crypto';
 import axios from 'axios';
+import sendMail from 'lib/sendMail';
+import EmailCert from 'database/models/EmailCert';
 import { generate } from './token';
 
 export const primaryUUID = {
@@ -138,3 +140,29 @@ export function getHost() {
     ? 'https://localhost:3000/'
     : 'https://velog.io/';
 }
+
+export async function sendCertEmail(userId: string, email: string) {
+  const emailCert = await EmailCert.build({
+    fk_user_id: userId,
+  }).save();
+  await sendMail({
+    to: email,
+    subject: 'Velog 이메일 인증',
+    from: 'Velog <[email protected]>',
+    body: `<a href="https://velog.io"><img src="https://images.velog.io/email-logo.png" style="display: block; width: 128px; margin: 0 auto;"/></a>
+<div style="max-width: 100%; width: 400px; margin: 0 auto; padding: 1rem; text-align: justify; background: #f8f9fa; border: 1px solid #dee2e6; box-sizing: border-box; border-radius: 4px; color: #868e96; margin-top: 0.5rem; box-sizing: border-box; text-align: center;">
+  안녕하세요! velog 이메일 인증을 진행하시려면 <br/>다음 버튼을 눌러주세요.
+</div>
+
+<a href="https://velog.io/certify?code=${
+  emailCert.code
+}" style="text-decoration: none; width: 400px; text-align:center; display:block; margin: 0 auto; margin-top: 1rem; background: #845ef7; padding-top: 1rem; color: white; font-size: 1.25rem; padding-bottom: 1rem; font-weight: 600; border-radius: 4px;">이메일 인증</a>
+
+<div style="text-align: center; margin-top: 1rem; color: #868e96; font-size: 0.85rem;"><div>혹은, 다음 링크를 열어주세요:<br/> <a style="color: #b197fc;" href="https://velog.io/certify?code=${
+  emailCert.code
+}">https://velog.io/certify?code=${
+  emailCert.code
+}</a></div><br/><div>이 링크는 24시간동안 유효합니다. </div></div>`,
+  });
+  return emailCert;
+}

velog-backend/src/router/auth/auth.ctrl.js

@@ -9,8 +9,8 @@ import EmailAuth from 'database/models/EmailAuth';
 import SocialAccount from 'database/models/SocialAccount';
 import EmailCert from 'database/models/EmailCert';
 import { generate, decode } from 'lib/token';
+import { sendCertEmail } from 'lib/common';
 import getSocialProfile, { type Profile } from 'lib/getSocialProfile';
-
 import type { UserModel } from 'database/models/User';
 import type { UserProfileModel } from 'database/models/UserProfile';
 import type { EmailAuthModel } from 'database/models/EmailAuth';
@@ -20,31 +20,6 @@ import UserMeta from '../../database/models/UserMeta';
 
 const s3 = new AWS.S3({ region: 'ap-northeast-2', signatureVersion: 'v4' });
 
-async function sendCertEmail(userId, email) {
-  const emailCert = await EmailCert.build({
-    fk_user_id: userId,
-  }).save();
-  await sendMail({
-    to: email,
-    subject: 'Velog 이메일 인증',
-    from: 'Velog <[email protected]>',
-    body: `<a href="https://velog.io"><img src="https://images.velog.io/email-logo.png" style="display: block; width: 128px; margin: 0 auto;"/></a>
-<div style="max-width: 100%; width: 400px; margin: 0 auto; padding: 1rem; text-align: justify; background: #f8f9fa; border: 1px solid #dee2e6; box-sizing: border-box; border-radius: 4px; color: #868e96; margin-top: 0.5rem; box-sizing: border-box; text-align: center;">
-  안녕하세요! velog 이메일 인증을 진행하시려면 <br/>다음 버튼을 눌러주세요.
-</div>
-
-<a href="https://velog.io/certify?code=${
-  emailCert.code
-}" style="text-decoration: none; width: 400px; text-align:center; display:block; margin: 0 auto; margin-top: 1rem; background: #845ef7; padding-top: 1rem; color: white; font-size: 1.25rem; padding-bottom: 1rem; font-weight: 600; border-radius: 4px;">이메일 인증</a>
-
-<div style="text-align: center; margin-top: 1rem; color: #868e96; font-size: 0.85rem;"><div>혹은, 다음 링크를 열어주세요:<br/> <a style="color: #b197fc;" href="https://velog.io/certify?code=${
-  emailCert.code
-}">https://velog.io/certify?code=${
-  emailCert.code
-}</a></div><br/><div>이 링크는 24시간동안 유효합니다. </div></div>`,
-  });
-  return emailCert;
-}
 
 export const sendAuthEmail = async (ctx: Context): Promise<*> => {
   type BodySchema = {

velog-backend/src/router/common/common.ctrl.js

@@ -5,6 +5,7 @@ import Post from 'database/models/Post';
 import UserMeta from 'database/models/UserMeta';
 import { generate, decode } from 'lib/token';
 import { generateUnsubscribeToken, getHost } from 'lib/common';
+
 import {
   getTagsList,
   getPostsCountByTagId,

velog-backend/src/router/me/index.js

@@ -11,5 +11,7 @@ me.patch('/profile', meCtrl.updateProfile);
 me.get('/unregister-token', meCtrl.generateUnregisterToken);
 me.post('/unregister', meCtrl.unregister);
 me.get('/email-info', meCtrl.getEmailInfo);
+me.patch('/email', meCtrl.changeEmail);
+me.post('/resend-certmail', meCtrl.resendCertmail);
 
 export default me;

velog-backend/src/router/me/me.ctrl.js

@@ -1,12 +1,13 @@
 // @flow
 import type { Context } from 'koa';
 import UserProfile from 'database/models/UserProfile';
-import { validateSchema, checkEmpty } from 'lib/common';
+import { validateSchema, checkEmpty, sendCertEmail } from 'lib/common';
 import { generate, decode } from 'lib/token';
 
 import Joi from 'joi';
 import User from '../../database/models/User';
 import UserMeta from '../../database/models/UserMeta';
+import EmailCert from '../../database/models/EmailCert';
 
 export const updateProfile = async (ctx: Context): Promise<*> => {
   const { user } = ctx;
@@ -125,7 +126,7 @@ export const getEmailInfo = async (ctx: Context) => {
     const { email_notification, email_promotion } = userMeta;
     const { email, is_certified } = user;
     ctx.body = {
-      email: null,
+      email,
       is_certified,
       permissions: {
         email_notification,
@@ -136,3 +137,79 @@ export const getEmailInfo = async (ctx: Context) => {
     ctx.throw(500, e);
   }
 };
+
+export const changeEmail = async (ctx: Context) => {
+  // validate email
+  const schema = Joi.object().keys({
+    email: Joi.string()
+      .email()
+      .required(),
+  });
+  const result = Joi.validate(ctx.request.body, schema);
+  if (result.error) {
+    ctx.body = {
+      name: 'WRONG_EMAIL',
+    };
+    ctx.status = 400;
+    return;
+  }
+
+  // parse email from reqbody
+  const { email } = ((ctx.request.body: any): { email: string });
+
+  try {
+    // get user
+    const user = await User.findById(ctx.user.id);
+    // do duplication check
+    const exists = await User.findOne({
+      where: {
+        email,
+      },
+    });
+    if (exists) {
+      ctx.status = 409;
+      ctx.body = {
+        name: 'EMAIL_EXISTS',
+      };
+      return;
+    }
+
+    // change email
+    user.email = email;
+    user.is_certified = false;
+    await user.save();
+    // list all email certs and disable status
+    await EmailCert.update(
+      {
+        status: false,
+      },
+      {
+        where: {
+          fk_user_id: ctx.user.id,
+          status: true,
+        },
+      },
+    );
+    sendCertEmail(ctx.user.id, email);
+    ctx.status = 204;
+  } catch (e) {
+    ctx.throw(500, e);
+  }
+};
+
+export const resendCertmail = async (ctx: Context) => {
+  try {
+    const user = await User.findById(ctx.user.id);
+    if (user.is_certified) {
+      ctx.status = 409;
+      ctx.body = {
+        name: 'ALREADY_CERTIFIED',
+      };
+      return;
+    }
+    sendCertEmail(ctx.user.id, user.email);
+    ctx.status = 204;
+  } catch (e) {
+    ctx.throw(500, e);
+  }
+};

velog-frontend/src/components/settings/SettingEmail/SettingEmail.js

@@ -1,26 +1,111 @@
 // @flow
-
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import type { EmailInfoData } from 'store/modules/settings';
 import WarningIcon from 'react-icons/lib/md/warning';
 import cx from 'classnames';
 import './SettingEmail.scss';
 
 type Props = {
   emailInfo: EmailInfoData,
+  onChangeEmail: (email: string) => Promise<any>,
+  onResendCertmail: () => Promise<any>,
+};
+
+type State = {
+  edit: boolean,
+  email: string,
+  status: 'idle' | 'success' | 'error',
 };
 
-class SettingEmail extends Component<Props> {
+class SettingEmail extends Component<Props, State> {
+  state = {
+    edit: false,
+    email: '',
+    status: 'idle',
+  };
+
+  onStartEditing = () => {
+    this.setState({
+      edit: true,
+    });
+  };
+
+  onChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
+    this.setState({
+      email: e.target.value,
+    });
+  };
+
+  onConfirm = async () => {
+    const { email } = this.state;
+    try {
+      await this.props.onChangeEmail(email);
+      this.setState({
+        status: 'success',
+      });
+    } catch (e) {
+      this.setState({
+        status: 'error',
+      });
+      // handle error
+      console.log(e);
+    }
+    this.setState({
+      edit: false,
+    });
+  };
+
+  onCancel = () => {
+    this.setState({
+      edit: false,
+      email: '',
+    });
+  };
+
   render() {
     const { emailInfo } = this.props;
+    const { edit, email } = this.state;
     return (
       <div className="SettingEmail">
-        <div className="current-email">
-          <div className={cx('email', { empty: !emailInfo.email })}>
-            {!emailInfo.email && <WarningIcon />}
-            {emailInfo.email || '이메일이 존재하지 않습니다.'}
+        {edit ? (
+          <div className="edit-email">
+            <div className="email-form">
+              <input value={email} onChange={this.onChange} />
+              <button className="confirm" onClick={this.onConfirm}>
+                변경
+              </button>
+              <button className="cancel" onClick={this.onCancel}>
+                취소
+              </button>
+            </div>
+            <div className="caution">
+              이메일 변경을 하시면 이전 이메일로 다시 로그인 할 수 없습니다.
+            </div>
           </div>
-        </div>
+        ) : (
+          <Fragment>
+            {!emailInfo.is_certified &&
+              emailInfo.email && (
+                <div className="need-certify">
+                  <span>
+                    {this.state.status === 'success'
+                      ? '인증 메일이 발송되었습니다. 메일을 확인해주세요.'
+                      : '인증되지 않은 이메일입니다.'}
+                  </span>
+                  <button onClick={this.props.onResendCertmail}>인증 메일 재발송</button>
+                </div>
+              )}
+            <div className="current-email">
+              <div className={cx('email', { empty: !emailInfo.email })}>
+                {!emailInfo.email && <WarningIcon />}
+                {emailInfo.email || '이메일이 존재하지 않습니다.'}
+                <button className="email-action" onClick={this.onStartEditing}>
+                  {emailInfo.email ? '변경' : '등록'}
+                </button>
+              </div>
+            </div>
+          </Fragment>
+        )}
       </div>
     );
   }