支持显示/修改用户昵称

controllers/UserController.php

@@ -45,8 +45,8 @@ class UserController extends Controller
                         ],
                         [
                             'allow' => true,
-                            'actions' => ['logout', 'setup-two-factor', 'change-password', 'download-recovery-codes', 'remove-two-factor', 'set-theme'],
+                            'actions' => ['logout', 'setup-two-factor', 'change-password', 'download-recovery-codes', 'remove-two-factor', 'set-theme', 'change-name'],
-                            'roles' => ['@'], // only logged-in user can do these
+                            'roles' => ['@'], // only logged-in user can do these ( admin included )
                         ]
                     ],
                 ],
@@ -64,6 +64,7 @@ class UserController extends Controller
                         'remove-two-factor' => ['POST'],
                         'verify-two-factor' => ['GET', 'POST'],
                         'set-theme' => ['POST'],
+                        'change-name' => ['POST'],
                     ],
                 ],
             ]
@@ -183,7 +184,7 @@ class UserController extends Controller
 
         if ($model->load(Yii::$app->request->post())) {
             // 验证二步验证代码
-            if(!is_null($model->totp_input)){
+            if (!is_null($model->totp_input)) {
                 $otp = TOTP::createFromSecret($user->otp_secret);
                 if ($otp->verify($model->totp_input)) {
                     $user->last_login = date('Y-m-d H:i:s');
@@ -197,7 +198,7 @@ class UserController extends Controller
                 } else {
                     Yii::$app->session->setFlash('error', '二步验证代码错误');
                 }
-            }elseif (!is_null($model->recoveryCode_input)) {
+            } elseif (!is_null($model->recoveryCode_input)) {
                 $recoveryCodes = explode(',', $user->recovery_codes);
                 if (in_array($model->recoveryCode_input, $recoveryCodes)) {
                     //remove the used recovery code
@@ -215,7 +216,7 @@ class UserController extends Controller
                 } else {
                     Yii::$app->session->setFlash('error', '恢复代码错误');
                 }
-            }else{
+            } else {
                 Yii::$app->session->setFlash('error', '请输入二步验证代码或恢复代码');
             }
         }
@@ -362,6 +363,10 @@ class UserController extends Controller
     }
 
     /**
+     * 显示用户信息
+     * 同时接收post请求来修改用户bio
+     * 支持参数focus指定页面加载时自动展开哪一块区域 [null,storage,bio,password,advanced]
+     *
      * @param string|null $focus
      * @return string|Response
      */
@@ -508,7 +513,7 @@ class UserController extends Controller
         } else {
             // 如果用户没有启用 TOTP，返回一个错误消息
             Yii::$app->session->setFlash('error', '获取失败，您还没有启用二步验证。');
-            return $this->redirect(['user/info']);
+            return $this->redirect(['user/info', 'focus' => 'advanced']);
         }
     }
 
@@ -524,4 +529,19 @@ class UserController extends Controller
         $user->save();
         return $this->asJson(['success' => true]);
     }
+
+    /**
+     * 修改用户昵称
+     * @return Response
+     */
+    public function actionChangeName(): Response
+    {
+        $model = Yii::$app->user->identity;
+        if ($model->load(Yii::$app->request->post()) && $model->save()) {
+            Yii::$app->session->setFlash('success', '昵称已更新');
+        } else {
+            Yii::$app->session->setFlash('error', '昵称更新失败');
+        }
+        return $this->redirect(['user/info']);
+    }
 }

models/User.php

@@ -60,7 +60,7 @@ class User extends ActiveRecord implements IdentityInterface
         return [
             [['status', 'is_encryption_enabled', 'is_otp_enabled','dark_mode'], 'integer'],
             [['created_at', 'last_login'], 'safe'],
-            [['bio', 'totp_input','recoveryCode_input'], 'string'],
+            [['bio', 'totp_input','recoveryCode_input','name'], 'string'],
             [['encryption_key', 'otp_secret', 'recovery_codes'], 'string', 'max' => 255],
             [['last_login_ip'], 'string', 'max' => 45],
             [['username', 'password'], 'required', 'on' => 'login'],

views/user/info.php

@@ -80,7 +80,10 @@ $darkMode = Yii::$app->user->identity->dark_mode;
             </div>
             <div class="user-details">
                 <div class="user-info">
-                    <p id="p-username"><?= Html::encode($model->username) ?></p>
+                    <p id="p-username" class="editable-username" title="用户昵称(用户名)">
+                        <?= Html::encode($model->name . '(' . $model->username. ')') ?>
+                        <i class="fa-solid fa-pen-to-square edit-icon"></i>
+                    </p>
                     <p><?= Html::encode($model->email) ?></p>
                     <p>
                         <?php
@@ -118,9 +121,9 @@ $darkMode = Yii::$app->user->identity->dark_mode;
         <div class="accordion userAccordion" id="userAccordion">
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingStorage">
-                    <button class="accordion-button <?= ($focus === 'storage' || $focus === null) ? '' : 'collapsed' ?>"
+                    <button class="accordion-button <?= ($focus === 'storage') ? '' : 'collapsed' ?>"
                             type="button" data-bs-toggle="collapse"
-                            data-bs-target="#collapseStorage" <?= ($focus === 'storage' || $focus === null) ? 'aria-expanded="true"' : '' ?>>
+                            data-bs-target="#collapseStorage" <?= ($focus === 'storage') ? 'aria-expanded="true"' : '' ?>>
                     <span class="accordion-storage-content">
                         <span>
                             <i class="fa-solid fa-hard-drive"></i>
@@ -133,7 +136,7 @@ $darkMode = Yii::$app->user->identity->dark_mode;
                     </button>
                 </h2>
                 <div id="collapseStorage"
-                     class="accordion-collapse collapse  <?= ($focus === 'storage' || $focus === null) ? 'show' : '' ?>">
+                     class="accordion-collapse collapse  <?= ($focus === 'storage') ? 'show' : '' ?>">
                     <div class="accordion-body">
                         <div class="storage-info">
                             <div class="storage-columns">
@@ -293,10 +296,10 @@ $darkMode = Yii::$app->user->identity->dark_mode;
         </div>
     </div>
 <?php
+// 修改用户头像的Modal
 Modal::begin([
     'title' => '<h4>更改用户头像</h4>',
     'id' => 'avatarModal',
-//    'size' => 'modal-sm',
 ]);
 
 echo Html::tag('div', '<i class="fa-solid fa-circle-info" id="info_icon"></i>
@@ -305,6 +308,24 @@ echo Html::tag('div', '<i class="fa-solid fa-circle-info" id="info_icon"></i>
 
 Modal::end();
 
+// 修改用户昵称的Modal
+Modal::begin([
+    'title' => '<h4>修改用户昵称</h4>',
+    'id' => 'changeAccountName',
+    'size' => 'modal-sm',
+]);
+
+$form = ActiveForm::begin([
+    'action' => ['user/change-name'],
+    'method' => 'post'
+]);
+echo $form->field($user, 'name')->textInput()->label('新的用户昵称:');
+echo Html::submitButton('确认修改', ['class' => 'btn btn-primary']);
+ActiveForm::end();
+
+Modal::end();
+
+// 删除账户Modal
 Modal::begin([
     'title' => '<h4>确定？</h4>',
     'id' => 'deleteAccountModal',
@@ -327,12 +348,12 @@ echo Html::endForm();
 
 Modal::end();
 
+// 二步验证Modal
 Modal::begin([
     'title' => '<h4>需要进一步操作以启用二步验证</h4>',
     'id' => 'totpSetupModal',
     'size' => 'model-xl',
 ]);
-/*<img src="<?= is_null($totp_secret) ? '' : $result->getDataUri() ?>" alt="qrcode"/>*/
 ?>
     <div class="row">
         <div class="col-md-6 text-center center">

web/css/user-info.css

@@ -205,4 +205,22 @@ html[data-bs-theme="dark"] #current {
 #info_icon {
     font-size: 2em;
     line-height: 1.5;
+}
+
+.editable-username {
+    cursor: pointer;
+
+}
+
+.editable-username:hover {
+    text-decoration: underline;
+}
+
+.editable-username .edit-icon {
+    display: none;
+    font-size: 0.75em;
+}
+
+.editable-username:hover .edit-icon {
+    display: inline;
 }

web/js/user-info.js

@@ -36,4 +36,9 @@ $(document).ready(function () {
 
 document.querySelector('.avatar-container').addEventListener('click', function () {
     $('#avatarModal').modal('show');
+});
+
+document.querySelector('.editable-username').addEventListener('click', function () {
+    // 在这里添加你的代码来显示一个模态框或其他你想要的东西
+    $('#changeAccountName').modal('show');
 });