completed settings

Author: velopert

velog-backend/src/database/models/User.js

@@ -5,13 +5,13 @@ import { generate } from 'lib/token';
 import UserProfile, { type UserProfileModel } from './UserProfile';
 
 export interface UserModel {
-  id: string,
-  username: string,
-  email: string,
+  id: string;
+  username: string;
+  email: string;
   // static findUser(type: 'email' | 'username', value: string): Promise<*>,
-  generateToken(): string,
-  validatePassword(password: string): Promise<boolean>,
-  getProfile(): Promise<UserProfileModel>
+  generateToken(): string;
+  validatePassword(password: string): Promise<boolean>;
+  getProfile(): Promise<UserProfileModel>;
 }
 
 const User = db.define('user', {
@@ -46,10 +46,10 @@ User.prototype.getProfile = async function getProfile(): Promise<*> {
 User.prototype.generateToken = async function generateToken(): Promise<string> {
   type TokenPayload = {
     id: string,
-    username: string
+    username: string,
   };
 
-  const { id, username } : TokenPayload = this;
+  const { id, username }: TokenPayload = this;
   const userProfile: UserProfileModel = await UserProfile.findByUserId(id);
   if (!userProfile) {
     throw new Error('user profile not found');

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

@@ -8,5 +8,7 @@ const me: Router = new Router();
 me.use('/categories', categories.routes());
 me.use('/follow', follow.routes());
 me.patch('/profile', meCtrl.updateProfile);
+me.get('/unregister-token', meCtrl.generateUnregisterToken);
+me.post('/unregister', meCtrl.unregister);
 
 export default me;

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

@@ -2,7 +2,10 @@
 import type { Context } from 'koa';
 import UserProfile from 'database/models/UserProfile';
 import { validateSchema } from 'lib/common';
+import { generate, decode } from 'lib/token';
+
 import Joi from 'joi';
+import User from '../../database/models/User';
 
 export const updateProfile = async (ctx: Context): Promise<*> => {
   const { user } = ctx;
@@ -56,3 +59,46 @@ export const updateProfile = async (ctx: Context): Promise<*> => {
     ctx.throw(500, e);
   }
 };
+
+export const generateUnregisterToken = async (ctx: Context) => {
+  const { username } = ctx.user;
+  try {
+    const token = await generate(
+      { username },
+      {
+        expiresIn: '1h',
+        subject: 'unregister',
+      },
+    );
+    ctx.body = {
+      unregister_token: token,
+    };
+  } catch (e) {
+    ctx.throw(500, e);
+  }
+};
+
+export const unregister = async (ctx: Context) => {
+  const { username, id } = ctx.user;
+  const schema = Joi.object().keys({
+    unregister_token: Joi.string().required(),
+  });
+
+  if (!validateSchema(ctx, schema)) return;
+
+  const unregisterToken = (ctx.request.body: any).unregister_token;
+  try {
+    const decoded = await decode(unregisterToken);
+    if (decoded.username !== username) {
+      ctx.status = 400;
+      return;
+    }
+    const user = await User.findById(id);
+    await user.destroy();
+    ctx.cookies.set('access_token', 'asdf');
+    // 탈퇴처리
+    ctx.status = 204;
+  } catch (e) {
+    ctx.status = 400;
+  }
+};

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

@@ -4,7 +4,10 @@ import db from 'database/db';
 import { User, PostsTags, UserProfile } from 'database/models';
 import { pick } from 'lodash';
 
-export const getUser = async (ctx: Context, next: () => Promise<*>): Promise<*> => {
+export const getUser = async (
+  ctx: Context,
+  next: () => Promise<*>,
+): Promise<*> => {
   const { username } = ctx.params;
   try {
     const user = await User.findOne({
@@ -29,14 +32,13 @@ export const getProfile = async (ctx: Context) => {
     const profile = await ctx.selectedUser.getProfile();
     ctx.body = {
       user_id: ctx.selectedUser.id,
-      ...pick(profile, ['display_name', 'short_bio', 'thumbnail'])
+      ...pick(profile, ['display_name', 'short_bio', 'thumbnail']),
     };
   } catch (e) {
     ctx.throw(500, e);
   }
 };
 
-
 export const getTags = async (ctx: Context) => {
   const { id } = ctx.selectedUser;
   try {

velog-frontend/src/components/base/UserMenu/UserMenu.js

@@ -23,7 +23,7 @@ const UserMenu = ({ onClick, onLogout, username }: Props) => {
             <UserMenuItem to="/write">새 글 작성</UserMenuItem>
             <UserMenuItem to="/saves">임시 글</UserMenuItem>
             <div className="separator" />
-            <UserMenuItem>설정</UserMenuItem>
+            <UserMenuItem to="/settings">설정</UserMenuItem>
             <UserMenuItem onClick={onLogout}>로그아웃</UserMenuItem>
           </div>
         </div>

velog-frontend/src/components/common/Button/Button.js

@@ -14,6 +14,7 @@ type Props = {
   children: Node,
   large?: boolean,
   fullWidth?: boolean,
+  color?: string,
 };
 
 const Button = ({
@@ -26,9 +27,10 @@ const Button = ({
   to,
   large,
   fullWidth,
+  color,
   ...rest
 }: Props) => {
-  const processedClassName = cx('Button', theme, className, {
+  const processedClassName = cx('Button', theme, className, color, {
     confirm,
     cancel,
     violetFont,
@@ -58,6 +60,7 @@ Button.defaultProps = {
   to: null,
   large: false,
   fullWidth: false,
+  color: '',
 };
 
 export default Button;

velog-frontend/src/components/common/Button/Button.scss

@@ -52,6 +52,20 @@
       color: $oc-violet-5;
       cursor: pointer;
     }
+    &.red {
+      border: 1px solid $oc-red-8;
+      color: $oc-red-8;
+      font-weight: 500;
+      &:hover {
+        color: white;
+        background: $oc-red-6;
+        border: 1px solid $oc-red-6;
+      }
+      &:active {
+        background: $oc-red-7;
+        border: 1px solid $oc-red-7;
+      }
+    }
   }
   &.paper {
     @include common-button-style();

velog-frontend/src/components/common/QuestionModal/QuestionModal.js

@@ -16,7 +16,6 @@ type Props = {
 const QuestionModal = ({ title, description, confirmText, onConfirm, onCancel, open }: Props) => (
   <ModalWrapper open={open}>
     <div className="QuestionModal">
-      <div className="purple-line" />
       <div className="modal-content">
         {title && <h4>{title}</h4>}
         <p>{description}</p>

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

@@ -0,0 +1,20 @@
+// @flow
+import React from 'react';
+import Button from 'components/common/Button';
+import './SettingsEtc.scss';
+
+type Props = {
+  onAskUnregister: () => void,
+};
+
+const SettingsEtc = ({ onAskUnregister }: Props) => (
+  <div className="SettingsEtc">
+    <section>
+      <Button theme="outline" color="red" onClick={onAskUnregister}>
+        회원 탈퇴
+      </Button>
+    </section>
+  </div>
+);
+
+export default SettingsEtc;

velog-frontend/src/components/settings/SettingsEtc/SettingsEtc.scss

@@ -0,0 +1,5 @@
+@import 'utils';
+
+.SettingsEtc {
+
+}