#141 feature/css (#141)

* fix: setting * fix: test errors * fix: updated secrets * fix: mypage, myreportedlogs page, myreportinglogs page axios code * fix: apology api get axios * fix: frontend test code upgrade * fix: search page css and others * fix: api key * fix: front test upgrade * fix: css searchpage reportauth page * fix: testing enhancement * fix: front src test 50 to 60 * fix: test error solve * fix: frontend test error * fix: report auth page css * fix: login page css * fix: signup and change password css * fix: finduserinfo css * fix: report action css(not done)
swsnu · Nov 27, 2021 · ca676fb · ca676fb
1 parent 2b6ea5c
commit ca676fb
Show file tree

Hide file tree

Showing 14 changed files with 1,193 additions and 484 deletions.
diff --git a/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.css b/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.css
@@ -0,0 +1,116 @@
+.ChangePWTitle {
+  position: absolute;
+  /* width: 67px; */
+  /* height: 36px; */
+  left: 35.4%;
+  top: 30.6%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 25px;
+  line-height: 36px;
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.ChangePW_inputField1 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 36.5%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.ChangePW_inputField2 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 43.9%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.ChangePW_inputField3 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 51.3%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.ChangePW_Login_text {
+  position: absolute;
+  /* width: 53px; */
+  /* height: 22px; */
+  left: 35.4%;
+  top: 59%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.ChangePW_Finduserinfo_text {
+  position: absolute;
+  /* width: 53px; */
+  /* height: 22px; */
+  right: 34.5%;
+  top: 59%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.ChangePWButton {
+  position: absolute;
+  width: 120px;
+  height: 39.81px;
+  left: 50%;
+  transform: translateX(-50%);
+  /* left: 45.8%; */
+  top: 78%;
+  background: #fc0174;
+  border-radius: 40px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
+}
diff --git a/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.js b/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.js
@@ -1,78 +1,96 @@
 import React, { Component } from "react";
 // import { connect } from 'react-redux';
-import { NavLink, withRouter } from 'react-router-dom'
-import axios from 'axios';
+import { NavLink, withRouter } from "react-router-dom";
+import axios from "axios";
+
+import "./ChangePassword.css";
 
 // TODO: post 요청을 put으로 back에서 바꾸면 axios 코드 변경
 
 class ChangePassword extends Component {
-    state = {
-        oldPW : '',
-        newPW : '', 
-        newPWConfirm : '',
-    }
+  state = {
+    oldPW: "",
+    newPW: "",
+    newPWConfirm: "",
+  };
 
-    putChangePWData = async () => {
-        console.log("postchangePWData")
+  putChangePWData = async () => {
+    console.log("postchangePWData");
 
-        axios.defaults.xsrfCookieName = 'csrftoken';
-        axios.defaults.xsrfHeaderName = 'X-CSRFToken';
+    axios.defaults.xsrfCookieName = "csrftoken";
+    axios.defaults.xsrfHeaderName = "X-CSRFToken";
 
-        axios.get('/api/token/').then()
-
-        const response = await axios.post('/api/change/password/', {
-            "old_password" : this.state.oldPW,
-            "new_password" : this.state.newPW,
-            "password_confirm" : this.state.newPWConfirm,
-        })
-        .then((response) => {
-            alert(response.data.message)
-            this.props.history.push('/login')
-        })
-        .catch((error) => {
-            alert(error.response.data.error)
-            if(error.response.status === 401) this.props.history.push('/login')
-        })
-    }
+    axios.get("/api/token/").then();
 
-    // TODO: password confirm을 back에서 수행하므로 해당 if 문 삭제 필요?
-    onClickChangePWButton = () => {
-        if(!this.state.oldPW || !this.state.newPW || !this.state.newPWConfirm){
-            alert('모든 필드 값을 다 입력해주셔야 비밀번호를 변경할 수 있습니다.')
-            return
-        }
-        else {
-            this.putChangePWData()
-        }
-    }
+    const response = await axios
+      .post("/api/change/password/", {
+        old_password: this.state.oldPW,
+        new_password: this.state.newPW,
+        password_confirm: this.state.newPWConfirm,
+      })
+      .then((response) => {
+        alert(response.data.message);
+        this.props.history.push("/login");
+      })
+      .catch((error) => {
+        alert(error.response.data.error);
+        if (error.response.status === 401) this.props.history.push("/login");
+      });
+  };
 
-    render() {
-        return (
-            <div className = 'ChangePW'> 
-                <NavLink exact to = '/login'>로그인</NavLink>
-                <NavLink exact to = '/finduserinfo'>아이디 비밀번호 찾기</NavLink>
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '기존 비밀번호'
-                    onChange={(event) => this.setState({ oldPW : event.target.value })} />
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '신규 비밀번호'
-                    onChange={(event) => this.setState({ newPW : event.target.value })} />
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '신규 비밀번호 확인'
-                    onChange={(event) => this.setState({ newPWConfirm : event.target.value })} />
-                <button className = 'ChangePWButton'
-                onClick={() => this.onClickChangePWButton()}>
-                비밀번호 변경하기
-                </button>
-            </div>
-        )
+  // TODO: password confirm을 back에서 수행하므로 해당 if 문 삭제 필요?
+  onClickChangePWButton = () => {
+    if (!this.state.oldPW || !this.state.newPW || !this.state.newPWConfirm) {
+      alert("모든 필드 값을 다 입력해주셔야 비밀번호를 변경할 수 있습니다.");
+      return;
+    } else {
+      this.putChangePWData();
     }
+  };
+
+  render() {
+    return (
+      <div className="ChangePW">
+        <text className="ChangePWTitle">비밀번호 변경</text>
+        <NavLink exact to="/login">
+          {/* 로그인 */}
+          <text className="ChangePW_Login_text">로그인</text>
+        </NavLink>
+        <NavLink exact to="/finduserinfo">
+          <text className="ChangePW_Finduserinfo_text">
+            아이디 비밀번호 찾기
+          </text>
+          {/* 아이디 비밀번호 찾기 */}
+        </NavLink>
+        <input
+          className="ChangePW_inputField1"
+          type="string"
+          placeholder="기존 비밀번호"
+          onChange={(event) => this.setState({ oldPW: event.target.value })}
+        />
+        <input
+          className="ChangePW_inputField2"
+          type="string"
+          placeholder="신규 비밀번호"
+          onChange={(event) => this.setState({ newPW: event.target.value })}
+        />
+        <input
+          className="ChangePW_inputField3"
+          type="string"
+          placeholder="신규 비밀번호 확인"
+          onChange={(event) =>
+            this.setState({ newPWConfirm: event.target.value })
+          }
+        />
+        <button
+          className="ChangePWButton"
+          onClick={() => this.onClickChangePWButton()}
+        >
+          비밀번호 변경하기
+        </button>
+      </div>
+    );
+  }
 }
 
-export default ChangePassword;
+export default ChangePassword;