ngOnInit () {
this.buildForm({
- 'display-name': this.userValidatorsService.USER_DISPLAY_NAME,
+ 'display-name': this.userValidatorsService.USER_DISPLAY_NAME_REQUIRED,
description: this.userValidatorsService.USER_DESCRIPTION
})
</p>
</div>
+ <div class="form-group">
+ <label for="displayName" i18n>Channel display name</label>
+
+ <div class="input-group">
+ <input
+ type="text" id="displayName"
+ formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+ >
+ </div>
+
+ <div *ngIf="formErrors.displayName" class="form-error">
+ {{ formErrors.displayName }}
+ </div>
+ </div>
+
<div class="form-group">
<label for="name" i18n>Channel name</label>
</div>
</div>
+ <div class="name-information" i18n>
+ The channel name is a unique identifier of your channel on this instance. It's like an address mail, so other people can find your channel.
+ </div>
+
<div *ngIf="formErrors.name" class="form-error">
{{ formErrors.name }}
</div>
Channel name cannot be the same than your account name. You can click on the first step to update your account name.
</div>
</div>
-
- <div class="form-group">
- <label for="displayName" i18n>Channel display name</label>
-
- <div class="input-group">
- <input
- type="text" id="displayName"
- formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
- >
- </div>
-
- <div *ngIf="formErrors.displayName" class="form-error">
- {{ formErrors.displayName }}
- </div>
- </div>
</form>
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
import { AuthService } from '@app/core'
-import { FormReactive, VideoChannelValidatorsService } from '@app/shared'
+import { FormReactive, UserService, VideoChannelValidatorsService } from '@app/shared'
import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
import { FormGroup } from '@angular/forms'
+import { pairwise } from 'rxjs/operators'
+import { concat, of } from 'rxjs'
@Component({
selector: 'my-register-step-channel',
constructor (
protected formValidatorService: FormValidatorService,
private authService: AuthService,
+ private userService: UserService,
private videoChannelValidatorsService: VideoChannelValidatorsService
) {
super()
return window.location.host
}
- isSameThanUsername () {
- return this.username && this.username === this.form.value['name']
- }
-
ngOnInit () {
this.buildForm({
- name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME,
- displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME
+ displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME,
+ name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME
})
setTimeout(() => this.formBuilt.emit(this.form))
+
+ concat(
+ of(''),
+ this.form.get('displayName').valueChanges
+ ).pipe(pairwise())
+ .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
+ }
+
+ isSameThanUsername () {
+ return this.username && this.username === this.form.value['name']
+ }
+
+ private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
+ const name = this.form.value['name'] || ''
+
+ const newName = this.userService.getNewUsername(oldDisplayName, newDisplayName, name)
+ this.form.patchValue({ name: newName })
}
}
<form role="form" [formGroup]="form">
+ <div class="form-group">
+ <label for="displayName" i18n>Display name</label>
+
+ <div class="input-group">
+ <input
+ type="text" id="displayName" placeholder="John Doe"
+ formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+ >
+ </div>
+
+ <div *ngIf="formErrors.displayName" class="form-error">
+ {{ formErrors.displayName }}
+ </div>
+ </div>
+
<div class="form-group">
<label for="username" i18n>Username</label>
</div>
</div>
+ <div class="name-information" i18n>
+ The username is a unique identifier of your account on this instance. It's like an address mail, so other people can find you.
+ </div>
+
<div *ngIf="formErrors.username" class="form-error">
{{ formErrors.username }}
</div>
import { Component, EventEmitter, OnInit, Output } from '@angular/core'
import { AuthService } from '@app/core'
-import { FormReactive, UserValidatorsService } from '@app/shared'
+import { FormReactive, UserService, UserValidatorsService } from '@app/shared'
import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
import { FormGroup } from '@angular/forms'
+import { pairwise } from 'rxjs/operators'
+import { concat, of } from 'rxjs'
@Component({
selector: 'my-register-step-user',
constructor (
protected formValidatorService: FormValidatorService,
private authService: AuthService,
+ private userService: UserService,
private userValidatorsService: UserValidatorsService
) {
super()
ngOnInit () {
this.buildForm({
+ displayName: this.userValidatorsService.USER_DISPLAY_NAME_REQUIRED,
username: this.userValidatorsService.USER_USERNAME,
password: this.userValidatorsService.USER_PASSWORD,
email: this.userValidatorsService.USER_EMAIL,
})
setTimeout(() => this.formBuilt.emit(this.form))
+
+ concat(
+ of(''),
+ this.form.get('displayName').valueChanges
+ ).pipe(pairwise())
+ .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
+ }
+
+ private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
+ const username = this.form.value['username'] || ''
+
+ const newUsername = this.userService.getNewUsername(oldDisplayName, newDisplayName, username)
+ this.form.patchValue({ username: newUsername })
}
}
</cdk-step>
<cdk-step i18n-label label="Done" editable="false">
+ <div *ngIf="!signupDone && !error" class="done-loader">
+ <my-loader [loading]="true"></my-loader>
+
+ <div i18n>PeerTube is creating your account...</div>
+ </div>
+
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
</cdk-step>
</my-custom-stepper>
@include peertube-button;
@include orange-button;
}
+
+.name-information {
+ margin-top: 10px;
+}
+
+.done-loader {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+
+ my-loader {
+ margin-bottom: 20px;
+
+ /deep/ .loader div {
+ border-color: var(--mainColor) transparent transparent transparent;
+ }
+
+ & + div {
+ font-size: 15px;
+ }
+ }
+}
readonly USER_VIDEO_QUOTA: BuildFormValidator
readonly USER_VIDEO_QUOTA_DAILY: BuildFormValidator
readonly USER_ROLE: BuildFormValidator
- readonly USER_DISPLAY_NAME: BuildFormValidator
+ readonly USER_DISPLAY_NAME_REQUIRED: BuildFormValidator
readonly USER_DESCRIPTION: BuildFormValidator
readonly USER_TERMS: BuildFormValidator
}
}
- this.USER_DISPLAY_NAME = {
- VALIDATORS: [
- Validators.required,
- Validators.minLength(1),
- Validators.maxLength(50)
- ],
- MESSAGES: {
- 'required': this.i18n('Display name is required.'),
- 'minlength': this.i18n('Display name must be at least 1 character long.'),
- 'maxlength': this.i18n('Display name cannot be more than 50 characters long.')
- }
- }
+ this.USER_DISPLAY_NAME_REQUIRED = this.getDisplayName(true)
this.USER_DESCRIPTION = {
VALIDATORS: [
}
}
}
+
+ private getDisplayName (required: boolean) {
+ const control = {
+ VALIDATORS: [
+ Validators.minLength(1),
+ Validators.maxLength(120)
+ ],
+ MESSAGES: {
+ 'required': this.i18n('Display name is required.'),
+ 'minlength': this.i18n('Display name must be at least 1 character long.'),
+ 'maxlength': this.i18n('Display name cannot be more than 50 characters long.')
+ }
+ }
+
+ if (required) control.VALIDATORS.push(Validators.required)
+
+ return control
+ }
}
<div *ngIf="loading">
- <div class="lds-ring">
+ <div class="loader">
<div></div>
<div></div>
<div></div>
// Thanks to https://loading.io/css/ (CC0 License)
-.lds-ring {
+.loader {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
}
-.lds-ring div {
+.loader div {
box-sizing: border-box;
display: block;
position: absolute;
margin: 6px;
border: 4px solid;
border-radius: 50%;
- animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #999999 transparent transparent transparent;
}
-.lds-ring div:nth-child(1) {
+.loader div:nth-child(1) {
animation-delay: -0.45s;
}
-.lds-ring div:nth-child(2) {
+.loader div:nth-child(2) {
animation-delay: -0.3s;
}
-.lds-ring div:nth-child(3) {
+.loader div:nth-child(3) {
animation-delay: -0.15s;
}
-@keyframes lds-ring {
+@keyframes loader {
0% {
transform: rotate(0deg);
}
.pipe(catchError(res => this.restExtractor.handleError(res)))
}
+ getNewUsername (oldDisplayName: string, newDisplayName: string, currentUsername: string) {
+ // Don't update display name, the user seems to have changed it
+ if (this.displayNameToUsername(oldDisplayName) !== currentUsername) return currentUsername
+
+ return this.displayNameToUsername(newDisplayName)
+ }
+
+ displayNameToUsername (displayName: string) {
+ if (!displayName) return ''
+
+ return displayName
+ .toLowerCase()
+ .replace(/\s/g, '_')
+ .replace(/[^a-z0-9_.]/g, '')
+ }
+
/* ###### Admin methods ###### */
addUser (userCreate: UserCreate) {
previewUrl: null
}))
-
this.hydrateFormFromVideo()
},
adminFlags: body.adminFlags || UserAdminFlag.NONE
})
- const { user, account } = await createUserAccountAndChannelAndPlaylist(userToCreate)
+ const { user, account } = await createUserAccountAndChannelAndPlaylist({ userToCreate: userToCreate })
auditLogger.create(getAuditIdFromRes(res), new UserAuditView(user.toFormattedJSON()))
logger.info('User %s with its channel and account created.', body.username)
emailVerified: CONFIG.SIGNUP.REQUIRES_EMAIL_VERIFICATION ? false : null
})
- const { user } = await createUserAccountAndChannelAndPlaylist(userToCreate, body.channel)
+ const { user } = await createUserAccountAndChannelAndPlaylist({
+ userToCreate: userToCreate,
+ userDisplayName: body.displayName || undefined,
+ channelNames: body.channel
+ })
auditLogger.create(body.username, new UserAuditView(user.toFormattedJSON()))
logger.info('User %s with its channel and account registered.', body.username)
}
const user = new UserModel(userData)
- await createUserAccountAndChannelAndPlaylist(user, undefined, validatePassword)
+ await createUserAccountAndChannelAndPlaylist({ userToCreate: user, channelNames: undefined, validateUser: validatePassword })
logger.info('Username: ' + username)
logger.info('User password: ' + password)
}
// Create application account
{
const applicationInstance = await ApplicationModel.findOne()
- const accountCreated = await createLocalAccountWithoutKeys(SERVER_ACTOR_NAME, null, applicationInstance.id, undefined)
+ const accountCreated = await createLocalAccountWithoutKeys({
+ name: SERVER_ACTOR_NAME,
+ userId: null,
+ applicationId: applicationInstance.id,
+ t: undefined
+ })
const { publicKey, privateKey } = await createPrivateAndPublicKeys()
accountCreated.Actor.publicKey = publicKey
// Recreate accounts for each user
const users = await db.User.findAll()
for (const user of users) {
- const account = await createLocalAccountWithoutKeys(user.username, user.id, null, undefined)
+ const account = await createLocalAccountWithoutKeys({ name: user.username, userId: user.id, applicationId: null, t: undefined })
const { publicKey, privateKey } = await createPrivateAndPublicKeys()
account.Actor.publicKey = publicKey
-import * as Sequelize from 'sequelize'
import * as uuidv4 from 'uuid/v4'
import { ActivityPubActorType } from '../../shared/models/activitypub'
import { SERVER_ACTOR_NAME } from '../initializers/constants'
import { UserNotificationSetting, UserNotificationSettingValue } from '../../shared/models/users'
import { createWatchLaterPlaylist } from './video-playlist'
import { sequelizeTypescript } from '../initializers/database'
+import { Transaction } from 'sequelize/types'
type ChannelNames = { name: string, displayName: string }
-async function createUserAccountAndChannelAndPlaylist (userToCreate: UserModel, channelNames?: ChannelNames, validateUser = true) {
+async function createUserAccountAndChannelAndPlaylist (parameters: {
+ userToCreate: UserModel,
+ userDisplayName?: string,
+ channelNames?: ChannelNames,
+ validateUser?: boolean
+}) {
+ const { userToCreate, userDisplayName, channelNames, validateUser = true } = parameters
+
const { user, account, videoChannel } = await sequelizeTypescript.transaction(async t => {
const userOptions = {
transaction: t,
const userCreated = await userToCreate.save(userOptions)
userCreated.NotificationSetting = await createDefaultUserNotificationSettings(userCreated, t)
- const accountCreated = await createLocalAccountWithoutKeys(userCreated.username, userCreated.id, null, t)
+ const accountCreated = await createLocalAccountWithoutKeys({
+ name: userCreated.username,
+ displayName: userDisplayName,
+ userId: userCreated.id,
+ applicationId: null,
+ t: t
+ })
userCreated.Account = accountCreated
const channelAttributes = await buildChannelAttributes(userCreated, channelNames)
return { user, account, videoChannel } as { user: UserModel, account: AccountModel, videoChannel: VideoChannelModel }
}
-async function createLocalAccountWithoutKeys (
+async function createLocalAccountWithoutKeys (parameters: {
name: string,
+ displayName?: string,
userId: number | null,
applicationId: number | null,
- t: Sequelize.Transaction | undefined,
- type: ActivityPubActorType= 'Person'
-) {
+ t: Transaction | undefined,
+ type?: ActivityPubActorType
+}) {
+ const { name, displayName, userId, applicationId, t, type = 'Person' } = parameters
const url = getAccountActivityPubUrl(name)
const actorInstance = buildActorInstance(type, url, name)
const actorInstanceCreated = await actorInstance.save({ transaction: t })
const accountInstance = new AccountModel({
- name,
+ name: displayName || name,
userId,
applicationId,
actorId: actorInstanceCreated.id
}
async function createApplicationActor (applicationId: number) {
- const accountCreated = await createLocalAccountWithoutKeys(SERVER_ACTOR_NAME, null, applicationId, undefined, 'Application')
+ const accountCreated = await createLocalAccountWithoutKeys({
+ name: SERVER_ACTOR_NAME,
+ userId: null,
+ applicationId: applicationId,
+ t: undefined,
+ type: 'Application'
+ })
accountCreated.Actor = await setAsyncActorKeys(accountCreated.Actor)
// ---------------------------------------------------------------------------
-function createDefaultUserNotificationSettings (user: UserModel, t: Sequelize.Transaction | undefined) {
+function createDefaultUserNotificationSettings (user: UserModel, t: Transaction | undefined) {
const values: UserNotificationSetting & { userId: number } = {
userId: user.id,
newVideoFromSubscription: UserNotificationSettingValue.WEB,
body('username').custom(isUserUsernameValid).withMessage('Should have a valid username'),
body('password').custom(isUserPasswordValid).withMessage('Should have a valid password'),
body('email').isEmail().withMessage('Should have a valid email'),
- body('channel.name').optional().custom(isActorPreferredUsernameValid).withMessage('Should have a valid channel name'),
- body('channel.displayName').optional().custom(isVideoChannelNameValid).withMessage('Should have a valid display name'),
+ body('displayName')
+ .optional()
+ .custom(isUserDisplayNameValid).withMessage('Should have a valid display name'),
+
+ body('channel.name')
+ .optional()
+ .custom(isActorPreferredUsernameValid).withMessage('Should have a valid channel name'),
+ body('channel.displayName')
+ .optional()
+ .custom(isVideoChannelNameValid).withMessage('Should have a valid display name'),
async (req: express.Request, res: express.Response, next: express.NextFunction) => {
logger.debug('Checking usersRegister parameters', { parameters: omit(req.body, 'password') })
const registrationPath = path + '/register'
const baseCorrectParams = {
username: 'user3',
+ displayName: 'super user',
email: 'test3@example.com',
password: 'my super password'
}
})
})
+ it('Should fail with a bad display name', async function () {
+ const fields = immutableAssign(baseCorrectParams, { displayName: 'a'.repeat(150) })
+
+ await makePostBodyRequest({ url: server.url, path: registrationPath, token: server.accessToken, fields })
+ })
+
it('Should fail with a bad channel name', async function () {
const fields = immutableAssign(baseCorrectParams, { channel: { name: '[]azf', displayName: 'toto' } })
getUserInformation,
getUsersList,
getUsersListPaginationAndSort,
+ getVideoChannel,
getVideosList,
login,
makePutBodyRequest,
rateVideo,
- registerUser,
+ registerUserWithChannel,
removeUser,
removeVideo,
ServerInfo,
updateMyUser,
updateUser,
uploadVideo,
- userLogin,
- registerUserWithChannel, getVideoChannel
+ userLogin
} from '../../../../shared/extra-utils'
import { follow } from '../../../../shared/extra-utils/server/follows'
import { setAccessTokensToServers } from '../../../../shared/extra-utils/users/login'
describe('Registering a new user', function () {
it('Should register a new user', async function () {
- const user = { username: 'user_15', password: 'my super password' }
+ const user = { displayName: 'super user 15', username: 'user_15', password: 'my super password' }
const channel = { name: 'my_user_15_channel', displayName: 'my channel rocks' }
await registerUserWithChannel({ url: server.url, user, channel })
accessToken = await userLogin(server, user15)
})
+ it('Should have the correct display name', async function () {
+ const res = await getMyUserInformation(server.url, accessToken)
+ const user: User = res.body
+
+ expect(user.account.displayName).to.equal('super user 15')
+ })
+
it('Should have the correct video quota', async function () {
const res = await getMyUserInformation(server.url, accessToken)
const user = res.body
}
})
-
it('Should be able to create a public playlist, and set it to private', async function () {
this.timeout(30000)
function registerUserWithChannel (options: {
url: string,
- user: { username: string, password: string },
+ user: { username: string, password: string, displayName?: string },
channel: { name: string, displayName: string }
}) {
const path = '/api/v1/users/register'
channel: options.channel
}
+ if (options.user.displayName) {
+ Object.assign(body, { displayName: options.user.displayName })
+ }
+
return makePostBodyRequest({
url: options.url,
path,
password: string
email: string
+ displayName?: string
+
channel?: {
name: string
displayName: string
email:
type: string
description: 'The email of the user '
+ displayName:
+ type: string
+ description: 'The user display name'
+ channel:
+ type: object
+ properties:
+ name:
+ type: string
+ description: 'The default channel name'
+ displayName:
+ type: string
+ description: 'The default channel display name'
+
required:
- username
- password
projects / oweals / peertube.git / commitdiff