iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
Modern Web

30天Vue出Google SSO系列 第 9

Day 09. F2E-輸入密碼

https://ithelp.ithome.com.tw/upload/images/20200903/20118686pmXgKbsVrS.jpg

今天進度目標要完成登入頁的 輸入密碼 頁~


#輸入密碼開發

其實 輸入密碼 頁,跟 輸入帳號 頁幾乎一樣
參考Google畫面
https://ithelp.ithome.com.tw/upload/images/20200819/20118686NzrkdModPg.jpg

所以第一步... ctrl+c + ctrl+v /images/emoticon/emoticon01.gif

#Step 1

標題先處理~ 副標題的部份會換其他元件,所以傳空字串:

watch: {
  $route: {
    handler: function(to, from) {
      ...
      switch (to.name) {
        ...
        case "KeyinPswd":
          this.setCard("歡迎使用", "");
          break;
      }
    },
  },
}

#Step 2

傳入密碼使用上次提到的 .sync + $emit 來雙向綁定:

<router-view
  :password.sync="user.password"
></router-view>

回到 /components/KeyinPswd.vue 用 props 接收:

export default {
  name: "KeyinPswd",
  props: ["password"],
};

computed 計算要對應的密碼綁定資料

  • get(): 得到props傳入的密碼
  • set(value): 使用 $emit 方法將值送回父層更新
computed: {
  myPassword: {
    get() {
      return this.password;
    },
    set(value) {
      this.$emit("update:password", value);
    },
  },
},

最後用 v-model 指令綁定:

<v-text-field
  ...
  v-model="user.password"
></v-text-field>

#Step 3

密碼輸入框的屬性:

<v-text-field
  label="輸入您的密碼"
  class="font-weight-bold"
  outlined
  :rules="passwordRules"
  :append-icon="showpswd ? 'mdi-eye' : 'mdi-eye-off'"
  :type="showpswd ? 'text' : 'password'"
  v-model="user.password"
  @click:append="showpswd = !showpswd"
></v-text-field>
  • :rules: 密碼輸入框對應規則,因為不用限制字數,可以把限制字數的規則拿掉(註1)
  • :append-icon: 組件後方圖標
    這邊用 showpswd 來判斷要呈現的圖標
  • showpswd: 控制密碼是否顯示的開關(註2)
  • :type: 輸入框的類型
    一樣用 showpswd 來判斷
    • text: 文字
    • password: 密碼
  • @click:append: 這是組件特有的指令,作用是在點擊後方圖標時觸發事件
    這邊設定讓他點擊時改變 showpswd

註1: 限制字數規則拿掉,留下必填的規則

data() {
  return {
    passwordRules: [(v) => !!v || "請輸入密碼"],
  };
},

註2: showpswd 加入data中,預設是false不顯示

data() {
  return {
    showpswd: false,
  };
},

#Step 4

回到 /views/Login.vue 來做副標題的部份,副標題在切換到 輸入密碼 頁時會換成Vuetify-Chips紙片組件

<v-row v-if="card.chipShow" justify="center" align="center">
  <v-chip class="ma-2" outlined>
    <v-icon
      left
      color="grey darken-2"
      v-text="`mdi-account-circle`"
    ></v-icon>
    {{ user.username }}
    <v-icon right v-text="`mdi-chevron-down`"></v-icon>
  </v-chip>
</v-row>

這邊寫了一個開關 chipShow 來控制 chip 要不要顯示,預設不顯示:

data() {
    return {
      card: {
        ...
        chipShow: false, 
      },
      ...
    };
  },

#Step 5

chipShow 值的控制寫在 setCard() 中,增加一個傳入參數:

setCard(title, subTitle, chipShow) {
  ...  
  this.card.chipShow = chipShow;
},

修改一下 watch $route 在設定初始值以及 輸入密碼 頁的傳入值:

watch: {
  $route: {
    handler: function(to, from) {
      this.setCard("", "", false); //設定初始值加上第3個參數
      switch (to.name) {
        ...
        case "KeyinPswd":
          this.setCard("歡迎使用", "", true); //輸入密碼頁加上第3個參數
          break;
      }
    },
  },
}

#結果

完成之後效果如圖:
https://ithelp.ithome.com.tw/upload/images/20200922/201186864ZVUSnBvNj.jpg


大部分都是和輸入帳號一樣的所以篇幅有點少,抓緊時間加碼繼續來做 驗證身分 頁xD


#驗證身分開發

驗證身分 是4個子頁裡面功能最簡單的
此頁的目的是告知使用者必須驗證身分,但實際驗證的動作還是會回到 輸入密碼 頁來處理
也就是說此頁只有呈現資料及頁面導向而已!!

#Step 1

一樣先設定標題:

watch: {
  $route: {
    handler: function(to, from) {
      ...
      switch (to.name) {
        ...
        case "VerifyUser":
          this.setCard("請驗證您的身分", this.user.accountId);
          break;
      }
    },
  },
}

#Step 2

頁面內容為:

<template>
  <div>
    <v-card-text
      v-text="
        `為確保您的帳戶安全,Vue SSO必須驗證您的身分。請重新登入,以便繼續使用這項服務。`
      "
    >
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn 
        color="primary" 
        class="mr-2" 
        :to="{ name: 'KeyinPswd' }"
        v-text="`繼續`"
      >
      </v-btn>
    </v-card-actions>
  </div>
</template>

內容蠻簡單的!!

#結果

驗證身分頁面這樣就完成了~ xD
https://ithelp.ithome.com.tw/upload/images/20200902/20118686VX88R4f4o8.jpg


今日重點:

  • 密碼輸入框使用開關來控制呈現方式(密碼是否顯示)
  • 副標題使用開關來控制呈現方式(Chips組件或文字)
  • Vuetify 組件的API查詢及使用

有需要改進或是任何意見建議歡迎下面留言~


上一篇
Day 08. F2E-選擇帳號
下一篇
Day 10. F2E-表單驗證
系列文
30天Vue出Google SSO30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言