add: terms and conditions

frontend/src/api/index.js

@@ -115,7 +115,7 @@ service.interceptors.response.use(
       message = getErrMsg(response.data.error);
     } else if (response.status == 401 && response.data?.detail) {
       message = getErrMsg(response.data.detail);
-      if (response.data.detail === 'Invalid token') {
+      if (response.data.detail === 'Invalid token' || response.data.detail === 'Token has expired') {
         store.dispatch('logOut').then(() => {
           location.href = '/';
         });

frontend/src/lang/en.js

@@ -205,6 +205,13 @@ export default {
     },
     phase: 'Phase',
   },
+  participate: {
+    continue: 'Continue',
+    accept_text1: 'please accept the',
+    accept_text2: 'rules and terms',
+    accept_text3: 'in order to participate.',
+    accept_label: 'I accept the terms and conditions.',
+  },
   submission: {
     guidelines: 'Submission Guidelines',
     guideTxt: 'Card quickly that customer can. Indeed beat year news learn. Surface she tend. Account play food claim despite daughter change use.',
@@ -317,7 +324,7 @@ export default {
     startDate_utc: 'Start Date(UTC)',
     endDate_utc: 'End Date(UTC)',
     creator: 'Creator',
-    publicyAvailable: 'Publicy Available',
+    publicyAvailable: 'Published',
     isRegistrationOpen: 'Is Registration Open',
     enableForum: 'Enable Forum',
     createPhases: 'Create Phases',

frontend/src/lang/zh.js

@@ -203,6 +203,13 @@ export default {
     },
     phase: '阶段',
   },
+  participate: {
+    continue: '继续',
+    accept_text1: '请接受',
+    accept_text2: '规则和条款',
+    accept_text3: '才能参加比赛。',
+    accept_label: '我接受条款和条件',
+  },
   submission: {
     guidelines: '投稿须知',
     guideTxt: '客户可以快速刷卡。确实打败了当年的新闻学习。表面她倾向。账户播放食物索赔，尽管女儿改变了用途。',

frontend/src/views/challenge/Detail.vue

@@ -19,7 +19,7 @@
           <overview :detailInfo="detailInfo" :phases="phases"></overview>
         </el-tab-pane>
         <el-tab-pane :label="$t('challenge.participate')" name="participate" v-if="!teamDetail">
-          <participate :challengeId="challengeId" @callback="getPartTeam('submission')"></participate>
+          <participate :challengeId="challengeId" @callback="getPartTeam('submission')" @openTerm="openTerm"></participate>
         </el-tab-pane>
         <el-tab-pane :label="$t('challenge.submission')" name="submission" v-else>
           <submission
@@ -80,6 +80,14 @@ const getPartTeam = (tabId) => {
     }
   });
 };
+
+const openTerm = () => {
+  activeName.value = 'overview';
+  setTimeout(() => {
+    let dom = document.querySelector('#term');
+    dom && dom.scrollIntoView();
+  }, 200);
+};
 const clearPartTeam = (tabId) => {
   teamDetail.value = undefined;
   activeName.value = tabId;

frontend/src/views/challenge/Overview.vue

@@ -6,7 +6,7 @@
     <el-collapse-item :title="$t('overview.eval.title')" name="2">
       <div v-html="detailInfo.evaluation_details" class="editor-content-view"></div>
     </el-collapse-item>
-    <el-collapse-item :title="$t('overview.term.title')" name="3">
+    <el-collapse-item :title="$t('overview.term.title')" name="3" id="term">
       <div v-html="detailInfo.terms_and_conditions" class="editor-content-view"></div>
     </el-collapse-item>
     <el-collapse-item :title="$t('overview.phase')" name="4">
@@ -69,7 +69,7 @@ const props = defineProps({
 
 .el-collapse {
   border: none;
-  margin-top: -20px;
+  margin-top: -16px;
 }
 :deep(.el-collapse-item__header) {
   font-size: 14px;

frontend/src/views/challenge/Participate.vue

@@ -16,7 +16,7 @@
         @current-change="getTeams"
         class="mt24 oa-pagination" />
       <el-button type="primary" size="large" class="long-button mt24" :disabled="!activeId" @click="participate">{{
-        $t('challenge.participate')
+        $t('participate.continue')
       }}</el-button>
     </div>
     <div class="team_ul nodata" v-else>
@@ -46,6 +46,30 @@
     </el-button>
     <span>{{ $t('challenge.partiChall') }}</span>
   </div>
+
+  <el-dialog
+    v-model="acceptDialog.visible"
+    :title="$t('overview.term.title')"
+    width="500"
+    class="oa-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    align-center>
+    <div class="accept-con">
+      {{ $t('participate.accept_text1') }} <span @click="goTermDetail">{{ $t('participate.accept_text2') }}</span>
+      {{ $t('participate.accept_text3') }}
+    </div>
+    <el-checkbox v-model="acceptDialog.accept" :label="$t('participate.accept_label')" />
+    <template #footer>
+      <div class="between">
+        <div></div>
+        <div>
+          <el-button @click="acceptDialog.visible = false" text bg>{{ $t('cancel') }}</el-button>
+          <el-button type="primary" :disabled="!acceptDialog.accept" @click="confirmParticipate"> {{ $t('challenge.participate') }} </el-button>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -61,7 +85,7 @@ const router = useRouter();
 const store = useStore();
 
 const props = defineProps(['challengeId']);
-const emit = defineEmits(['callback']);
+const emit = defineEmits(['callback', 'openTerm']);
 const pager = reactive({
   total: 0,
   pageNum: 1,
@@ -111,11 +135,27 @@ const saveTeam = () => {
       loading.close();
     });
 };
+
+const acceptDialog = reactive({
+  visible: false,
+  accept: false,
+});
 const participate = () => {
+  acceptDialog.visible = true;
+  acceptDialog.accept = false;
+};
+
+const confirmParticipate = () => {
   partChallenge(props.challengeId, activeId.value).then((res) => {
     emit('callback');
   });
 };
+
+const goTermDetail = () => {
+  acceptDialog.visible = false;
+  emit('openTerm');
+};
+
 const goLogin = () => {
   router.push('/auth/login');
 };
@@ -208,4 +248,17 @@ const goLogin = () => {
   align-items: center;
   justify-content: center;
 }
+.accept-con {
+  color: #fff;
+  margin-bottom: 10px;
+  span {
+    color: var(--el-color-primary);
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}
+.el-checkbox :deep(.el-checkbox__label) {
+  color: #7f889a;
+  font-size: 12px;
+}
 </style>

frontend/src/views/host/Index.vue

@@ -51,7 +51,7 @@
           <div class="expand-panel">
             <div class="title mb16">Challenge_phases：</div>
             <el-table :data="props.row.phaseList" :show-header="false">
-              <el-table-column label="Name" prop="name" width="200" />
+              <el-table-column label="Name" prop="name" width="250" />
               <el-table-column label="Description" prop="description">
                 <template #default="{ row }">
                   <div v-html="row.description"></div>
@@ -85,7 +85,7 @@
       <el-table-column prop="id" label="ID" width="100" />
       <el-table-column prop="title" :label="$t('host.title')">
         <template #default="{ row }">
-          <div class="underline" @click="$router.push(`/host/challenge/${row.id}`);">{{ row.title }}</div>
+          <div class="underline" @click="$router.push(`/host/challenge/${row.id}`)">{{ row.title }}</div>
         </template>
       </el-table-column>
       <el-table-column
@@ -320,7 +320,8 @@ const expandChange = (row, expandedRows) => {
   }
   :deep(.el-table__expand-icon) {
     content: url('@/assets/images/shouqi.png') !important;
-    height: 14px;
+    height: 15px;
+    padding: 1px;
     & > .el-icon {
       display: none !important;
     }